Screen sharing

Usage notes

Before publishing a screen-sharing stream, verify that the current browser supports screen sharing, previewing, and subscribing to screen-sharing streams.

Publish a screen-sharing stream

Check for screen sharing support

Before starting screen sharing, verify that the current browser supports it.

const checkResult = await AliRtcEngine.isSupported();
if (!checkResult.detail.isScreenShareSupported) {
  // Check for screen sharing support with the isSupported static method. If not supported, prompt the user to change or upgrade their browser.
  console.log('The current browser does not support screen sharing.');
}

Start screen sharing

Call the startScreenShare method to start screen sharing. To share audio, set the audio parameter to true.

// Prerequisite: An engine instance must be created first.
try {
  await aliRtcEngine.startScreenShare({
    audio: true, // Specifies whether to share audio.
  });
} catch (error) {
  console.log('start screen share fail', error);
}

After startScreenShare is called, the browser displays a system dialog box where the user selects the tab, window, or screen to share and clicks Share.

Preview

To preview the screen-sharing stream, call the setLocalViewConfig method to configure the view:

1. In your HTML code, add a <video> element with the ID screenPreviewer.

   <video
     id="screenPreviewer"
     style="display: block;width: 320px;height: 180px;background-color: black;"
   ></video>

2. Call the setLocalViewConfig method and pass the element ID to start the preview.

   // The first parameter accepts an HTMLVideoElement or its corresponding element ID. Pass null to stop the preview.
   // The second parameter accepts 1 (to preview the camera stream) or 2 (to preview the screen-sharing stream).
   aliRtcEngine.setLocalViewConfig('screenPreviewer', 2);

Subscribe to a screen-sharing stream

To subscribe to a screen-sharing stream from a remote user, listen for the screenSubscribeStateChanged event. When the state changes to subscribed, call the setRemoteViewConfig method to play the stream:

1. In your HTML code, add a <div> element with the ID screenVideoContainer as a container.

   <div id="screenVideoContainer"></div>

2. Listen for subscription state changes on the remote screen-sharing stream. When the stream is subscribed, call setRemoteViewConfig to play it. When unsubscribed, remove the corresponding video element.

   // Store the video elements.
   const remoteVideoElMap = {};
   // The remote video container element.
   const remoteVideoContainer = document.querySelector('#remoteVideoContainer');
   function removeRemoteVideo(userId) {
     const el = remoteVideoElMap[userId];
     if (el) {
       aliRtcEngine.setRemoteViewConfig(null, userId, 2);
       el.pause();
       remoteVideoContainer.removeChild(el);
       delete remoteVideoElMap[userId];
     }
   }
   // Listen for the screenShareSubscribeStateChanged event.
   aliRtcEngine.on('screenShareSubscribeStateChanged', (userId, oldState, newState, interval, channelId) => {
     // `oldState` and `newState` are of the type `AliRtcSubscribeState`. Valid values: 0 (initialized), 1 (unsubscribed), 2 (subscribing), and 3 (subscribed).
     // `interval` is the time elapsed between the two states, in milliseconds.
     console.log(`The subscription state of remote user ${userId} in channel ${channelId} changed from ${oldState} to ${newState}.`);
     // Example handler.
     if (newState === 3) {
       const video = document.createElement('video');
       video.autoplay = true;
       video.setAttribute('style', 'display: block;width: 320px;height: 180px;background-color: black;');
       remoteVideoElMap[userId] = video;
       remoteVideoContainer.appendChild(video);
       // The first parameter is the HTMLVideoElement.
       // The second parameter is the remote user ID.
       // The third parameter specifies the stream type: 1 for the camera stream or 2 for the screen-sharing stream.
       aliRtcEngine.setRemoteViewConfig(video, userId, 2);
     } else if (newState === 1) {
       removeRemoteVideo(userId);
     }
   });