本文展示如何在 Agora SDK 中实现相芯美颜道具高级版本插件。

技术原理

接口的调用顺序如下：

Android

添加插件：在初始化 RtcEngine 时调用 addExtension，将插件添加到 SDK 中。
开启插件：在加入频道前，调用 enableExtension 开启插件。此时要注意将相芯的鉴权证书authpack.json 放在 assets/FaceUnity 文件夹下，在开启插件的同时会对相芯的功能进行鉴权。
对插件进行参数设置：在自定义特定格式的 json 中，对参数进行改变并调用 setExtensionProperty可以改变美颜滤镜或道具的效果。

iOS

开启插件：在加入频道前，调用 enableExtensionWithVendor 开启插件。此时要注意将相芯的鉴权证书authpack.json 放在项目文件夹下，在开启插件的同时会对相芯的功能进行鉴权。
对插件进行参数设置：在自定义特定格式的 json 中，对参数进行改变并调用 setExtensionPropertyWithVendor可以改变美颜滤镜或道具的效果。

前提条件

开始之前，你需要：

实现相芯高级美颜版本插件

实现相芯高级美颜版本插件分为4个步骤：

初始化。
设置回调参数。
配置视频参数并显示视频。
设置相芯美颜道具高级版插件参数。

下面分别提供 Android 和 iOS 两个平台的示例代码：

Android

初始化

相芯的鉴权证书需要放到 assets 的 FaceUnity 文件夹下，以下为示例代码，在 MainActivity.java 中的initAgoraEngine 方法中可以查到：

RtcEngineConfig config = new RtcEngineConfig();
config.mContext = this;
config.mAppId = "填写唯一appid";
config.addExtension(ExtensionManager.EXTENSION_NAME);
mRtcEngine = RtcEngine.create(config);
mFuJsonHelper.setRtcEngine(mRtcEngine);
File assetsDir = new File(ExtensionManager.getBaseDir(this), ExtensionManager.RESOURCE);
if (!new File(assetsDir.getAbsolutePath() + File.separator + "authpack.json").exists()) {
     throw new AndroidRuntimeException("需要相芯鉴权证书");
 }
mRtcEngine.enableExtension(ExtensionManager.VENDOR_NAME, ExtensionManager.FILTER_NAME, true);
 mRtcEngine.setExtensionProviderProperty(ExtensionManager.VENDOR_NAME, "AssetsPath", assetsDir.getAbsolutePath() + File.separator);

设置回调参数

回调位于 IMediaExtensionObserver 类 onEvent(String vendor, String extension, String key, String value) 方法的参数 value 内：

// 每次渲染都会回调参数
"resolution":{         //分辨率
"width":1920,
"height":1080
}
"frame":30             //帧率

    // 其他参数
"hand_num":1        //屏幕中手的数量 如果开启手势识别会返回

"gesture_type":0    //如果开启手势识别会返回

"face_num":1        //屏幕中人脸数量 如果开启表情识别或者表情识别或者人脸检测会返回

"expression_type":0    //表情 如果开启表情识别会返回

"roll":0.00°        //如果开启人脸检测别会返回

"pitch":0.00°        //如果开启人脸检测别会返回

"yaw":0.00°            //如果开启人脸检测别会返回

"body_num":1        //屏幕中人体数量 如果开启人体检测会返回

配置视频参数并显示视频

以下为示例代码，在 MainActivity 类中的 initAgoraEngine 和 setupLocalVideo 中可以查看到：

setupLocalVideo();

mRtcEngine.setChannelProfile(Constants.CHANNEL_PROFILE_LIVE_BROADCASTING);
mRtcEngine.setClientRole(Constants.CLIENT_ROLE_BROADCASTER);
mRtcEngine.enableLocalVideo(true);
mRtcEngine.enableVideo();
mRtcEngine.enableAudio();
Log.d(TAG, "api call join channel");
mRtcEngine.joinChannel("", "dengqm", "", 0);
RtcEngine.setVideoEncoderConfiguration(new VideoEncoderConfiguration(VideoEncoderConfiguration.VD_640x360,
VideoEncoderConfiguration.FRAME_RATE.FRAME_RATE_FPS_15, 0, VideoEncoderConfiguration.ORIENTATION_MODE.ORIENTATION_MODE_FIXED_PORTRAIT));
mRtcEngine.startPreview();

private void setupLocalVideo() {
 SurfaceView view = RtcEngine.CreateRendererView(this);
 view.setZOrderMediaOverlay(true);
 localVideoContainer.addView(view);
 mRtcEngine.setupLocalVideo(new VideoCanvas(view, VideoCanvas.RENDER_MODE_HIDDEN, 0));
     mRtcEngine.setLocalRenderMode(Constants.RENDER_MODE_HIDDEN);
 }

