自定义美颜相关功能
本文将为您介绍如何自定义美颜效果及 UI 样式,及如何管理美颜相关资源。
前提条件
在使用自定义美颜功能前,需保证已 集成进阶美颜效果。
自定义美颜效果
当前美颜效果包支持两种类型:基础版和专业版。
- 基础版:仅包括基本美颜效果。
- 专业版:包括面部美化、面部塑形、面部特征增强、美妆样式、贴纸和滤镜等其他功能。更多详情,请参考 AI 美颜 相关文档。
要自定义美颜效果,请在 ZegoUIKitPrebuiltLiveStreamingConfig
中配置 beautyConfig
。
美颜效果
美颜效果包括 4 个功能:基础美颜效果、高级美颜效果(面部塑形)、面部特征增强和美妆样式。您可以启用所有四个功能,或者只选择其中几个。
基础版只包括基础美颜效果,如果您需要其他功能,请选择专业版。
示例 1:选择基础美颜效果和高级美颜效果
ZegoUIKitPrebuiltLiveStreamingConfig config;
// ...
List<ZegoBeautyPluginEffectsType> customTypes = new ArrayList<>();
customTypes.addAll(ZegoBeautyPluginConfig.basicTypes());
customTypes.addAll(ZegoBeautyPluginConfig.advancedTypes());
config.beautyConfig.effectsTypes = customTypes;
//...
显示效果如下:
示例 2:选择所有四个功能
ZegoUIKitPrebuiltLiveStreamingConfig config;
// ...
List<ZegoBeautyPluginEffectsType> customTypes = new ArrayList<>();
customTypes.addAll(ZegoBeautyPluginConfig.basicTypes());
customTypes.addAll(ZegoBeautyPluginConfig.advancedTypes());
customTypes.addAll(ZegoBeautyPluginConfig.makeupTypes());
customTypes.addAll(ZegoBeautyPluginConfig.styleMakeupTypes());
config.beautyConfig.effectsTypes = customTypes;
//...
显示效果如下:
滤镜
滤镜包括共 10 种不同的滤镜效果,您可以使用以下代码进行设置:
ZegoUIKitPrebuiltLiveStreamingConfig config;
// ...
List<ZegoBeautyPluginEffectsType> customTypes = new ArrayList<>();
customTypes.addAll(ZegoBeautyPluginConfig.basicTypes());
customTypes.addAll(ZegoBeautyPluginConfig.advancedTypes());
customTypes.addAll(ZegoBeautyPluginConfig.makeupTypes());
customTypes.addAll(ZegoBeautyPluginConfig.styleMakeupTypes());
customTypes.addAll(ZegoBeautyPluginConfig.filterTypes());
config.beautyConfig.effectsTypes = customTypes;
//...
显示效果如下:
贴纸
贴纸功能需要相对较多的资源,您可以根据需要选择是否集成贴纸功能,详情可参考如下代码。
ZegoUIKitPrebuiltLiveStreamingConfig config;
// ...
List<ZegoBeautyPluginEffectsType> customTypes = new ArrayList<>();
customTypes.addAll(ZegoBeautyPluginConfig.basicTypes());
customTypes.addAll(ZegoBeautyPluginConfig.advancedTypes());
customTypes.addAll(ZegoBeautyPluginConfig.makeupTypes());
customTypes.addAll(ZegoBeautyPluginConfig.styleMakeupTypes());
customTypes.addAll(ZegoBeautyPluginConfig.filterTypes());
customTypes.addAll(ZegoBeautyPluginConfig.stickerTypes());
config.beautyConfig.effectsTypes = customTypes;
//...
显示效果如下:
背景分割
如需集成背景分割功能,可参考如下代码:
ZegoUIKitPrebuiltLiveStreamingConfig config;
// ...
List<ZegoBeautyPluginEffectsType> customTypes = new ArrayList<>();
customTypes.addAll(ZegoBeautyPluginConfig.basicTypes());
customTypes.addAll(ZegoBeautyPluginConfig.advancedTypes());
customTypes.addAll(ZegoBeautyPluginConfig.makeupTypes());
customTypes.addAll(ZegoBeautyPluginConfig.styleMakeupTypes());
customTypes.addAll(ZegoBeautyPluginConfig.filterTypes());
customTypes.addAll(ZegoBeautyPluginConfig.stickerTypes());
customTypes.addAll(ZegoBeautyPluginConfig.backgroundTypes());
config.beautyConfig.effectsTypes = customTypes;
//...
对于背景分割中的肖像分割,您需要提供一张背景图片。您可以将图片放入 BackgroundImages 文件夹中,并通过 config 进行设置。
BeautyResources/BackgroundImages/image1.jpg
您可以通过以下代码进行设置:
ZegoUIKitPrebuiltLiveStreamingConfig config;
// ...
List<ZegoBeautyPluginEffectsType> customTypes = new ArrayList<>();
customTypes.add(ZegoBeautyPluginEffectsType.FILTER_GRAY_FILMLIKE);
customTypes.add(ZegoBeautyPluginEffectsType.FILTER_DREAMY_COZILY);
config.beautyConfig.effectsTypes = customTypes;
//...
自定义 UI
在底部弹出的 BottomBar 支持自定义 UI,每部分内容都支持自定义 ,效果如下。
自定义文本
如需自定义与高级美颜效果特性相关的文本,可以使用 ZegoBeautyPluginInnerText
,详情请参考如下代码:
ZegoUIKitPrebuiltLiveStreamingConfig config;
// ...
config.beautyConfig.innerText.titleFilter = "滤镜";
config.beautyConfig.innerText.beautyBasicSmoothing = "磨皮";
config.beautyConfig.innerText.beautyMakeupLipstick = "口红";
//...
自定义背景颜色
如需自定义视图的背景颜色,请参考如下代码:
ZegoUIKitPrebuiltLiveStreamingConfig config;
// ...
config.beautyConfig.uiConfig.backgroundColor = Color.RED;
//...
自定义文本颜色
如需自定义文本颜色,请参考如下代码:
ZegoUIKitPrebuiltLiveStreamingConfig config;
// ...
config.beautyConfig.uiConfig.selectedHeaderTitleTextColor = Color.GREEN;
config.beautyConfig.uiConfig.selectedTextColor = Color.CYAN;
//...
自定义返回按钮图标
如需自定义返回按钮图标,请参考如下代码:
ZegoUIKitPrebuiltLiveStreamingConfig config;
// ...
config.beautyConfig.uiConfig.backIcon = getDrawable(R.drawable.custom_back_icon);
//...
资源管理
上述的下载资源,包含所有特性的资源。但如果您不需要所有特性,您可以删除一些不必要的资源以减小应用包的大小。
资源描述
-
必要资源(必要的所有特性,不能删除)
UntitledBeautyResources/CommonResources.bundle BeautyResources/FaceDetection.model
1 -
贴纸的必要资源(如果您需要使用贴纸特性,则不能删除)
UntitledBeautyResources/StickerBaseResources.bundle
1 -
背景分割的必要资源(如果您需要使用背景分割特性,则不能删除)
UntitledBeautyResources/BackgroundSegmentation.model
1 -
特性资源文件夹
特性资源文件夹中的每个资源,都对应一个特定的特性。如果您需要使用某个特性,则需要保留相应的资源文件夹,否则,您可以删除它。UntitledBeautyResources/AdvancedResources
1
详细的特性资源
监听 BeautyPlugin 事件
您可以通过 config.beautyConfig.beautyEventHandler
监听 BeautyPlugin 事件,如果您在 config.beautyConfig
中启用了 faceDetection,可以在 onFaceDetectionResult
中接收面部检测数据。
请特别注意 onInitResult
回调,如果初始化失败,美颜功能将无法使用,主要原因如下:
- 当前应用的 ApplicationID 和 AppID 与注册的 ApplicationID 和 AppID 不一致。
- 或 License 许可证已过期,请联系 ZEGO 技术支持处理。
ZegoUIKitPrebuiltLiveStreamingConfig config;
// ...
config.beautyConfig.beautyEventHandler = new IBeautyEventHandler() {
@Override
public void onInitResult(int errorCode, String message) {
super.onInitResult(errorCode, message);
Log.d(TAG, "onInitResult() called with: errorCode = [" + errorCode + "], message = [" + message + "]");
}
@Override
public void onError(int errorCode, String message) {
super.onError(errorCode, message);
Log.d(TAG, "onError() called with: errorCode = [" + errorCode + "], message = [" + message + "]");
}
@Override
public void onFaceDetectionResult(ZegoBeautyPluginFaceDetectionResult[] results) {
super.onFaceDetectionResult(results);
Log.d(TAG, "onFaceDetectionResult() called with: results = [" + results + "]");
}
};
//...