Firefox 中 Angular 6 中的屏幕共享答案

【问题标题】：Screensharing in Angular 6 in FirefoxFirefox 中 Angular 6 中的屏幕共享
【发布时间】：2018-11-21 19:39:30
【问题描述】：

我正在制作一个 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'.

我还发现了这个帖子： 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);
  }

【问题讨论】：

标签： angular firefox webrtc screensharing get-display-media

【解决方案1】：

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

【讨论】：

当尝试使用 adapter.browserDetails.browser & adapter.browserShim.shimGetDisplayMedia() typescript 给出以下错误：[ts] 找不到名称“适配器”。 [2304]，你知道这是为什么吗？似乎它不知道适配器是什么并且无法访问。是不是导入webrtc-adapter有问题？我使用的是最新版本的 webrtc-adapter 6.4.8。
尝试像这样导入：从“webrtc-adapter”导入适配器；除此之外，它可能是我一无所知的打字稿。
是的，完成了这项工作，非常感谢！并保持良好的工作;)

【解决方案2】：

它适用于我在 Firefox 中使用 adapter-latest.js 就像 this:

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

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

不幸的是，Firefox 仍然强制应用在共享全屏或窗口之间进行选择。一旦本机支持，这应该修复。

【讨论】：