设置相芯美颜道具高级版插件参数

具体设置的参数是使用 json 的方式来实现，json 的参数说明如下：

// 屏幕长宽  
"screen":{ 
     "width":(float),
    "height":(float)
}

// bundle参数
"setParam":{ 
    "param":"rotationMode"(屏幕方向0-3)/"is_front_camera"(前后摄像头 1前置 0后置),
    "value":(int)
}

// 人脸检测
"FaceDetection":-1~0            //0:开启 -1:关闭

// 人体检测
"BodyDetection":-1~1            //0:半身关键点 1:全身关键点 -1:关闭

// 表情识别
"ExpressionRecognition":-1~0    //0:开启 -1:关闭

// 手势识别
"GestureRecognition":-1~0        //0:开启 -1:关闭

// 美肤
"beautyface":{  
   "skin":70,         //磨皮
   "white":30,        //美白
   "red":30,        //红润
   "lighteye":0,    //亮眼
   "sharpen":70,    //锐化
   "teeth":0,        //美牙
   "blackeye":0,    //去黑眼圈
   "ade":0             //去法令纹
}

// 美型
"beautyshape":{
    "thinface":40,            //瘦脸
    "bigeye":40,            //大眼
    "circleeye":0,            //圆眼
    "chin":30,                //下巴
    "forehead":30,            //额头
    "thinnose":50,            //瘦鼻
    "mouse":40,                //嘴型
    "vface":50,                //V脸
    "naface":0,                //窄脸
    "smallface":0,            //小脸
    "thincheekbone":0,        //瘦颧骨
    "thinmandible":0,        //瘦下颚骨
    "openeye":0,            //开眼角
    "eyedis":50,            //眼距
    "eyerid":50,            //眼睛角度
    "longnose":50,            //长鼻
    "shrinking":50,            //缩人中
    "smile":0                //微笑嘴角
}

// 滤镜
"filter":{
    "type":0~75,                //0表示取消滤镜 
    "level":0~100                //强度
}

// 贴纸
"stickers":-1~4                    //0~4 5种不同的贴纸 -1 取消贴纸

// 人像分割
"PortraitSegmentation":-1~7        //0:男友1 1:男友2 2:男友3 3:古风 4:音乐 5:西瓜 6:海边 7:现代 -1:取消

json 设置参数的具体使用方法如下：

mRtcEngine.setExtensionProperty(ExtensionManager.VENDOR_NAME, ExtensionManager.FILTER_NAME, "key", 这里填入json字符串);

iOS

初始化

初始化具体的代码可以在 AFUMainViewController.m 中的 initializeAgora 方法看到，示例代码如下：

AgoraRtcEngineConfig *config = [[AgoraRtcEngineConfig alloc] init];
config.appId = kAFUAgoraRtcEngineAppID;

// 注册视频信息、人脸检测、人体检测、表情识别、手势识别代理
config.eventDelegate = self;

self.agoraEngineKit = [AgoraRtcEngineKit sharedEngineWithConfig:config delegate:self];

[self.agoraEngineKit enableExtensionWithVendor:@"FaceUnity" extension:@"Beauty" enabled:YES];


#pragma mark - AgoraMediaFilterEventDelegate (self需要实现代理方法)
- (void)onEvent:(NSString * _Nullable)vendor extension:(NSString *)extension key:(NSString * _Nullable)key json_value:(NSString * _Nullable)json_value {}

设置回调参数

回调参数在 AgoraMediaFilterEventDelegate 中设置，具体参数说明如下：

// 每次渲染都会回调参数
"resolution":{         //分辨率
    "width":1920,
    "height":1080
}
"frame":30             //帧率

// 其他参数
"hand_num":1        //屏幕中手的数量 如果开启手势识别会返回

"gesture_type":0    //如果开启手势识别会返回

"face_num":1        //屏幕中人脸数量 如果开启表情识别或者表情识别或者人脸检测会返回

"expression_type":0    //表情 如果开启表情识别会返回

"roll":0.00°        //如果开启人脸检测别会返回

"pitch":0.00°        //如果开启人脸检测别会返回

"yaw":0.00°            //如果开启人脸检测别会返回

"body_num":1        //屏幕中人体数量 如果开启人体检测会返回

配置视频参数并显示视频

具体的代码可以在 AFUMainViewController.m 中的 setupVideo 方法看到，示例代码如下：

[self.agoraEngineKit setClientRole:AgoraClientRoleBroadcaster];
[self.agoraEngineKit enableVideo];

