Screen Sharing

Function Overview

Screen sharing refers to sharing screen content as video with other users in the room during a video call or interactive live streaming. It supports sharing the entire screen, a specific window, or a browser tab. For example, in an education scenario, a teacher needs to display a PPT on their desktop to other students in the room to improve communication efficiency.

Download Sample Source Code

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

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

Prerequisites

Before using screen sharing, ensure that:

• You have created a project in the ZEGOCLOUD Console and applied for a valid AppID and Server address. For details, refer to Console - Project Information.
• You have integrated ZEGO Express SDK into your project and implemented basic audio/video stream publishing and playing functionality. For details, refer to Quick Start - Integration and Quick Start - Implementation.
• The current browser supports screen sharing with or without plugins.

Usage Steps

(Optional) Install Screen Sharing Plugin

(Optional) Listen to Event Callbacks

zg.on('screenSharingEnded', (stream)=> {
    //do something
    console.warn('screen sharing end');

});

zg.on('screenSharingEnded', (stream)=> {
    //do something
    console.warn('screen sharing end');

});

Create Screen Sharing Stream

Call the createZegoStream method to create a screen sharing stream.

The "screen" object contained in the "source" parameter of the createZegoStream interface can be used to configure the screen capture stream.

Set Audio Sharing

You can use the "audio" parameter under the "screen" object to set whether to share audio. The parameter values are as follows:

Google Chrome Browser

In Google Chrome browser, after setting "audio" to "true", you also need to check "Share audio" in the browser popup to send audio to remote users. When developers select different shared content, whether the "Share audio" option in the browser popup is displayed, please refer to the following:

Share content in Google Chrome	macOS	Windows
Entire screen	No "Share audio" option.	Has "Share audio" option. When this option is checked, the entire computer screen audio (including other apps) will be sent to remote users, but does not include sound captured by the microphone.
Window	No "Share audio" option.
Google Chrome tab	Has "Share audio" option. When this option is checked, only the media sound playing in the selected tab (excluding muted media) will be sent to remote users.

Warning

Only when "Share audio" is checked can audio be sent to remote users, and the playing end will have sound.

Microsoft Edge Browser

In Microsoft Edge browser, after setting "audio" to "true", you also need to check "Share audio" in the browser popup to send audio to remote users. When developers select different shared content, whether the "Share audio" option in the browser popup is displayed, please refer to the following:

Share content in Microsoft Edge	macOS	Windows
Entire screen	No "Share audio" option.	Has "Share audio" option. When this option is checked, the entire computer screen audio (including other apps) will be sent to remote users, but does not include sound captured by the microphone.
Window	No "Share audio" option.
Microsoft Edge tab	Has "Share audio" option. When this option is checked, only the media sound playing in the selected tab (excluding muted media) will be sent to remote users.

Warning

Only when "Share audio" is checked can audio be sent to remote users, and the playing end will have sound.

Firefox Browser

In Firefox browser, when sharing the screen, after setting "audio" to "true":

• In Windows, sharing audio from the screen (audio from browser webpages, other apps, etc.) is not supported, but sending audio captured by the microphone to remote users is supported.
• In macOS, sharing audio from the screen (audio from browser webpages, other apps, etc.) and audio captured by the microphone is supported. Developers can choose to allow opening microphone permissions when sharing the screen in the browser to share audio.

Set Screen Sharing Video Quality

You can use the "videoQuality" parameter under the "screen" object to set the screen sharing video quality (resolution, frame rate, and bitrate). The parameter values and meanings are as follows:

const screenStream = await zg.createZegoStream({
    videoBitrate: 1500,
    screen: {
        audio: document.getElementById('isScreenAudio').value == 'yes' ? true : false,
        video: {
            quality: 4,
            frameRate: 15,
            width: document.getElementById('screenWidth').value * 1 || screen.width,
            height:  document.getElementById('screenHeight').value* 1 || screen.height
        }
    },
});

const screenStream = await zg.createZegoStream({
    videoBitrate: 1500,
    screen: {
        audio: document.getElementById('isScreenAudio').value == 'yes' ? true : false,
        video: {
            quality: 4,
            frameRate: 15,
            width: document.getElementById('screenWidth').value * 1 || screen.width,
            height:  document.getElementById('screenHeight').value* 1 || screen.height
        }
    },
});

Publish Screen Sharing Stream

Call the startPublishingStream method to publish the screen sharing stream created by createZegoStream to the ZEGOCLOUD real-time audio/video cloud. When publishing multiple streams simultaneously, it's recommended to only publish 1 audio stream to avoid echo.

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

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

Watch Remote Screen Sharing

After the screen sharing stream is published to the ZEGOCLOUD real-time audio/video cloud, other users can use the startPlayingStream interface to play the screen sharing stream.

Destroy Screen Sharing Stream

Stop Publishing

If you want to destroy the screen sharing stream, you need to first call the stopPublishingStream method to stop publishing, otherwise the remote video will freeze.

zg.stopPublishingStream(screenStreamId);

zg.stopPublishingStream(screenStreamId);

Destroy Screen Sharing Stream

After stopping publishing, you need to promptly call the destroyStream method to destroy the screen sharing stream data and release occupied resources.

zg.destroyStream(screenStream);

zg.destroyStream(screenStream);

Related Documentation

• How to switch between screen sharing stream and camera video stream?
• How to solve screen sharing quality issues on the Web platform?