Publish Multiple Streams Simultaneously

Feature Overview

Express SDK provides the ability to publish multiple streams simultaneously, which is generally used in game live streaming scenarios. Game streamers publish the camera feed on the main stream, and publish the screen Capture feed on the second stream.

Example Source Code Download

Please refer to Download Example Source Code to get the source code.

For related source code, please check files in the "src/Examples/AdvancedStreaming/PublishingMultipleStreams" directory.

Prerequisites

Before implementing the multi-stream publishing functionality, please ensure:

• A project has been created in ZEGOCLOUD Console, and valid AppID and Server address have been obtained. For details, please refer to Console - Project Information.
• ZEGOCLOUD Express SDK has been integrated into the project, and basic audio/video streaming functionality has been implemented. For details, please refer to Quick Start - Integration and Quick Start - Implementation.

Usage Steps

Publish Camera Feed

Call the createZegoStream interface, set the "camera" attribute to create the publishing stream data source, and call the startPublishingStream interface to push the local stream to the remote end (ZEGOCLOUD server).

// Creating a stream is an asynchronous process. Wait for Promise to complete and return the media stream object.
const stream = await zg.createZegoStream({camera: {video: true, audio: true}});

// Preview the stream before or during publishing, and mount the playback component to the page component container DOM element.
stream.playVideo(document.querySelector("#local-video"));

const result = zg.startPublishingStream(publishStreamId, stream, publishOption);

// Creating a stream is an asynchronous process. Wait for Promise to complete and return the media stream object.
const stream = await zg.createZegoStream({camera: {video: true, audio: true}});

// Preview the stream before or during publishing, and mount the playback component to the page component container DOM element.
stream.playVideo(document.querySelector("#local-video"));

const result = zg.startPublishingStream(publishStreamId, stream, publishOption);

Publish Screen Capture Feed

Call the createZegoStream interface, set the "screen" attribute to create the publishing stream data source, and call the startPublishingStream interface to push the local stream to the remote end (ZEGOCLOUD server).

// Creating a stream is an asynchronous process. Wait for Promise to complete and return the media stream object.
const screenStream = await zg.createZegoStream({
    screen: {
        audio: $('#isScreenAudio').val() == 'yes' ? true : false,
        video: {
            quality: 1
        }
    },
});

// Preview the stream before or during publishing, and mount the playback component to the page component container DOM element
screenStream.playVideo(document.querySelector("#local-video"));

const publisRes= zg.startPublishingStream(screenStreamId, screenStream);

// Creating a stream is an asynchronous process. Wait for Promise to complete and return the media stream object.
const screenStream = await zg.createZegoStream({
    screen: {
        audio: $('#isScreenAudio').val() == 'yes' ? true : false,
        video: {
            quality: 1
        }
    },
});

// Preview the stream before or during publishing, and mount the playback component to the page component container DOM element
screenStream.playVideo(document.querySelector("#local-video"));

const publisRes= zg.startPublishingStream(screenStreamId, screenStream);