Ionic2實現自定義Cordova插件-Android屏幕錄制

之前用Android原生寫過一個錄屏直播、點播的客戶端，現打算將用的較多的點播功能移植到Ionic2項目里。正好熟悉下Cordova創建、調用和發布自定義插件的過程。
cordova-plugin-screenrecord

創建ScreenRecord插件

Cordova提供了cli工具plugman，官方文檔

  1. npm install -g plugman
  2. 在ionic2項目下，plugman create --name ScreenRecord --plugin_id com.unionpay.screenrecord --plugin_version 0.0.1
  3. cd ScreenRecord，添加平臺插件代碼，我這里只需生成Android
    plugman platform add platform_name android，

plugin項目的架構至此就搭建好了，

ScreenRecord
-src
--android
---ScreenRecord.java
---ScreenRecordService.java
-www
--ScreenRecord.js
plugin.xml

編寫ScreenRecord插件

plugin.xml

cordova插件的配置文件，介紹關鍵的標簽：

<js-module name="ScreenRecord" src="www/ScreenRecord.js">
        <clobbers target="ScreenRecord"/>
</js-module>

指定js接口文件的路徑

<platform name="android">
        <config-file parent="/*" target="AndroidManifest.xml">
            <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
            <uses-permission android:name="android.permission.RECORD_AUDIO"/>
        </config-file>
        <config-file parent="/*" target="res/xml/config.xml">
            <feature name="ScreenRecord">
                <param name="android-package" value="com.unionpay.screenrecord.ScreenRecord"/>
            </feature>
        </config-file>
        <config-file parent="/*" target="AndroidManifest.xml"></config-file>
        <source-file src="src/android/ScreenRecord.java"
                     target-dir="src/com/unionpay/screenrecord"/>
        <source-file src="src/android/ScreenRecordService.java"
                     target-dir="src/com/unionpay/screenrecord"/>
</platform>

通過<config-file>標簽可以將插件需要的權限注入到Ionic2安卓項目的AndroidManifest.xml中。Cordova還提供API - PermissionHelper，用于動態檢測和申請權限，具體方法見http://cordova.apache.org/docs/en/latest/guide/platforms/android/plugin.html
<source-file>標簽用于配置需注入的java文件和路徑。
除這兩種標簽，plugin.xml還可以配置Android項目中可能用到的靜態布局文件、依賴庫等。

ScreenRecord.js

接口文件，通過cordova.exec實現與原生代碼的交互。

var exec = require('cordova/exec');

var ScreenRecord = function(){
}

ScreenRecord.startRecord = function(options, filePath, success, error) {
  exec(success, error, "ScreenRecord", "startRecord", [options, filePath]);
};

ScreenRecord.stopRecord = function(success, error) {
  exec(success, error, "ScreenRecord", "stopRecord", []);
}

module.exports = ScreenRecord;

這里將方法對象ScreenRecord作為模塊導出，方面Ionic2在ts文件中調用(在declaration.d.ts中聲明全局變量ScreenRecord即可)。

cordova.exec方法需傳入5個參數:

  • success, 成功回調方法
  • error， 錯誤回調方法
  • “service”， 對應Android的class名稱
  • “action”, 對應原生代碼中的方法
  • [/* arguments */]， 傳給原生代碼的參數數組

ScreenRecord.java

Cordova插件的Android代碼要求至少有一個class繼承CordovaPlugin，以及重寫excute方法。

package com.unionpay.screenrecord;

import org.apache.cordova.CordovaPlugin;
import org.apache.cordova.CallbackContext;
import org.apache.cordova.PermissionHelper;
import org.apache.cordova.PluginResult;

import org.json.JSONArray;
import org.json.JSONException;
import org.json.JSONObject;

import java.io.File;

import android.Manifest;
import android.content.Intent;
import android.media.projection.MediaProjection;
import android.media.projection.MediaProjectionManager;
import android.util.Log;
import android.content.pm.PackageManager;

import com.unionpay.screenrecord.ScreenRecordService;

/**
 * This class echoes a string called from JavaScript.
 */
public class ScreenRecord extends CordovaPlugin {

    public final static String TAG = "ScreenRecord";

    public MediaProjectionManager mProjectionManager;

    public ScreenRecordService screenRecord;

    public CallbackContext callbackContext;

    public JSONObject options;

    public String filePath;

    public static final int PERMISSION_DENIED_ERROR = 20;
    public static final int RECORD_AUDIO = 0;

    protected final static String permission = Manifest.permission.RECORD_AUDIO;

    public final static int SCREEN_RECORD_CODE = 0;

    @Override
    public boolean execute(String action, JSONArray args, CallbackContext callbackContext) throws JSONException {
        this.callbackContext = callbackContext;
        if (action.equals("startRecord")) {
            options = args.getJSONObject(0);
            filePath = args.getString(1);
            this.startRecord(callbackContext);
            return true;
        } else if (action.equals("stopRecord")) {
            this.stopRecord(callbackContext);
            return true;
        }
        return false;
    }

······

省略了具體的業務代碼，主要介紹重寫execute方法。
結合之前的js接口代碼，很快就能明白該方法的三個參數：

  • action， 對應js中的action，用于匹配與js中哪個方法進行交互
  • args， JSONArray格式的參數列表，例如我在startRecord方法中傳入兩個參數，一個json對象options，一個String對象filePath。通過JSONArray的API祛除對應格式的值
  • CallbackContext，該類提供兩個方法,callbackContext.success()對應js中的success回調，callbackContext.error()對應js中的error()回調

問題
在寫錄屏的原生代碼時，用到了Intent和getActivity。實際編譯后會報錯，Cordova插件是無法直接引用這兩個方法的，CordovaPlugin中聲明了接口CordovaInterface對象cordova，通過該對象可以使用Intent與其他Activity交互。

mProjectionManager = (MediaProjectionManager) this.cordova.getActivity().getSystemService("media_projection");
Intent captureIntent = mProjectionManager.createScreenCaptureIntent();
cordova.startActivityForResult(this, captureIntent, SCREEN_RECORD_CODE);

ScreenRecordService

開啟錄屏進程的類，具體代碼見git吧

Ionic2調試插件

在項目下輸入命令ionic plugin add path/ScreenRecord
插件安裝成功，ScreenRecord會出現在plugins目錄下，項目代碼也會被添加到android下。
調試過程中，若出現java代碼導致的問題，可以直接修改platforms/android的代碼，這樣重新ionic build或ionic run可以看到修改后的效果。
若修改ScreenRecord下的代碼，需要先移除插件，再安裝。
ionic plugin remove com.unionpay.screenrecord，
ionic plugin add path/ScreenRecord

自定義Cordova插件的發布

  • 創建package.json
    plugman createpackagejson /path/to/your/plugin
    創建之前最好先將插件代碼提交至git，json中需配置plugin的name，id，git repository等
  • 登錄npm
    若已注冊過npm賬號，npm login然后輸入用戶名、密碼以及郵箱
    若沒有，npm adduser，按照提示設置你的賬號。
  • 發布plugin
    在插件根目錄下npm publish .
    如果npm之前有設置了淘寶鏡像，會遇到錯誤no_perms Private mode enable...
    通過npm config set registry https://registry.npmjs.org切換回官方地址。再執行上傳命令。

總的來說，實現一個Cordova自定義插件并不難，而且cordova plugins庫現有的插件已經很多，但為了具體的業務需求。自定義插件還是很有必要的。

最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容