将白板推送到第三方平台

功能简介

本文主要讲述如何利用 ZEGO Express SDK 的混流功能，将音视频流和 ZegoSuperBoard 内容合并成一路流，输出到第三方平台，例如微信、视频号等，从而达到更好的传播和营销效果。

白板是教育、培训和娱乐场景高频使用的功能，ZegoSuperBoard 可以与 Express SDK 结合使用，提供完整的多人实时白板互动协同服务，包括：白板涂鸦、实时轨迹同步、白板与实时音视频同步等多种能力。

许多活动，为了扩大传播效果，希望主讲人的画面、语音和白板内容，能在第三方平台，例如微信、视频号、抖音等播放，但要求主讲端和播放端同时集成了 ZEGO Express 和 ZegoSuperBoard 才可以实现实时白板互动协同服务，实现方式复杂。

当前 ZEGO 通过混流功能，将主讲人的音视频流与白板相关操作在 ZEGO 服务端合成一路，再输出到第三方平台，实现第三方平台无需集成 ZEGO Express 和 ZegoSuperBoard，即可在第三方平台同时接收主讲人画面、语音和白板内容的效果。

前提条件

在实现白板混流功能之前，请确保：

• 已在 ZEGO 控制台 创建项目，并申请有效的 AppID 和 Server 地址，详情请参考 控制台 - 项目信息。

• 已在项目中集成 ZEGO Express SDK，并实现了基本的音视频推拉流功能，详情请参考 快速开始 - 集成 和 快速开始 - 实现流程。

• 已在项目中集成 ZegoSuperBoard SDK，实现白板相关功能，详情请参考 创建超级白板。

实现流程

1 初始化并登录房间

具体流程请参考“实现视频通话”文档的 初始化 和 登录房间 章节完成初始化并登录房间。

2 设置混流配置

在 Express SDK 中，通过定义混流任务配置对象，其中包含输入流布局、输出流和 ZEGO 超级白板配置等信息。

设置混流输入流

具体流程请参考混流文档的 设置混流输入流 进行设置。

设置混流输出

具体流程请参考混流文档的 设置混流输出 进行设置。

设置混流白板配置

在开始混流接口中，填入 ZEGO 超级白板的内容：需填入 whiteboardID 白板 ID 等参数，即本文 前提条件 中，集成 ZegoSuperBoard SDK 并创建白板时返回的 ID 等信息。

3 开始混流任务

具体流程请参考混流文档的 开始混流 章节。

以白板布局放置于画面右下角为例：

const taskID = "task-" + new Date().getTime();
const mixStreamID = "mixwebrtc-" + new Date().getTime();
const publishStreamId = "webrtc-" + new Date().getTime();

try {
  const res = await zg.startMixerTask({
    taskID,
    inputList: [
      {
        streamID: publishStreamId,
        layout: { top: 0, left: 0, bottom: 100, right: 100, layer: 1 }
      }
    ],
    outputList: [mixStreamID],
    outputConfig: {
      outputBitrate: 300,
      outputFPS: 15,
      outputWidth: 200,
      outputHeight: 200
    },
    whiteboard: {
      // ZEGO 超级白板 ID，即本文前提条件中，集成 ZegoSuperBoard SDK 并创建白板时返回的 ID
      whiteboardID: "1860061860",
      layout: {
        top: 0,
        left: 0,
        bottom: 100,
        right: 100
      },
      horizontalRatio: 16,
      verticalRatio: 9,
      isPPTAnimation: false,
      zOrder: 0,
      backgroundColor: 0x87cefa00
    }
  });
} catch (error) {
  console.error("startMixerTask", error);
}

const taskID = "task-" + new Date().getTime();
const mixStreamID = "mixwebrtc-" + new Date().getTime();
const publishStreamId = "webrtc-" + new Date().getTime();

try {
  const res = await zg.startMixerTask({
    taskID,
    inputList: [
      {
        streamID: publishStreamId,
        layout: { top: 0, left: 0, bottom: 100, right: 100, layer: 1 }
      }
    ],
    outputList: [mixStreamID],
    outputConfig: {
      outputBitrate: 300,
      outputFPS: 15,
      outputWidth: 200,
      outputHeight: 200
    },
    whiteboard: {
      // ZEGO 超级白板 ID，即本文前提条件中，集成 ZegoSuperBoard SDK 并创建白板时返回的 ID
      whiteboardID: "1860061860",
      layout: {
        top: 0,
        left: 0,
        bottom: 100,
        right: 100
      },
      horizontalRatio: 16,
      verticalRatio: 9,
      isPPTAnimation: false,
      zOrder: 0,
      backgroundColor: 0x87cefa00
    }
  });
} catch (error) {
  console.error("startMixerTask", error);
}

4 更新混流任务配置

Express SDK 支持更新混流任务中的白板配置，例如，需要切换要混入的 ZEGO 超级白板实例或不再混入 ZEGO 超级白板时，可通过调用 startMixerTask 接口更新配置。如需更新混流任务的其它配置，请参考混流文档中的 4 更新混流任务的配置。

5 停止混流

具体流程请参考混流文档的 停止混流。

常见问题