Web

Usage notes

Before you publish a screen-sharing stream, check if the current browser supports screen sharing, stream preview, and subscription.

Publish a screen-sharing stream

Check for screen sharing support

Before starting screen sharing, check if your browser supports it.

const checkResult = await AliRtcEngine.isSupported();
if (!checkResult.detail.isScreenShareSupported) {
  // Use the static method isSupported to check for screen sharing support.
  // If it's 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 include audio, set the audio parameter to true.

// Prerequisite: Create an engine instance first.
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 opens a dialog box. Select a browser tab, window, or screen to share, and then click Share.

Preview

To preview the screen-sharing stream, call the setLocalViewConfig method. Follow these steps:

1. Add a VIDEO element with the ID screenPreviewer to your HTML code.

   <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 element ID. Pass null to stop the preview.
   // The second parameter specifies the stream type: 1 for the camera stream, 2 for the screen-sharing stream.
   aliRtcEngine.setLocalViewConfig('screenPreviewer', 2);

Subscribe to a screen-sharing stream

To subscribe to a remote user's screen-sharing stream, listen for the screenSubscribeStateChanged event and call the setRemoteViewConfig method to play the stream. Follow these steps:

1. Add a DIV element with the ID screenVideoContainer to your HTML code to contain the remote video.

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

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

   // Stores the video elements.
   const remoteVideoElMap = {};
   // The remote 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 AliRtcSubscribeState types. Values: 0 (Initialized), 1 (Unsubscribed), 2 (Subscribing), 3 (Subscribed).
     // interval is the time elapsed between state changes, in milliseconds.
     console.log(`Subscription state for 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's ID.
       // The third parameter specifies the stream type to render: 1 for the camera stream or 2 for the screen-sharing stream.
       aliRtcEngine.setRemoteViewConfig(video, userId, 2);
     } else if (newState === 1) {
       removeRemoteVideo(userId);
     }
   });