javascript - 检测 Firefox 对屏幕共享的支持

Question

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

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

查看此测试页面以查看它的实际效果。

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

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

Answer 1

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

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

特征检测的正确方法是：

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

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

它本身也false存在于不安全http（非 https）连接上，该对象被认为是“强大的功能”。navigator.mediaDevicesundefined

真正旧的 Firefox < 66的答案：

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

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

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

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

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

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

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