2

我正在制作一个 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);
}

在我的项目中实现

使用此方法在两个版本的 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/ 之前不支持 navigator.mediaDevices.getDisplayMedia 65.

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

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

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

我发现试图解决这个问题的方便链接：

使用 RTCMultiConnection 在 Firefox 中共享屏幕

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

https://jsfiddle.net/jib1/q75yb8pf

这些是如何在javascript中解决这个问题的解决方案，但我似乎无法让它在打字稿中工作。

编辑：感谢 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);
  }
4

2 回答 2

1

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

于 2018-11-21T19:47:15.033 回答
0

它适用于我在 Firefox 中使用adapter-latest.js，如下所示：

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

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

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

于 2018-11-21T20:39:45.307 回答