如何检测Agora Web SDK（纯JS）中远端用户的屏幕共享状态

针对你遇到的无法区分摄像头视频和屏幕共享轨道的问题，根据Agora Web SDK的不同版本，有两种可靠的纯JS实现方案：

方案1：适用于Agora Web SDK v4.x及以上 #

v4.x版本的SDK对轨道做了明确分类，直接通过轨道的source属性即可区分：

• 摄像头视频轨道的source值为camera
• 屏幕共享轨道的source值为screen

代码示例：

// 监听远端用户发布轨道事件
client.on('user-published', async (user, mediaType) => {
  await client.subscribe(user, mediaType);
  if (mediaType === 'video') {
    const remoteTrack = user.videoTrack;
    // 判断是否为屏幕共享轨道
    if (remoteTrack.source === 'screen') {
      // 这里执行UI更新逻辑：比如显示屏幕共享窗口、标记用户正在共享屏幕
      console.log(`${user.uid} 开启了屏幕共享`);
    } else {
      // 远端用户开启了摄像头视频
      console.log(`${user.uid} 开启了摄像头视频`);
    }
  }
});

// 监听远端用户停止发布轨道事件，处理共享停止的UI更新
client.on('user-unpublished', (user, mediaType) => {
  if (mediaType === 'video') {
    const remoteTrack = user.videoTrack;
    if (remoteTrack?.source === 'screen') {
      // 更新UI：移除屏幕共享窗口、取消用户共享标记
      console.log(`${user.uid} 停止了屏幕共享`);
    }
  }
});

方案2：适用于Agora Web SDK v3.x及更早版本 #

v3.x版本没有source属性，需要通过原生MediaStreamTrack的label字段判断——屏幕共享的轨道标签通常包含screen、display或window等关键词。

代码示例：

// 监听远端用户发布轨道事件
client.on('user-published', async (user, mediaType) => {
  await client.subscribe(user, mediaType);
  if (mediaType === 'video') {
    const remoteTrack = user.videoTrack;
    const nativeTrack = remoteTrack.getMediaStreamTrack();
    // 检测标签中的关键词，判断是否为屏幕共享
    const isScreenShare = nativeTrack.label.includes('screen') || nativeTrack.label.includes('display');
    if (isScreenShare) {
      // 执行屏幕共享开启的UI更新逻辑
      console.log(`${user.uid} 开启了屏幕共享`);
    } else {
      // 执行摄像头视频开启的UI更新逻辑
      console.log(`${user.uid} 开启了摄像头视频`);
    }
  }
});

// 监听远端用户停止发布轨道事件
client.on('user-unpublished', (user, mediaType) => {
  if (mediaType === 'video') {
    const remoteTrack = user.videoTrack;
    if (remoteTrack) {
      const nativeTrack = remoteTrack.getMediaStreamTrack();
      const isScreenShare = nativeTrack.label.includes('screen') || nativeTrack.label.includes('display');
      if (isScreenShare) {
        // 更新UI：处理屏幕共享停止的状态
        console.log(`${user.uid} 停止了屏幕共享`);
      }
    }
  }
});

注意：如果你的SDK版本介于v3.x和v4.x之间，可以同时兼容两种判断方式，确保覆盖所有情况。

内容的提问来源于stack exchange，提问作者Uday Chandra G