如何跨API正确处理getUserMedia屏幕共享的原生取消事件？

这个问题问到点子上了！处理屏幕共享的停止事件确实得兼顾不同浏览器和API的差异，我帮你梳理下最靠谱的方案：

核心通用方案：监听MediaStreamTrack的ended事件 #

不管你用哪种API获取屏幕共享流，最终拿到的都是MediaStream对象，里面的MediaStreamTrack会在共享停止时触发ended事件——这是目前跨API、跨浏览器最可靠的方式，不管是用户点击浏览器底部的原生停止按钮，还是系统层面强制终止共享，都会触发这个事件。

举个简单的实现例子：

// 假设你已经成功获取到屏幕共享的mediaStream
const [screenTrack] = mediaStream.getVideoTracks();

screenTrack.addEventListener('ended', () => {
  // 在这里处理共享停止后的逻辑：更新UI状态、清理资源、提示用户等
  console.log('屏幕共享已停止');
  // 比如隐藏共享状态提示框，或者重置录制状态
});

针对不同API的额外适配 #

虽然ended事件是通用核心，但不同API的初始化阶段（比如授权环节）的取消逻辑需要单独处理：

Chrome扩展desktopCapture API #

使用Chrome扩展的桌面捕获API时，除了监听track的ended事件，你还需要在调用chrome.desktopCapture.chooseDesktopMedia的回调里处理用户取消授权的情况：

chrome.desktopCapture.chooseDesktopMedia(['screen', 'window'], (streamId) => {
  if (!streamId) {
    // 用户取消了授权对话框，或者发生了错误
    console.log('用户取消了屏幕共享授权');
    // 这里可以提示用户重新发起共享，或者重置应用状态
    return;
  }
  // 后续获取流并绑定ended事件监听
});

Firefox的屏幕共享实现 #

Firefox早期通过getUserMedia加特定约束实现屏幕共享，现在也全面支持标准的getDisplayMedia。不管用哪种方式，核心依然是监听track的ended事件。Firefox在共享停止时可能会有浏览器层面的状态变化，但ended事件是跨版本稳定的选择。

标准getDisplayMedia API #

这是W3C推出的原生屏幕共享标准API，现在主流浏览器都已支持。使用它时，除了通过catch块处理用户取消授权的情况，同样依赖ended事件处理共享停止：

navigator.mediaDevices.getDisplayMedia({ video: true })
  .then(mediaStream => {
    const [screenTrack] = mediaStream.getVideoTracks();
    screenTrack.addEventListener('ended', () => {
      console.log('屏幕共享已停止');
      // 执行后续清理逻辑
    });
    // 将流绑定到video元素或进行其他处理
  })
  .catch(err => {
    // 用户取消授权或者请求失败
    console.log('屏幕共享请求被取消或失败:', err);
  });

总结一下 #

• 通用首选：监听MediaStreamTrack的ended事件是跨API、跨浏览器的最优方案，覆盖绝大多数共享停止场景。
• 补充处理：各个API的授权环节（比如用户取消授权对话框）需要在对应的回调或错误捕获块中单独处理，这部分是不同API特有的逻辑。

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