检测 Firefox 对屏幕共享的支持

Question

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

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

查看this test page to see it in action。

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

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

Answer 1

更新答案： getDisplayMedia 现在是屏幕共享的正确 API，几年来所有主流浏览器都支持（在 Firefox 66+ 之后）。所以正确的API是：

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

特征检测的正确方法是：

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

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

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

真正老火狐的回答66:

⚠️ 不要在较新的浏览器中依赖这个答案，因为这个限制正在消失！

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

迂腐的答案是下面会告诉你是否支持mediaSource 约束：

console.log(!!navigator.mediaDevices.getSupportedConstraints().mediaSource);

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

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

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