0 前言
前阵子使用Uniapp平台开发了一个跨平台app,并且接入了即构RTC后,今天想进一步丰富app的直播功能。之前有相芯美颜的开发经验,打算将相芯美颜接入即构RTC.
**在DCloud插件市场找到了在即构RTC接入相芯美颜插件,https://ext.dcloud.net.cn/plugin?id=18718, 按照里面的readme教程完成接入,**为了让后来者少走弯路,将接入过程以及原理记录到本文中,欢迎大家评论讨论。最终实现的效果如下:
1 配置准备
先加入在DCloud插件市场中加入两个插件, 分别点击如下两个链接:
- 即构RTC接入相芯美颜插件
- 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 =
以上各个配置参数通过如下途径获取:
- appID:打开即构后台管理https://console.zego.im/dashboard,可以得到appID, 形如123456789。
- userID:随意定义的字符串,作为当前登录用户的id
- appSign:旧的鉴权方式需要使用,建议参考https://doc-zh.zego.im/faq/token_upgrade 切换到最新的鉴权。用户可以从https://console.zego.im/dashboard 获取appSign,注意以后不再提供appSign支持。
- token:最新的鉴权方案,参考这里https://doc-zh.zego.im/faq/token_upgrade
- 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() {@Overridepublic void onStart(ZegoPublishChannel channel) {effects.initEnv(720, 1280);}// 一定要反初始化,否则会造成内存泄露@Overridepublic void onStop(ZegoPublishChannel channel) {effects.uninitEnv(); }// 回调方法获取原始数据 texture@Overridepublic 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 SDKint 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