使用本地导播

---

功能简介

随着实时互动的发展，视频互动已经不局限于单一摄像头画面。屏幕共享画面、多路摄像头画面、趣味挂件、产品信息等已经成为越来越多的直播间或者用户需要展示的内容。

ZEGO 推出的本地导播插件，支持在本地对画面和声音进行混合，将多路音视频流或页面元素、合并为一路音视频流后推流，助力开发者实现更丰富的场景。

效果演示

功能试用

适用场景

• 在线教育
• 在线会议
• 直播带货
• 游戏直播
• 秀场直播

兼容性说明

• 桌面端：支持 Chrome 94 或以上版本、Edge 94 或以上版本。为了获得最佳体验，推荐您使用 Chrome 或 Edge 最新版本的浏览器。
• 不推荐在移动端使用本地导播插件。

前提条件

在实现本地导播功能之前，请确保：

• 已在 ZEGO 控制台 创建项目，并申请有效的 AppID 和 Server 地址，详情请参考 控制台 - 项目信息。
• 已在项目中集成 ZEGO Express SDK，并实现了基本的音视频推拉流功能，详情请参考 快速开始 - 集成 和 快速开始 - 实现流程。

实现步骤

1 集成本地导播插件

开发者可通过以下任意一种方式集成本地导播插件。

方式 1：使用 npm 方式集成

找到您项目目录下的 “index.js” 文件，添加如下代码，引入本地导播插件包。

import { ZegoExpressEngine } from'zego-express-engine-webrtc';
import { StreamCompositor } from'zego-express-engine-webrtc/stream-compositor';

ZegoExpressEngine.use(StreamCompositor);

方式 2：手动集成

在 下载 页面获取最新的包，解压后的文件中包含了本地导播插件包。找到您项目目录下的 “index.html” 文件，添加如下代码，手动集成本地导播插件包。

<script src="./stream-compositor-XXX.js"></script>
<script src="./ZegoExpressWebRTC-XXX.js"></script>
<script>
        ZegoExpressEngine.use(StreamCompositor);
        ...
</script>

2 创建本地导播插件处理实例

创建并初始化一个 ZegoExpressEngine 实例，然后调用 createStreamCompositor 接口，创建本地导播插件处理实例。

// 初始化实例，appID 及 server 请在控制台获取
const zg = new ZegoExpressEngine(appID, server);
const compositor = zg.createStreamCompositor();

3 创建本地数据流

调用 createZegoStream 接口，传入不同的参数，分别创建摄像头、屏幕共享的本地数据流。

const cameraStream = await zg.createZegoStream();
const screenStream = await zg.createZegoStream({ screen: { video: true } });

4 （可选）设置摄像头流背景透明

如果您想要将摄像头采集的人像外的视频流背景设置为透明，实现人像画中画、演讲者模式、以及沉浸式直播带货，则需要再引入 背景处理模块。

1. 联系 ZEGO 技术支持，开通相关权限。
2. 找到您项目目录下的 “index.js” 文件，添加如下代码，引入背景处理模块。

import { BackgroundProcess } from'zego-express-engine-webrtc/background-process';
// 引用背景处理模块
ZegoExpressEngine.use(BackgroundProcess);

3. 调用 setTransparentBackgroundOptions 接口，设置摄像头流采集的带人像画面背景的透明效果；再调用 enableBackgroundProcess 接口，开启背景处理。

zg.setTransparentBackgroundOptions(cameraStream);
await zg.enableBackgroundProcess(cameraStream, true, 0);

5 设置输入流图层

调用 setInputEndpoint 接口，设置输入流的布局效果、渲染模式、层级等。

compositor.setInputEndpoint(screenStream, {
    layout: { x: 0, y: 0, width: 1280, height: 720, zOrder: 0 }
});

compositor.setInputEndpoint(cameraStream, {
    layout: { x: 0, y: 0, width: 320, height: 180, zOrder: 1 }
});

6 创建图片输入图层

调用 addImage 接口，设置图片图层的位置。

const img = document.getElementById("backImg");

compositor.addImage(img, {
    x: 0,
    y: 540,
    width: 320,
    height: 180,
    zOrder: 1
});

7 设置输出参数和布局

调用 setOutputConfig 接口，设置输出流的宽、高、帧率等。

const width = 1280, height = 720;

compositor.setOutputConfig({
    width: width,
    height: height,
    framerate: 15
});

8 开始混合媒体流

调用 startComposingStream 接口，开始混合媒体流。

// 输出视频流 mediaStream
const outputStream = await compositor.startComposingStream();

9 停止混合媒体流

调用 stopComposingStream 接口，停止混合媒体流；再调用 destroyStream 销毁流数据，释放资源。

await compositor.stopComposingStream();
zg.destroyStream(cameraStream);
zg.destroyStream(screenStream);