Ionic2实现自定义Cordova插件-Android屏幕录制

2017-08-24 本文已影响163人 charles0427

之前用Android原生写过一个录屏直播、点播的客户端，现打算将用的较多的点播功能移植到Ionic2项目里。正好熟悉下Cordova创建、调用和发布自定义插件的过程。
cordova-plugin-screenrecord

创建ScreenRecord插件

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

npm install -g plugman
在ionic2项目下，plugman create --name ScreenRecord --plugin_id com.unionpay.screenrecord --plugin_version 0.0.1
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库现有的插件已经很多，但为了具体的业务需求。自定义插件还是很有必要的。