【iOS端】基于Uniapp跨平台接入即构RTC+相芯美颜

Uniapp最大优势是跨平台，前面介绍了如何在android中接入相芯美颜+即构RTC，今天咱们把相同的代码接入到iOS中

RTC_程序猿_wang

1331人浏览 · 2024-08-27 18:15:12

RTC_程序猿_wang · 2024-08-27 18:15:12 发布

0 Uniapp平台接入完成iOS端的即构RTC+相芯美颜

Uniapp最大优势是跨平台，前面介绍了如何在android中接入相芯美颜+即构RTC，今天咱们把相同的代码接入到iOS中。按照惯例我们先看最终效果，欢迎大家评论讨论：

在这里插入图片描述

1 开发配置准备

iOS开发因为打包签名等收到限制，因此比较推荐在本地Mac上编译底座。

首先前往以下两个地址

点击下载示例项目ZIP：

在这里插入图片描述

接下来前往DCloud官网下载打包底座SDK项目：https://nativesupport.dcloud.net.cn/NativePlugin/course/ios.html，根据官方提示下载到SDK，找到HBuilder-Hello项目。

从下载到的示例项目中分别找到native库：

zgrtc_fubeauty.framework
ZegoExpressEngine.framework
ZegoExpressUniAppSDK.framework

将以上3个库加入到HBuilder-Hello依赖中，注意项目的Build Phases > Embed Frameworks中也要加入以上三个库，确保底座中包含这三个库。

如果读者对环境配置感觉到困难，可以联系作者本人获取完整的源码。

2 代码开发-即构RTC代码

本文基于即构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：由相芯对接工作人员提供授权码数组，直接复制过来：

static char authPackage[] = [-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函数，传入实现了ZegoCustomVideoProcessHandler协议的对象，该对象里面onCapturedUnprocessedCVPixelBuffer:函数自定义图像处理，并且通过ZegoExpressEngine对象的sendCustomVideoProcessedCVPixelBuffer函数将处理后的结果告知ZegoExpressEngine。参考示例如下：

-(void) onCapturedUnprocessedCVPixelBuffer:(CVPixelBufferRef)buffer timestamp:(CMTime)timestamp channel:(ZegoPublishChannel)channel{
    
    if(_handler!=nil){
        buffer= [_handler onVideoFrame:buffer];
    }
    [[ZegoExpressEngine sharedEngine] sendCustomVideoProcessedCVPixelBuffer:buffer timestamp:timestamp channel:channel];
}

启用/关闭自定义图像处理：

-(void) enableCustomVideoProc {
    ZegoCustomVideoProcessConfig *processConfig = [[ZegoCustomVideoProcessConfig alloc] init];
    processConfig.bufferType = ZegoVideoBufferTypeCVPixelBuffer;
    [[ZegoExpressEngine sharedEngine] enableCustomVideoProcessing:YES config:processConfig];
    [[ZegoExpressEngine sharedEngine] setCustomVideoProcessHandler:self];
//    [[ZegoExpressEngine sharedEngine] useFrontCamera:NO];
}
-(void) disableCustomVideoProc{
    
    [[ZegoExpressEngine sharedEngine] enableCustomVideoProcessing:NO config:nil];
}

可以看到，即构RTC的自定义图像处理非常简单。本文以相芯美颜作为示例接入即构RTC，除此之外，像一些开源的图像处理算法都可以通过这种方式接入到即构RTC，给自己的App增加更多趣味性。

4 即构RTC+相芯美颜 Demo 相关开发文档

本文基于XCode编译HBuilder底座，将自定义代码（即构RTC+相芯美颜）打包到基座中。使得在界面渲染层中的js代码可以调用相关功能。另外，主要参考了DCloud中即构RTC接入相芯美颜插件的示例工程，里面提供了调用细节代码，读者可以多多挖掘，尤其是components/Zego-FUBeautyWrapper里的Uniapp调用封装，可以拿来借鉴相关思路扩展到其他类似项目中。

最后附上本文参考的相关资料：