During a video call or interactive streaming, sharing the screen enhances communication by displaying the speaker's screen on the display of other speakers or audience members in the channel.
Screen sharing is applied in the following scenarios:
shareTheScreen.js
, which shows the complete code of screen sharing.You can enable screen sharing on the web client by calling createScreenVideoTrack to create a video track for screen sharing. The web browser asks you to select which screens to share.
Before proceeding, ensure that you refer to the appropriate Quickstart Guide to implement the basic real-time communication functions in your project.
The Web SDK supports screen sharing on Chrome 58 or later. There are two ways to enable screen sharing on Chrome: with or without using the Google Chrome Extension for Screen Sharing provided by Agora.
Screen sharing without the Google Chrome extension
Simply call createScreenVideoTrack
to create a video track for screen sharing.
This method requires Chrome 72 or later. Otherwise, use the Google Chrome extension provided by Agora to share the screen.
AgoraRTC.createScreenVideoTrack({
// Set the encoder configurations. For details, see the API description.
encoderConfig: "1080p_1",
// Set the video transmission optimization mode as prioritizing video quality.
optimizationMode: "detail"
}).then(localScreenTrack => {
/** ... **/
});
Screen sharing with the Google Chrome extension
Add the Google Chrome Extension for Screen Sharing provide by Agora, get the extensionId
, and set the extensionId
parameter when you create a video track for screen sharing.
AgoraRTC.createScreenVideoTrack({
extensionId: 'minllpmhdgpndnkomcoccfekfegnlikg',
}).then(localScreenTrack => {
/** ... **/
});
Share audio
The Web SDK supports sharing the local audio playback when sharing a screen on Chrome 74 or later.
To share the audio, set the withAudio
parameter as enable
when calling createScreenVideoTrack
.
This method returns a list containing a video track object for screen sharing and an audio track object.
AgoraRTC.createScreenVideoTrack({
encoderConfig: "1080p_1",
}, "enable").then(([screenVideoTrack, screenAudioTrack])=> {
/** ... **/
});
Tips:
- For the audio sharing to take effect, the end-user must check Share audio on the pop-up window when sharing a screen.
- Audio sharing is disabled when the end-user shares a single application window.
The Web SDK supports screen sharing on Edge 80 or later on Windows 10+.
Simply call createScreenVideoTrack
to create a video track for screen sharing.
AgoraRTC.createScreenVideoTrack({
// Set the encoder configurations. For details, see the API description.
encoderConfig: "1080p_1",
}).then(localScreenTrack => {
/** ... **/
});
The Web SDK supports screen sharing on Firefox 56 or later. To share the screen on Firefox, you need to set the screenSourceType
parameter when creating the video track for screen sharing:
screen
: Shares the whole screen.application
: Shares all windows of an application.window
: Shares a specific window of an application.AgoraRTC.createScreenVideoTrack({
screenSourceType: 'screen' // 'screen', 'application', 'window'
}).then(localScreenTrack => { /** ... **/ });
application
mode.The Web SDK supports screen sharing on macOS Safari 13 or later.
Simply call createScreenVideoTrack
to create a video track for screen sharing.
AgoraRTC.createScreenVideoTrack({
// Set the encoder configurations. For details, see the API description.
encoderConfig: "1080p_1",
}).then(localScreenTrack => {
/** ... **/
});
To share the screen on Electron, you need to draw the UI for your users to select which screen or window to share. For quick integration, Agora provides a default UI.
Use the Default UI
To use the default UI, directly call createScreenVideoTrack
.
AgoraRTC.createScreenVideoTrack({
encoderConfig: "1080p_1",
}).then(localScreenTrack => {
/** ... **/
});
The default UI for screen source selection is as follows:
Customize the UI
Follow these steps to customize the UI for screen source selection:
AgoraRTC.getElectronScreenSources
to get the sources of the screens to share. The sources
parameter is an array of the source
objects. A source
object contains the following properties of the screen source:id
: The sourceId
.name
: The name of the screen source.thumbnail
: The thumbnail of the screen source.AgoraRTC.getElectronScreenSources().then(sources => {
console.log(sources);
})
source
, draw the UI (by HTML and CSS) for selecting the screen source to share. The following figure shows the properties' corresponding elements on the UI for screen source selection:sourceId
of the source selected by the user.sourceId
when creating the video track for screen sharing.AgoraRTC.createScreenVideoTrack({
// Pass the sourceId of the source selected by the user.
electronScreenSourceId: sourceId,
}).then(localScreenTrack => {
/** ... **/
});
- The
getScreenSources
method is a wrapper ofdesktopCapturer.getSources
provided by Electron. See desktopCapturer.- Only Electron requires the
sourceId
parameter.
An AgoraRTCClient
object can publish only one video track at a time. For this reason, if you want to enable both screen sharing and video on one host, you need to create two AgoraRTCClient
objects: one for publishing the video track from the camera, and one for publishing the video track for screen sharing.
async function startScreenCall() {
const screenClient = AgoraRTC.createClient({ mode: "rtc", codec: "vp8" });
await screenClient.join("<APP_ID", "<CHANNEL>", "<TOKEN>");
const screenTrack = await AgoraRTC.createScreenVideoTrack();
await screenClient.publish(screenTrack);
return screenClient;
}
async function startVideoCall() {
const videoClient = AgoraRTC.createClient({ mode: "rtc", codec: "vp8" });
await videoClient.join("<APP_ID", "<CHANNEL>", "<TOKEN>");
const videoTrack = await AgoraRTC.createCameraVideoTrack();
await videoClient.publish(videoTrack);
return videoClient;
}
Promise.all([startScreenCall(), startVideoCall()]).then(() => { /** ... **/ });
If two clients of a host subscribe to each other, extra charges incur.
Agora recommends that you save the returned uid
when each client joins the channel. When the user-published
event occurs, first check if the uid
of the user who publishes the track belongs to a local client. If the answer is yes, do not subscribe to the track.
AgoraRTCClient
object can publish only one video track at a time.