主体分割

2024-09-06

功能简介

主体分割是 Express SDK 提供的增值能力，通过 AI 算法识别视频画面中的内容，对每一个像素点设置透明度信息。其中，主体部分的像素点会被设置为“不透明”，主体部分之外的像素点会被设置为“透明”。开发者可以利用这些像素点的透明度信息，对画面中的主体和非主体部分做不同的处理，从而实现不同的功能。

注意

当前官网 SDK 不包含“主体分割”相关功能，如有需要，请联系 ZEGO 技术支持特殊编包，并提供您的 AppID，开通相关权限。
“主体分割”功能为付费功能，如需申请体验或咨询正式收费标准，请联系 ZEGO 商务人员。

主体分割对象

对身处不同环境的用户，ZEGO 提供“绿幕背景分割”和“任意背景分割”两种分割能力。

分割类型	绿幕背景分割	任意背景分割
能力描述	在用户自行架设了绿幕的情况下，可以将非绿幕区域的主体保留。适用于电商直播、在线考试等场景。	多数用户不具备架设绿幕的条件，可以通过 ZEGO 提供的任意背景分割能力，在没有绿幕的情况下，识别画面中的主体。适用于在线教育、视频会议等场景。
图示

分割类型

绿幕背景分割

任意背景分割

能力描述

在用户自行架设了绿幕的情况下，可以将非绿幕区域的主体保留。

适用于电商直播、在线考试等场景。

多数用户不具备架设绿幕的条件，可以通过 ZEGO 提供的任意背景分割能力，在没有绿幕的情况下，识别画面中的主体。

适用于在线教育、视频会议等场景。

图示

功能场景

基于主体分割能力，开发者可以实现背景虚化、虚拟背景、演讲模式、多人实时同台互动等业务场景，打造更多样的互动体验。

功能点	背景虚化	虚拟背景	背景透明	主体分割与传输
功能描述	将主体外的画面做模糊处理。	将主体外的画面替换为自定义的图片、颜色。	将主体的画面渲染在本端的其他视频内容上。例如在屏幕共享或正在播放的视频等内容上，实现演讲模式等功能。	结合 Express SDK 提供的 Alpha 通道数据传输能力，将画面中分割出的主体传输到拉流端，在拉流端做主体渲染，实现多人异地实时同处于一个场景中的视觉效果
图示

功能点

背景虚化

虚拟背景

背景透明

主体分割与传输

功能描述

将主体外的画面做模糊处理。

将主体外的画面替换为自定义的图片、颜色。

将主体的画面渲染在本端的其他视频内容上。

例如在屏幕共享或正在播放的视频等内容上，实现演讲模式等功能。

结合 Express SDK 提供的 Alpha 通道数据传输能力，将画面中分割出的主体传输到拉流端，在拉流端做主体渲染，实现多人异地实时同处于一个场景中的视觉效果

图示

硬件兼容性

平台	硬件要求
Android	骁龙芯片：骁龙 6 系列：骁龙 675 及以上骁龙 7 系列：骁龙 730 及以上骁龙 8 系列：骁龙 835 及以上海思麒麟芯片：麒麟 8 系列：麒麟 820 及以上麒麟 9 系列：麒麟 980 及以上联发科芯片： Helio P 系列：Helio P60 及以上天玑系列：天玑 820 及以上三星芯片：Exynos 1080 及以上
iOS	A 系列芯片：Apple A9 及以上，例如 iPhone 6s

请注意，ReactNative SDK 在以上平台中使用时，硬件兼容性同上。

前提条件

在使用主体分割功能前，请确保：

已联系 ZEGO 技术支持进行特殊编包。
已在 ZEGO 控制台创建项目，并申请有效的 AppID 和 AppSign，详情请参考控制台 - 项目信息。
已在项目中集成 ZEGO Express SDK，并实现了基本的音视频推拉流功能，详情请参考快速开始 - 集成和快速开始 - 实现流程。

实现流程

注意

开启主体分割功能会额外消耗系统资源，为了保证用户体验，目前仅支持对一路通道推流画面开启主体分割。
如果有经过自定义前处理第三方滤镜，需要确保第三方滤镜支持 Alpha 通道透传功能。

请注意，开发者可根据自己的业务场景需要，选择是否实现上图中的 （可选） 步骤。如需实现，请参考下文中的具体说明。

初始化和登录房间

初始化和登录房间的具体流程，请参考实现视频通话文档中的 “创建引擎”及“登录房间”。

监听主体分割状态回调

调用 videoObjectSegmentationStateChanged 接口，监听主体分割状态回调。

注意

主体分割的状态回调依赖于开启预览或者推流，即如需监听 videoObjectSegmentationStateChanged 回调，需要调用预览 startPreview 或推流 startPublishingStream。

