文档中心
ExpressVideoSDK 实时音视频
文档中心
体验 App
SDK 中心
API 中心
常见问题
代码市场
进入控制台
立即注册
登录
中文站 English
  • 文档中心
  • 实时音视频
  • 直播能力
  • 使用本地导播

使用本地导播

更新时间:2025-03-19 11:35

功能简介

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

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);
  1. 调用 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 }
});

图层参数 zOrder 的数值越大,图层越靠上。

6 创建图片输入图层

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

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

compositor.addImage(img, {
    x: 0,
    y: 540,
    width: 320,
    height: 180,
    zOrder: 1
});
  • 由于受浏览器安全策略影响,图片资源如果不在同一个域下,服务器需开启跨越访问权限。您需要设置 HTMLImageElement 的 crossOrigin 属性为 'anonymous'。
  • 图片加载需要时间,您需要在图片加载完成(onload 事件)后,再调用 addImage 接口。

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);
本篇目录
  • 免费试用
  • 提交工单
    咨询集成、功能及报价等问题
    电话咨询
    400 1006 604
    咨询客服
    微信扫码,24h在线

    联系我们

  • 文档反馈