Uniapp跨平台接入Android端即构实时音视频RTC+相芯美颜滤镜

0 前言

前阵子使用Uniapp平台开发了一个跨平台app，并且接入了即构RTC后，今天想进一步丰富app的直播功能。之前有相芯美颜的开发经验，打算将相芯美颜接入即构RTC.

在DCloud插件市场找到了在即构RTC接入相芯美颜插件，https://ext.dcloud.net.cn/plugin?id=18718, 按照里面的readme教程完成接入，为了让后来者少走弯路，将接入过程以及原理记录到本文中，欢迎大家评论讨论。最终实现的效果如下：

1 配置准备

先加入在DCloud插件市场中加入两个插件, 分别点击如下两个链接:

1. 即构RTC接入相芯美颜插件
2. ZEGO 即构实时音视频 SDK

然后分别点击"点击购买（0元）for 云打包", 如下图所示：

接下来在HBuilder的App原生插件上加入以上两个插件，如下所示：

2 代码开发

本文基于即构RTC接入相芯美颜插件的示例项目开发，前往即构RTC接入相芯美颜插件官网下载示例项目ZIP，如下图所示：

2.1 即构与相芯秘钥配置

打开pages/KeyCenter.js, 填写以下内容：

let appID = ;
let userID =   
let appSign =  
let token = 
let authpack = 

以上各个配置参数通过如下途径获取：

1. appID：打开即构后台管理https://console.zego.im/dashboard，可以得到appID, 形如123456789。
2. userID：随意定义的字符串，作为当前登录用户的id
3. appSign：旧的鉴权方式需要使用，建议参考https://doc-zh.zego.im/faq/token_upgrade 切换到最新的鉴权。用户可以从https://console.zego.im/dashboard 获取appSign，注意以后不再提供appSign支持。
4. token：最新的鉴权方案，参考这里https://doc-zh.zego.im/faq/token_upgrade

5. authpack：由相芯对接工作人员提供生成代码，可以运行保存下来。相芯提供类似如下代码：

   public class authpack {
    public static int sha1_32(byte[] buf){int ret=0;try{byte[] digest=MessageDigest.getInstance("SHA1").digest(buf);return ((int)(digest[0]&0xff)<<24)+((int)(digest[1]&0xff)<<16)+((int)(digest[2]&0xff)<<8)+((int)(digest[3]&0xff)<<0);}catch(Exception e){}return ret;}
    public static byte[] A(){
        byte[] buf=new byte[1266];
        int i=0;
        for(i=-61;i<-59;i++){ buf[0]=(byte)i; if(sha1_32(buf)==-1001144934){break;} }
        //-------------------//
        ...此处重复格式代码略....
        //------------------//
        for(i=80;i<88;i++){ buf[1265]=(byte)i; if(sha1_32(buf)==382609747){break;} }
            return buf;
        }
   }

   得到上面代码后，调用authpack.A()得到byte[]对象，将数组里面的值打印出来。得到类似如下数据，直接复制出来，设置给authpack。

   [-61, -114, -2, -31, -43, 62, -112, -87, -120, 81, -93, 78, -55, -25, -20, 44, -29, -100, -98, 35, 112, -
    94, 58, 67, 57, -21, 59, -110, 56, -56, -73, -118, 57, -48, -9, -83, 80, 121, 58, 124, -107, -53, 38, -106, -58,
    -85, 35, -39, 61, 119, -54, 31, 69, -95, 88, -16, 35, -18, 74, 20, -18, 15, 110, 93, -80, -44, 10, -12, 68, -59,
    -108, 110, -83, -13, -34, -80, -67, -105, 55, 74, 105, 14, -36,.................]

2.2 开启美颜

打开pages/index/index.nvue引入如下几个库：

import ZGFUBeautyWrapper from "@/components/Zego-FUBeautyWrapper/lib/ZGFUBeautyWrapper";
import ZegoFU from "@/components/Zego-FUBeautyWrapper/ZegoFU";
import FaceBeautyEnum from "@/components/Zego-FUBeautyWrapper/FaceBeautyEnum";

接下来开启美颜

//初始化美颜相关操作
let self = this;
let authpack = KeyCenter.getAuthPack();
ZegoFU.initZgAndRegisterFu(authpack, function(succ, msg) {
    self.initReady = succ;
    if (!succ) {
        console.log(msg)
    } else {
        console.log("已完成必要的SDK初始化，注意后面释放RTC引擎的同时，也要关闭美颜！！！")
        console.log("一切ready，接下来可以登录房间...")
    }
});

