Agora RTC如何检测Chrome中用户点击停止共享按钮？

核心处理逻辑 #

当用户在Chrome中点击停止共享按钮时，屏幕共享对应的MediaStreamTrack会触发onended事件，我们可以通过监听这个事件，结合Agora RTC的API完成本地流的清理，避免黑屏问题。

具体实现步骤 #

• 创建屏幕流时绑定轨道结束事件
  在调用createScreenVideoTrack获取屏幕共享轨道后，直接为轨道绑定onended回调：

  // 创建屏幕共享视频轨道
  const screenTrack = await AgoraRTC.createScreenVideoTrack();
  // 监听轨道结束事件
  screenTrack.on('ended', () => {
    cleanUpLocalScreenStream();
  });
  

• 实现本地流清理函数
  在回调中需要完成取消发布、释放资源、移除本地渲染元素三个关键操作：

  function cleanUpLocalScreenStream() {
    if (!screenTrack) return;
    // 取消发布屏幕共享轨道
    client.unpublish(screenTrack);
    // 关闭轨道以释放媒体资源
    screenTrack.close();
    // 移除本地页面上的屏幕共享渲染元素
    const localScreenDom = document.getElementById('local-screen-player');
    if (localScreenDom) {
      localScreenDom.remove();
    }
    // 重置轨道引用
    screenTrack = null;
  }
  

• 添加兜底监听（可选）
  部分场景下可能会触发oninactive事件，可以同时监听作为补充：

  screenTrack.on('inactive', () => {
    cleanUpLocalScreenStream();
  });
  

关键注意点 #

• 事件监听要在创建轨道后立即绑定，避免错过停止共享的触发时机
• 必须调用close()方法彻底释放媒体资源，防止内存泄漏
• 如果使用Agora的play()方法渲染本地流，记得先调用stop()再移除DOM节点

内容的提问来源于stack exchange，提问作者Wakgood