// 视频参数配置初始化
AgoraVideoEncoderConfiguration *config = [[AgoraVideoEncoderConfiguration alloc] initWithWidth:(NSInteger)CGRectGetWidth(self.videoView.frame)
                                                                                            height:(NSInteger)CGRectGetHeight(self.videoView.frame)
                                                                                         frameRate:AgoraVideoFrameRateFps15
                                                                                           bitrate:AgoraVideoBitrateStandard
                                                                                   orientationMode:AgoraVideoOutputOrientationModeAdaptative
                                                                                        mirrorMode:AgoraVideoMirrorModeAuto];
                                                                                       [self.agoraEngineKit setVideoEncoderConfiguration:config];

AgoraRtcVideoCanvas *videoCanvas = [[AgoraRtcVideoCanvas alloc] init];
videoCanvas.uid = 0;
// 设置视频视图为自定义视图
videoCanvas.view = self.videoView;
videoCanvas.renderMode = AgoraVideoRenderModeHidden;
[self.agoraEngineKit setupLocalVideo:videoCanvas];

// 显示视频
if ([self.agoraEngineKit startPreview] == 0) {}

设置相芯美颜道具高级版插件参数

与安卓版本相同，设置相芯美颜道具高级版插件参数也是通过对json进行设置；具体调用工具类AFUHelper中的setupParameters()方法设置参数，示例代码如下：

[self.agoraEngineKit setExtensionPropertyWithVendor:@"FaceUnity" extension:@"Beauty" key:@"key" value:dictionary];

#pragma mark - AFUUtility jsonStringOfObject()方法
+ (NSString *)jsonStringOfObject:(id)object {
    if (!object) {
        return nil;
    }
    NSData *jsonData = [NSJSONSerialization dataWithJSONObject:object options:NSJSONWritingPrettyPrinted error:nil];
    NSString *jsonString = [[NSString alloc] initWithData:jsonData encoding:NSUTF8StringEncoding];
    return jsonString;
}

json 的参数说明如下：

// 屏幕长宽  
"screen":{ 
     "width":(float),
    "height":(float)
}

// bundle参数
"setParam":{ 
    "param":"rotationMode"(屏幕方向0-3)/"is_front_camera"(前后摄像头 1前置 0后置),
    "value":(int)
}

// 人脸检测
"FaceDetection":-1~0            //0:开启 -1:关闭

// 人体检测
"BodyDetection":-1~1            //0:半身关键点 1:全身关键点 -1:关闭

// 表情识别
"ExpressionRecognition":-1~0    //0:开启 -1:关闭

// 手势识别
"GestureRecognition":-1~0        //0:开启 -1:关闭

// 美肤
"beautyface":{  
   "skin":70,         //磨皮
   "white":30,        //美白
   "red":30,        //红润
   "lighteye":0,    //亮眼
   "sharpen":70,    //锐化
   "teeth":0,        //美牙
   "blackeye":0,    //去黑眼圈
   "ade":0             //去法令纹
}

// 美型
"beautyshape":{
    "thinface":40,            //瘦脸
    "bigeye":40,            //大眼
    "circleeye":0,            //圆眼
    "chin":30,                //下巴
    "forehead":30,            //额头
    "thinnose":50,            //瘦鼻
    "mouse":40,                //嘴型
    "vface":50,                //V脸
    "naface":0,                //窄脸
    "smallface":0,            //小脸
    "thincheekbone":0,        //瘦颧骨
    "thinmandible":0,        //瘦下颚骨
    "openeye":0,            //开眼角
    "eyedis":50,            //眼距
    "eyerid":50,            //眼睛角度
    "longnose":50,            //长鼻
    "shrinking":50,            //缩人中
    "smile":0                //微笑嘴角
}

// 滤镜
"filter":{
    "type":0~75,                //0表示取消滤镜 
    "level":0~100                //强度
}

// 贴纸
"stickers":-1~4                    //0~4 5种不同的贴纸 -1 取消贴纸

// 人像分割
"PortraitSegmentation":-1~7        //0:男友1 1:男友2 2:男友3 3:古风 4:音乐 5:西瓜 6:海边 7:现代 -1:取消

预期效果

Android

连接一台 Android 设备。
在 Android Studio 中点击 Run app。运行成功后，项目会安装到你的 Android 设备上。
App 启动后，你可以在本地视图中看到美颜效果。

iOS

在终端中进入与 AgoraWithFaceUnity.xcodeproj 文件同级的目录。
在终端中输入 pod install，并等待 pod 将所需要的依赖包安装完成。
双击 pod 生成的 AgoraWithFaceUnity.xcworkspace，在 Xcode 中打开项目。
将 authpack.json 文件放入 Resources 文件夹下。
插入 iPhone手机，并在 Xcode 中选择此手机。
运行项目，运行成功后，app 会安装到你的 iPhone 设备上。
App 启动后，你可以在本地视图中看到美颜效果。