Pushing 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 one stream and output it to third-party platforms, such as WeChat, Video Account, etc., to achieve better dissemination and marketing effects.

Whiteboard is a high-frequency function used 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, whiteboard and real-time audio and video synchronization, and other capabilities.

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

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

Prerequisites

Before implementing the whiteboard mixing feature, please ensure:

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

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

• You have integrated ZegoSuperBoard SDK in your project to implement whiteboard-related functions.

Implementation Process

1 Initialize and Login to Room

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

2 Set Stream Mixing Configuration

In Express SDK, define the stream mixing task configuration object through ZegoMixerTask, which includes information such as input stream layout, output stream, and ZEGO super whiteboard configuration.

Create Stream Mixing Task Object

For specific procedures, please refer to Create Stream Mixing Task Object in the stream mixing document.

Set Stream Mixing Input Stream

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

Set Stream Mixing Output

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

Set Stream Mixing Whiteboard Configuration

Call the ZegoMixerTask > whiteboard interface to mix ZEGO super whiteboard content into the stream mixing: 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 the whiteboard in the Prerequisites of this article.

Taking the whiteboard layout placed in the upper left corner of the screen as an example:

ZegoMixerWhiteboard whiteboard = ZegoMixerWhiteboard.defaultConfig();

// ZEGO super whiteboard ID, which is the ID returned when integrating ZegoSuperBoard SDK and creating the whiteboard in the prerequisites of this article
whiteboard.whiteboardID = 0;

// ZEGO super whiteboard view layout
whiteboard.layout.left = 0;
whiteboard.layout.top = 0;
whiteboard.layout.right = 100;
whiteboard.layout.bottom = 100;

// Whether ZEGO super whiteboard supports loading dynamic PPT
whiteboard.isPPTAnimation = true;

if (whiteboard != null) {
    mMixerTask.whiteboard = whiteboard;
}

ZegoMixerWhiteboard whiteboard = ZegoMixerWhiteboard.defaultConfig();

// ZEGO super whiteboard ID, which is the ID returned when integrating ZegoSuperBoard SDK and creating the whiteboard in the prerequisites of this article
whiteboard.whiteboardID = 0;

// ZEGO super whiteboard view layout
whiteboard.layout.left = 0;
whiteboard.layout.top = 0;
whiteboard.layout.right = 100;
whiteboard.layout.bottom = 100;

// Whether ZEGO super whiteboard supports loading dynamic PPT
whiteboard.isPPTAnimation = true;

if (whiteboard != null) {
    mMixerTask.whiteboard = whiteboard;
}

3 Start Stream Mixing Task

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

4 Update Stream Mixing Task Configuration

Express SDK supports updating the whiteboard configuration in the stream mixing task. For example, when you need to switch the ZEGO super whiteboard instance to be mixed or no longer mix 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 Update Stream Mixing Task Configuration in the stream mixing document.

Taking the example of no longer mixing ZEGO super whiteboard content into the stream mixing:

// Reset stream mixing task whiteboard configuration information
mMixerTask.whiteboard = ZegoMixerWhiteboard.defaultConfig();

// Call the start stream mixing task interface again to update the stream mixing configuration
engine.startMixerTask(mMixerTask);

// Reset stream mixing task whiteboard configuration information
mMixerTask.whiteboard = ZegoMixerWhiteboard.defaultConfig();

// Call the start stream mixing task interface again to update the stream mixing configuration
engine.startMixerTask(mMixerTask);

5 Stop Stream Mixing

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

FAQ

1. Why is there no whiteboard video in the stream mixing result even though ZEGO super whiteboard is specified in the stream mixing task?

Please confirm whether the value of the whiteboardID member in the stream mixing task whiteboard configuration is the ZEGO super whiteboard ID you want to mix into the stream mixing.

2. Why is there no corresponding animation in the whiteboard video in the stream mixing result even though a PPT file with animation effects is loaded in ZEGO super whiteboard?

Please confirm whether the value of the isPPTAnimation member in the stream mixing task whiteboard configuration is true.

3. Can I not display the speaker's camera video?

Yes, but at least one audio stream is required. Otherwise, whiteboard mixing cannot be initiated.