Angular 6 在 Firefox 中的屏幕共享

Question

我正在制作一个 Angular 应用程序，我需要能够共享用户屏幕。我正在使用 adapter.js 版本 6.4.8 并在 Firefox Developer 64.0b11 和 Firefox 63.0.3 中对其进行测试，我知道浏览器之间的实现存在很多差异。我想让应用程序至少在 Firefox 中运行，如果我能支持更多的浏览器就更好了。

在运行之后执行以下命令

npm install webrtc-adapter && @types/webrtc

我是这样导入适配器的： import 'webrtc-adapter'

最近似乎围绕 webRTC 中的屏幕捕获进行了很多更改，WebRTC 规范的最新草案说您必须像这样实现屏幕捕获：

try {
  let mediaStream = await navigator.mediaDevices.getDisplayMedia({video:true});
  videoElement.srcObject = mediaStream;
} catch (e) {
  console.log('Unable to acquire screen capture: ' + e);
}

Implementation in my project

使用此方法在两个版本的 Firefox 中都会出现错误：

TypeError: "navigator.mediaDevices.getDisplayMedia is not a function"

此外，在节点 CLI 中如果出现此错误：

ERROR in src/app/video/video.component.ts(32,52): error TS2339: Property 'getDisplayMedia' does not exist on type 'MediaDevices'.

我也发现了这个post： https://groups.google.com/forum/#!topic/mozilla.dev.platform/20EhEy_ahKg 哪些状态（我认为？）在 Firefox 64/65 之前不支持 navigator.mediaDevices.getDisplayMedia。

但这不就是 adapter.js API 的用途吗？我认为 adapter.js 充当规范和不同浏览器实现之间的抽象层。

此时我不知道自己做错了什么，我是不是在我的 Angular 项目中导入了错误的 webrtc-adapter，对规范的解释有误？

我希望我为您提供了足够的信息来帮助我，我非常感谢您解决这个问题，因为 webRTC 对我来说是新手，我不知道下一步该做什么。

我找到的试图解决这个问题的方便链接：

Share screen in Firefox using RTCMultiConnection

https://blog.mozilla.org/webrtc/getdisplaymedia-now-available-in-adapter-js/

https://jsfiddle.net/jib1/q75yb8pf

这些是如何在 javascript 中解决此问题的解决方案，但我似乎无法使其在 typescript 中工作。

编辑：感谢 Philipp Hancke 和 jib 的回答，我让它工作了，我所做的是像这样导入 webrtc-adapter：

import adapter from "webrtc-adapter";

然后从我的代码中这样调用它：

    var video = document.querySelector('video');
    if (adapter.browserDetails.browser == 'firefox') {
      adapter.browserShim.shimGetDisplayMedia(window, 'screen');
    }
    navigator.mediaDevices.getDisplayMedia({video: true}).then(this.onSucces).catch(this.onError);
  }

  onSucces(stream: MediaStream): void{
    var video = document.querySelector('video');
    video.srcObject = stream;   
    video.onloadedmetadata = function(e) {
      video.play();
    };
  }

  onError(error: Error):void {
    console.log('Error message: ' + error.message);
    console.log('Error name: ' + error.name);
  }

Answer 1

默认情况下不填充屏幕共享，有关如何使用 getDisplayMedia 的说明，请参阅 the mozilla hacks post。还要确保您使用的是最新的 adapter.js 版本，最近移动了 getDisplayMedia。

Answer 2

我在 Firefox 中使用 adapter-latest.js like this:

adapter.browserShim.shimGetDisplayMedia(window, "window"); // or "screen"

(async () => {
  try {
    video.srcObject = await navigator.mediaDevices.getDisplayMedia({video: true});
  } catch(e) {
    console.log(e);
  }
})();

不幸的是，Firefox 仍然强制应用程序在共享全屏或 window 之间做出选择。一旦得到原生支持，这应该会得到修复。

Angular 6 在 Firefox 中的屏幕共享

Screensharing in Angular 6 in Firefox

angular

firefox

webrtc

screensharing

get-display-media