一切ready后，就可以调用相芯美颜了，相芯美颜的调用主要关注3个地方：美颜类型、美颜名称、美颜强度。美颜类型主要有3个：美肤、美肤、滤镜，每个美颜类型下有不同的美颜方法如：瘦脸、美牙等。可以通过如下方式实现：

//切换美肤、美型、滤镜tab
onClkFuTab(idx) { 
    this.fuSelIdx = idx;
    if (idx == 0) {
        this.curFuList = FaceBeautyEnum.skinList;
        this.fuIsFilter = false;
    } else if (idx == 1) {
        this.curFuList = FaceBeautyEnum.shapeList;
        this.fuIsFilter = false;
    } else {
        this.curFuList = FaceBeautyEnum.filterList;
        this.fuIsFilter = true;
    }
}
//设置美颜名称 
setFuParam(fuEnName, fuCnName) { 
    this.fuSelCnName = fuCnName;
    this.fuSelEnName = fuEnName; 
}
//拖拉条设置美颜强度
sliderChange(e) {
    let v = e.detail.value / 100.0; 
    if (v >= 0 && v <= 1)
        ZegoFU.setFUParam(this.fuSelEnName, v, this.fuIsFilter).then(function(c) {
            console.log(this.fuSelEnName, v, c, this.fuIsFilter ? "setFilter" : "updateParamIntensity")
        })
    else {
        console.log("无效值，过滤" + c);
    }
}

2.3 关闭美颜

最后记得，在不使用美颜的时候要记得关闭美颜。防止出现绑定美颜异常。尤其是在即构RTC引擎被destroy时：

// 销毁引擎
destroyEngine() {
    this.appendActionInfo("Destroy Engine");
    this.logoutRoom(this.roomID);
    ZegoExpressEngine.destroyEngine();
    this.engine = null
    /**
     * 记得要关闭美颜引擎
     **/
    ZGFUBeautyWrapper.closeBeauty().then(function(code) {
        console.log("closeBeauty " + code)
    })
},

3 Native层相芯美颜接入即构RTC的基本原理

美颜可以看成是一种自定义的图像处理算法，即构RTC接入自定义图像处理流程如下：

具体来说，使用即构RTC的setCustomVideoProcessHandler函数，传入IZegoCustomVideoProcessHandler对象，该对象里面onCapturedUnprocessedTextureData函数传入的是当前摄像头采集的纹理ID(可以理解为opengl中的纹理id)，返回的是用户自定义算法处理完成后的纹理id。参考示例如下：

// 自定义前处理为示例
// 回调方法获取原始数据
// 回调处理
// Effect 初始化反初始化在 Express 视频前处理开始停止回调里
express.setCustomVideoProcessHandler(new IZegoCustomVideoProcessHandler() {
    @Override
    public void onStart(ZegoPublishChannel channel) {
        effects.initEnv(720, 1280);
    }

    // 一定要反初始化，否则会造成内存泄露
    @Override
    public void onStop(ZegoPublishChannel channel) {
        effects.uninitEnv(); 
    }

    // 回调方法获取原始数据 texture
    @Override
    public void onCapturedUnprocessedTextureData(int textureID, int width, int height, long referenceTimeMillisecond, ZegoPublishChannel channel) {

        ZegoEffectsVideoFrameParam param = new ZegoEffectsVideoFrameParam();
        param.format = ZegoEffectsVideoFrameFormat.RGBA32;
        param.width = width;
        param.height = height;

        // 自定义前处理：此处使用 ZEGO Effects SDK
        int processedTextureID = effects.processTexture(textureID, param);

        // 将处理后的 buffer 发回 ZEGO Express SDK 里
        express.sendCustomVideoProcessedTextureData(processedTextureID, width, height, referenceTimeMillisecond);
    }
}

4 结尾

本文参考了DCloud中即构RTC接入相芯美颜插件的示例工程，里面提供了调用细节代码，读者可以多多挖掘，尤其是components/Zego-FUBeautyWrapper里的Uniapp调用封装，可以拿来借鉴相关思路扩展到其他类似项目中

5 结尾

结尾贴上插件链接，感兴趣的朋友可以自行下载体验：
最后附上本文参考的相关资料：

• 即构RTC接入相芯美颜插件: https://ext.dcloud.net.cn/plugin?id=18718
• ZEGO 即构实时音视频 SDK：https://ext.dcloud.net.cn/plugin?id=3617
• 即构RTC接入美颜：https://doc-zh.zego.im/article/11257
• 即构RTC-uniapp端：https://doc-zh.zego.im/article/7775