Intelligent Media Services:Configure screen sharing

Usage notes

Before you start screen sharing, you must check whether the browser environment supports screen sharing and screen-sharing stream preview and subscription.

Publish a screen-sharing stream

Check whether the environment supports screen sharing

const checkResult = await AliRtcEngine.isSupported();
if (!checkResult.detail.isScreenShareSupported) {
  // Call the static method isSupported and check whether your browser supports screen sharing based on the response. If your browser does not support screen sharing, you are prompted to change or upgrade the browser.
  console.log('The current browser does not support screen sharing.');
}

Start screen sharing

Call the startScreenShare method to start screen sharing. If you want to share audio, set the audio parameter to true.

// Make sure that an AliRtcEngine instance is created.
try {
  await aliRtcEngine.startScreenShare({
    audio: true, // Specifies whether to share audio.
  });
} catch (error) {
  console.log('start screen share fail', error);
}

After you call the startScreenShare method, the browser pops up a dialog box. In the dialog box, select the browser tab, window, or screen that you want to share and then click Share to start screen sharing.

Start preview

Call the setLocalViewConfig method to configure settings that let you preview the screen-sharing stream. Specifically, perform the following steps:

1. Add the VIDEO element whose ID is screenPreviewer to the HTML code.

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

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

   // For the first parameter, pass in HTMLVideoElement or specify the element ID. If you set the value to null, the preview is stopped.
   // Set the value of the second parameter to 1 or 2. The value 1 specifies that the camera stream is previewed. The value 2 specifies that the screen-sharing stream is previewed.
   aliRtcEngine.setLocalViewConfig('screenPreviewer', 2);

Subscribe to the screen-sharing stream

To subscribe to the screen-sharing stream of a remote user, you need to listen to the screenSubscribeStateChanged event. When the subscription state is changed to subscribed, call the setRemoteViewConfig method to play the stream. Specifically, perform the following steps:

1. Add the DIV element whose ID is screenVideoContainer as a container to the HTML code.

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

2. If the state of subscription to the remote screen-sharing stream is changed to subscribed, call setRemoteViewConfig to play the stream. If the state of subscription to the remote screen-sharing stream is changed to unsubscribed, remove the stream.

   // Save the Video element.
   const remoteVideoElMap = {};
   // Set the remoteVideoContainer element.
   const remoteVideoContainer = document.querySelector('#remoteVideoContainer');
   
   function removeRemoteVideo(userId) {
     const el = remoteVideoElMap[userId];
     if (el) {
       aliRtcEngine.setRemoteViewConfig(null, userId, 1);
       el.pause();
       remoteVideoContainer.removeChild(el);
       delete remoteVideoElMap[userId];
     }
   }
   
   // Listen to the screenShareSubscribeStateChanged event.
   aliRtcEngine.on('screenShareSubscribeStateChanged', (userId, oldState, newState, interval, channelId) => {
     // oldState and newState are parameters of AliRtcSubscribeState. The valid values of the parameters are 0 (initialized), 1 (unsubscribed), 2 (subscribing), and 3 (subscribed).
     // interval specifies the time elapsed for the change between two states, in milliseconds.
     console.log(`The state of subscription to the remote user ${userId} in the channel ${channelId} is changed from ${oldState} to ${newState}.`);
     // The following sample code provides a handling example.
     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);
       // For the first parameter, pass in HTMLVideoElement.
       // For the second parameter, specify the ID of the remote user.
       // Set the value of the third parameter to 1 or 2. The value 1 specifies that the camera stream is previewed. The value 2 specifies that the screen-sharing stream is previewed.
       aliRtcEngine.setRemoteViewConfig(video, userId, 1);
     } else if (newState === 1) {
       removeRemoteVideo(userId);
     }
   });