检测 Firefox 对屏幕共享的支持

Question

Firefox 从 52 版开始，将通过以下方式支持屏幕共享：

navigator.mediaDevices.getUserMedia({ video: { mediaSource: 'screen' }}) 
  .then(stream => { ... });

查看此测试页以查看其实际效果。

我想知道是否有办法检测浏览器是否支持{ mediaSource: 'screen' }？

我只想提供与具有共享能力的用户共享屏幕的选项。所以我希望能够检测到这一点。

Answer 1

更新的答案： getDisplayMedia现在是屏幕共享的正确 API，现在支持所有主要浏览器几年（自 66 岁以上的 Firefox 中）。所以正确的 API 是：

await navigator.mediaDevices.getUserMedia({video: true});

特征检测的正确方法是：

await navigator.mediaDevices.getUserMedia({video: true});

这是false在缺乏支持的移动设备上（适用于 Android 的 Firefox 和适用于 Android 的 Chrome）。

它也false超过了不安全http（非 https）连接navigator.mediaDevices本身undefined，一个被认为是“强大功能”的对象。

对非常老的 Firefox < 66 的回答：

?? 不要在较新的浏览器中依赖此答案，因为此限制正在消失！

一种检测浏览器是否支持 { mediaSource: 'screen' } 的方法？

迂腐的答案是以下内容将告诉您是否mediaSource支持该约束：

console.log(navigator.mediaDevices &&
            "getDisplayMedia" in navigator.mediaDevices);

不幸的是，它mediaSource是非标准的，仅在 Firefox 中实现。在撰写本文时，Firefox 是唯一一款无需插件即可启用屏幕共享的浏览器。

Chrome 有一个不同的非标准 API，使用chromeMediaSource可用作为插件，使用旧的约束语法，但它（正确地）没有出现在新的getSupportedConstraints.

还是有点乱。长期浏览器最终可能会实现getDisplayMedia。