如何判断用户选择了哪种屏幕共享？

Question

可以使用

navigator.mediaDevices.getDisplayMedia

检索用户显示的流。在某些浏览器上，我还可以像这样预选整个屏幕选项卡：

const stream = await navigator.mediaDevices.getDisplayMedia({
  // Pre-select the "Entire Screen" pane in the media picker.
  video: { displaySurface: "monitor" },
});

然而，用户仍然可以自由选择他们选择的任何选项卡、窗口或屏幕。有没有办法找出用户选择了什么？

Answer 1

是的，您可以使用 MediaStreamTrack.onended 事件找出用户选择了哪个屏幕、窗口或选项卡。当用户停止共享他们的屏幕时，将触发 onended 事件，您可以获取 MediaStreamTrack.getSettings() 以查看共享了哪个屏幕或窗口。

这里有一个示例代码片段，演示了如何获取共享流的屏幕或窗口 ID：

**const stream = await navigator.mediaDevices.getDisplayMedia({
  video: { displaySurface: "monitor" },
});
const track = stream.getVideoTracks()[0];
track.onended = () => {
  const settings = track.getSettings();
  console.log(`User stopped sharing screen ${settings.displaySurfaceId}`);
};**

在此示例中，getVideoTracks() 方法返回一个 MediaStreamTrack 对象数组，我们选择第一个轨道（假设只有一个）。然后我们监听 onended 事件并在事件触发时获取轨道的设置。设置对象中的 displaySurfaceId 属性包含共享屏幕、窗口或选项卡的 ID。