Push Whiteboard to Third-party Platforms

Feature Overview

This article mainly describes how to use the stream mixing feature of ZEGO Express SDK to merge audio and video streams with ZegoSuperBoard content into a single stream and output it to third-party platforms, such as WeChat, Video Account, etc., to achieve better dissemination and marketing effects.

Whiteboard is a frequently used feature in education, training, and entertainment scenarios. ZegoSuperBoard can be used in combination with Express SDK to provide complete multi-user real-time whiteboard interactive collaboration services, including whiteboard graffiti, real-time trajectory synchronization, synchronization between whiteboard and real-time audio and video, and more.

Many events hope to display the presenter's video, voice, and whiteboard content on third-party platforms, such as WeChat, Video Account, TikTok, etc., to expand dissemination. However, this requires both the presenter and viewer to integrate ZEGO Express and ZegoSuperBoard to implement real-time whiteboard interactive collaboration services, which is complex to implement.

Currently, ZEGO uses the stream mixing feature to combine the presenter's audio and video streams with whiteboard-related operations on the ZEGO server, and then output to third-party platforms. This enables third-party platforms to receive the presenter's video, voice, and whiteboard content simultaneously without integrating ZEGO Express and ZegoSuperBoard.

Prerequisites

Before implementing the whiteboard stream mixing feature, please ensure:

• You have created a project in the ZEGOCLOUD Console and applied for a valid AppID and Server address. For details, please refer to Console - Project Information.

• You have integrated ZEGO Express SDK in your project and implemented basic audio and video stream publishing and playing functions. For details, please refer to Quick Start - Integration and Quick Start - Implementation.

• You have integrated ZegoSuperBoard SDK in your project and implemented whiteboard-related functions. For details, please refer to Create Super Whiteboard.

Implementation Flow

1 Initialize and Login to Room

For specific steps, please refer to the Initialization and Login to Room sections of the "Implementing Video Call" document to complete initialization and login to room.

2 Set Up Stream Mixing Configuration

In Express SDK, by defining a stream mixing task configuration object that includes input stream layout, output stream, and ZEGO super whiteboard configuration information.

Set Up Stream Mixing Input Streams

For specific steps, please refer to Set Up Stream Mixing Input Streams in the stream mixing document.

Set Up Stream Mixing Output

For specific steps, please refer to Set Up Stream Mixing Output in the stream mixing document.

Set Up Stream Mixing Whiteboard Configuration

In the start stream mixing interface, fill in the ZEGO super whiteboard content: you need to fill in parameters such as whiteboardID (whiteboard ID), which is the ID and other information returned when integrating ZegoSuperBoard SDK and creating a whiteboard in the Prerequisites of this article.

3 Start Stream Mixing Task

For specific steps, please refer to the Start Stream Mixing section of the stream mixing document.

Taking the whiteboard layout placed in the bottom right corner as an example:

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 super whiteboard ID, which is the ID returned when integrating ZegoSuperBoard SDK and creating a whiteboard in the prerequisites of this article
      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 super whiteboard ID, which is the ID returned when integrating ZegoSuperBoard SDK and creating a whiteboard in the prerequisites of this article
      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 Update Stream Mixing Task Configuration

Express SDK supports updating the whiteboard configuration in stream mixing tasks. For example, when you need to switch to a different ZEGO super whiteboard instance or stop mixing the ZEGO super whiteboard, you can update the configuration by calling the startMixerTask interface. For updating other configurations of the stream mixing task, please refer to 4 Update Stream Mixing Task Configuration in the stream mixing document.

5 Stop Stream Mixing

For specific steps, please refer to Stop Stream Mixing in the stream mixing document.

FAQ