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

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

在这里插入图片描述

1 开发配置准备

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

首先前往以下两个地址

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

点击下载示例项目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 = 

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

  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:由相芯对接工作人员提供授权码数组,直接复制过来:
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调用封装,可以拿来借鉴相关思路扩展到其他类似项目中。

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

点赞(0) 打赏

评论列表 共有 0 条评论

暂无评论

微信公众账号

微信扫一扫加关注

发表
评论
返回
顶部