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

Question

我正在使用带有getUserMedia的screenhare来处理我正在开发的Web应用程序。

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

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

Answer 1

我不太清楚Chrome未指定的实现行为，但是，您通常需要收听VideoTrack的onended事件。

此代码段只能在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©重安全规则），这里是fiddle。