ZegoExpressEngine.instance().on('videoObjectSegmentationStateChanged', (state, channel, errorCdoe) => {
    console.log("JS videoObjectSegmentationStateChanged: " + state + " channel: " + channel + " errorCode: " + errorCdoe);
})

ZegoExpressEngine.instance().on('videoObjectSegmentationStateChanged', (state, channel, errorCdoe) => {
    console.log("JS videoObjectSegmentationStateChanged: " + state + " channel: " + channel + " errorCode: " + errorCdoe);
})

使用主体分割实现不同的业务功能

注意

开发者如需更新主体分割类型、背景处理类型，需要修改 ZegoObjectSegmentationConfig 的配置，并再次调用 enableVideoObjectSegmentation 接口开启主体分割，即可更新主体分割效果；更新结果将通过 videoObjectSegmentationStateChanged 回调通知给开发者。

背景虚化

使用主体分割实现背景虚化

调用 enableVideoObjectSegmentation 接口，开启主体分割，并设置背景处理类型为“虚化”。

let config = new ZegoObjectSegmentationConfig();
config.objectSegmentationType = ZegoObjectSegmentationType.AnyBackground;//根据实际情况选择需要开启的主体分割类型
config.backgroundConfig.processType = ZegoBackgroundProcessType.Blur;//设置背景处理方式为虚化
config.backgroundConfig.blurLevel = ZegoBackgroundBlurLevel.Medium;//设置背景虚化级别为中
ZegoExpressEngine.instance().enableVideoObjectSegmentation(enable, config, ZegoPublishChannel.Main);//开启主体分割

let config = new ZegoObjectSegmentationConfig();
config.objectSegmentationType = ZegoObjectSegmentationType.AnyBackground;//根据实际情况选择需要开启的主体分割类型
config.backgroundConfig.processType = ZegoBackgroundProcessType.Blur;//设置背景处理方式为虚化
config.backgroundConfig.blurLevel = ZegoBackgroundBlurLevel.Medium;//设置背景虚化级别为中
ZegoExpressEngine.instance().enableVideoObjectSegmentation(enable, config, ZegoPublishChannel.Main);//开启主体分割

虚拟背景

使用主体分割实现虚拟背景

注意

开发者在使用本功能时，请注意自定义图片的宽高比，否则图片超出视图的部分会被裁减。
当前支持 “PNG” 与 “JPEG” 两种图片格式，即 “.png”、“.jpg”、“.jpeg” 三种后缀的图片文件。

调用 enableVideoObjectSegmentation 接口，开启主体分割，并设置背景处理类型为“图片”。

let config = new ZegoObjectSegmentationConfig();
config.objectSegmentationType = ZegoObjectSegmentationType.AnyBackground;//根据实际情况选择需要开启的主体分割类型
config.backgroundConfig.processType = ZegoBackgroundProcessType.Image;//设置背景处理方式为图片
config.backgroundConfig.imageURL = "<image_path>";//设置背景图片路径
ZegoExpressEngine.instance().enableVideoObjectSegmentation(enable, config, ZegoPublishChannel.Main);//开启主体分割

let config = new ZegoObjectSegmentationConfig();
config.objectSegmentationType = ZegoObjectSegmentationType.AnyBackground;//根据实际情况选择需要开启的主体分割类型
config.backgroundConfig.processType = ZegoBackgroundProcessType.Image;//设置背景处理方式为图片
config.backgroundConfig.imageURL = "<image_path>";//设置背景图片路径
ZegoExpressEngine.instance().enableVideoObjectSegmentation(enable, config, ZegoPublishChannel.Main);//开启主体分割

透明背景

使用主体分割实现透明背景

注意

如果开发者需要实现类似“演讲模式”的业务功能，需要在业务侧将“主体画面”与“要混合的视频源内容”混为一条视频流。

调用 enableVideoObjectSegmentation 接口，开启主体分割，并设置背景处理类型为“透明”。

let config = new ZegoObjectSegmentationConfig();
config.objectSegmentationType = ZegoObjectSegmentationType.AnyBackground;//根据实际情况选择需要开启的主体分割类型
config.backgroundConfig.processType = ZegoBackgroundProcessType.Transparent;//设置背景处理方式为透明
ZegoExpressEngine.instance().enableVideoObjectSegmentation(enable, config, ZegoPublishChannel.Main);//开启主体分割

let config = new ZegoObjectSegmentationConfig();
config.objectSegmentationType = ZegoObjectSegmentationType.AnyBackground;//根据实际情况选择需要开启的主体分割类型
config.backgroundConfig.processType = ZegoBackgroundProcessType.Transparent;//设置背景处理方式为透明
ZegoExpressEngine.instance().enableVideoObjectSegmentation(enable, config, ZegoPublishChannel.Main);//开启主体分割

