处理 getUserMedia 屏幕共享的本机取消的正确方法是什么?

Question

我正在为我正在开发的Web应用程序使用getUserMedia的屏幕共享。

我目前正在使用带有Chrome扩展程序的Chrome，使用以下API来实现该功能，但是该功能也可以在Firefox中使用，并且将来可以通过getDisplayMedia或其他方式本地可用(我相信过去是可能的(。https://developer.chrome.com/extensions/desktopCapture

在屏幕共享

期间，浏览器底部会显示一个本机对话框以停止屏幕共享。我想要一种方法来处理此事件，但我不知道实现此目的的通用标准方法。是否有适当的方法来执行此操作(最好在所有 API 中(，或者我应该通过跟踪事件来实现这一点？

Answer 1

我不太确定Chrome未指定的实现的行为方式，但是是的，您通常必须收听VideoTrack的onended事件。

此代码段应仅适用于 FF，FF 是唯一允许非 chrome 页面访问此功能的代码段。

navigator.mediaDevices.getUserMedia({video: {mediaSource: 'screen'}}).then(stream => {
  document.getElementById('vid').srcObject = stream;
  const v_track = stream.getVideoTracks()[0];
  v_track.onended = e => console.log('stopped');
}).catch(console.error);

<video id="vid" autoplay></video>

万一它甚至不起作用(因为 StackSnippets© 繁重的安全规则(，这里有一个小提琴。