屏幕共享

发布屏幕共享流

判断当前环境是否支持屏幕共享

开启屏幕共享前，您需要先检测当前浏览器是否支持屏幕共享。

const checkResult = await AliRtcEngine.isSupported();
if (!checkResult.detail.isScreenShareSupported) {
  // 通过静态方法 isSupported 返回的结果判断是否支持屏幕共享，不支持时提示用户更换或升级浏览器
  console.log('The current browser does not support screen sharing.');
}

开启屏幕共享

调用startScreenShare接口开启屏幕共享，如果需要共享音频请将audio参数设为true。

// 前提：需要先创建引擎实例
try {
  await aliRtcEngine.startScreenShare({
    audio: true, // 是否需要共享音频
  });
} catch (error) {
  console.log('start screen share fail', error);
}

调用startScreenShare接口后，浏览器将弹出系统弹窗，用户需要选中待共享的标签页、窗口或屏幕，再单击分享按键，才能开启屏幕共享。

预览

如果需要预览共享的屏幕流，可以调用setLocalViewConfig接口进行设置。具体方法如下：

1. 在HTML代码中增加一个ID为screenPreviewer的VIDEO元素。

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

2. 通过setLocalViewConfig方法传入元素ID开启预览。

   // 第一个参数支持传入 HTMLVideoElement 或对应的元素 ID，传入 null 时停止预览
   // 第二个参数支持传入 1 （预览相机流）、2（预览屏幕共享流）
   aliRtcEngine.setLocalViewConfig('screenPreviewer', 2);

订阅屏幕共享流

如果需要订阅远端用户的屏幕流，需要监听screenSubscribeStateChanged事件，当状态变为已订阅后调用setRemoteViewConfig接口播放。具体方法如下：

1. 在HTML代码中增加一个ID为screenVideoContainer的DIV元素作为容器。

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

2. 监听到远端屏幕流订阅变化后，若已订阅setRemoteViewConfig接口则播放，若未订阅则移除。

   // 存储 Video 元素
   const remoteVideoElMap = {};
   // 远端容器元素
   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];
     }
   }
   
   // 监听 screenShareSubscribeStateChanged 事件
   aliRtcEngine.on('screenShareSubscribeStateChanged', (userId, oldState, newState, interval, channelId) => {
     // oldState、newState 类型均为AliRtcSubscribeState，值包含 0（初始化）、1（未订阅）、2（订阅中）、3（已订阅）
     // interval 为两个状态之间的变化时间间隔，单位毫秒
     console.log(`频道 ${channelId} 远端用户 ${userId} 订阅状态由 ${oldState} 变为 ${newState}`);
     // 处理示例
     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);
       // 第一个参数传入 HTMLVideoElement
       // 第二个参数传入远端用户 ID
       // 第三个参数支持传入 1 （预览相机流）、2（预览屏幕共享流）
       aliRtcEngine.setRemoteViewConfig(video, userId, 1);
     } else if (newState === 1) {
       removeRemoteVideo(userId);
     }
   });