浏览器屏幕共享：如何为「停止共享」按钮绑定JavaScript处理程序

当用户通过浏览器自带的停止按钮终止屏幕共享时，本质是触发了屏幕共享MediaStreamTrack的ended事件。你可以通过监听这个事件绑定自定义处理逻辑，具体实现步骤如下：

• 调用navigator.mediaDevices.getDisplayMedia()获取屏幕共享流后，遍历流中的视频轨道
• 为每个视频轨道添加ended事件监听器，在回调中编写停止后的处理代码

示例代码 #

async function initScreenShare() {
  try {
    // 请求屏幕共享权限并获取媒体流
    const screenStream = await navigator.mediaDevices.getDisplayMedia({
      video: true,
      audio: false // 根据需求选择是否开启音频共享
    });

    // 为所有视频轨道绑定停止事件
    screenStream.getVideoTracks().forEach(track => {
      track.addEventListener('ended', onScreenShareStopped);
    });
  } catch (error) {
    console.error('屏幕共享启动失败:', error);
  }
}

// 自定义停止处理逻辑
function onScreenShareStopped() {
  console.log('屏幕共享已被终止');
  // 这里可以执行UI更新、资源清理等操作
  // 比如隐藏共享状态提示、恢复原视频流等
}

关键说明 #

• 浏览器的停止按钮会直接终止屏幕共享的媒体轨道，因此ended事件会被触发；无论用户是点击浏览器按钮还是通过系统层面终止共享（比如关闭共享的窗口），这个监听器都能捕获到该事件
• 如果开启了音频共享，同样需要为音频轨道添加ended事件监听（通过screenStream.getAudioTracks()获取音频轨道）

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