（可选）使用 Alpha 通道传输分割出的主体

使用 Alpha 通道传输分割出的主体

如果推流端需要把分割后的主体画面通过 Alpha 通道传输到拉流端，在拉流端做主体渲染，需要先调用 enableAlphaChannelVideoEncoder 接口，设置编码器支持透明通道，然后调用 startPublishingStream 接口推流，使其顺利传输至拉流端。

注意

目前仅支持透明通道数据排列在 RGB 或 YUV 数据下方。

开启 Alpha 通道数据传输：

let layoutType = ZegoAlphaLayoutType.Bottom; // 透明通道数据排列在 RGB 或 YUV 数据下方
ZegoExpressEngine.instance().enableAlphaChannelVideoEncoder(true, layoutType, ZegoPublishChannel.Main); // 开启编码器支持透明通道

let layoutType = ZegoAlphaLayoutType.Bottom; // 透明通道数据排列在 RGB 或 YUV 数据下方
ZegoExpressEngine.instance().enableAlphaChannelVideoEncoder(true, layoutType, ZegoPublishChannel.Main); // 开启编码器支持透明通道

关闭 Alpha 通道数据传输：

let layoutType = ZegoAlphaLayoutType.Bottom; // 透明通道数据排列在 RGB 或 YUV 数据下方
ZegoExpressEngine.instance().enableAlphaChannelVideoEncoder(false, layoutType, ZegoPublishChannel.Main); // 关闭编码器支持透明通道

let layoutType = ZegoAlphaLayoutType.Bottom; // 透明通道数据排列在 RGB 或 YUV 数据下方
ZegoExpressEngine.instance().enableAlphaChannelVideoEncoder(false, layoutType, ZegoPublishChannel.Main); // 关闭编码器支持透明通道

开始预览和推流

通过 enableVideoObjectSegmentation 接口开启主体分割功能后，可以进行预览。

说明

开发者也可以先开启预览，再开启主体分割。本文以先开启主体分割，再进行预览为例进行介绍。

let view = {"reactTag": findNodeHandle(this.refs.zego_preview_view), "viewMode": 0, "backgroundColor": 0};
view.alphaBlend = true;//开启内部渲染 Alpha 混合，开启后支持分割后的主体与背景图层进行 Alpha 混合
ZegoExpressEngine.instance().startPreview(view);
ZegoExpressEngine.instance().startPublishingStream(streamID);

let view = {"reactTag": findNodeHandle(this.refs.zego_preview_view), "viewMode": 0, "backgroundColor": 0};
view.alphaBlend = true;//开启内部渲染 Alpha 混合，开启后支持分割后的主体与背景图层进行 Alpha 混合
ZegoExpressEngine.instance().startPreview(view);
ZegoExpressEngine.instance().startPublishingStream(streamID);

（可选）在拉流端设置 Alpha 通道渲染并拉流

在拉流端设置 Alpha 通道渲染，并开启拉流

注意

推流端开启了 Alpha 通道传输的情况下，才需要在拉流端开启 Alpha 通道渲染。

let view = {"reactTag": findNodeHandle(this.refs.zego_play_view), "viewMode": 0, "backgroundColor": 0};
view.alphaBlend = true;//开启内部渲染 Alpha 混合，开启后支持分割后的主体与背景图层进行 Alpha 混合
ZegoExpressEngine.instance().startPlayingStream(streamID, canvas);

let view = {"reactTag": findNodeHandle(this.refs.zego_play_view), "viewMode": 0, "backgroundColor": 0};
view.alphaBlend = true;//开启内部渲染 Alpha 混合，开启后支持分割后的主体与背景图层进行 Alpha 混合
ZegoExpressEngine.instance().startPlayingStream(streamID, canvas);

关闭主体分割

调用 enableVideoObjectSegmentation 接口，关闭主体分割。

let objectType = ZegoObjectSegmentationType.AnyBackground;//根据实际情况选择需要关闭的主体分割类型
ZegoExpressEngine.instance().enableVideoObjectSegmentation(false, objectType, ZegoPublishChannel.Main);//关闭主体分割

let objectType = ZegoObjectSegmentationType.AnyBackground;//根据实际情况选择需要关闭的主体分割类型
ZegoExpressEngine.instance().enableVideoObjectSegmentation(false, objectType, ZegoPublishChannel.Main);//关闭主体分割

销毁引擎

调用 destroyEngine 接口，销毁引擎。

ZegoExpressEngine.destroyEngine();

ZegoExpressEngine.destroyEngine();