Совместное использование экрана в Angular 6 в Firefox - PullRequest
Новая
       6

Совместное использование экрана в Angular 6 в Firefox

0 голосов
/ 21 ноября 2018

Я делаю приложение 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 В котором говорится (я думаю?), что navigator.mediaDevices.getDisplayMedia не поддерживается до Firefox 64 /65.

Но разве для этого не предназначен API adapter.js?Я думал, что adapter.js действовал как слой абстракции между спецификацией и различными реализациями браузера.

На данный момент я не знаю, что я делаю неправильно, я неправильно импортирую webrtc-адаптер в свой Angularпроект, неправильно истолковывающий спецификации?

Надеюсь, я предоставил вам достаточно информации, чтобы вы могли мне помочь, я был бы очень признателен за помощь в решении этой проблемы, потому что webRTC является новым для меня, и я не знаю, что делатьделать дальше.

Полезные ссылки, которые я нашел, пытаясь решить эту проблему:

Отправить экран в Firefox с помощью RTCMultiConnection

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

https://jsfiddle.net/jib1/q75yb8pf

Это решения о том, как решить эту проблему в javascript, но я не могу заставить ее работать в машинописи.

РЕДАКТИРОВАТЬ: Я получил его на работу, спасибона ответы Филиппа Ханке и Джиба я импортировал webrtc-адаптер следующим образом: 

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);
  }

Ответы [ 2 ]

0 голосов
/ 21 ноября 2018

Это работает для меня в 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 все еще заставляет приложение выбирать между общим доступомполный экран или окно.Это должно быть исправлено, как только оно будет поддерживаться изначально.

0 голосов
/ 21 ноября 2018

общий доступ к экрану по умолчанию не регулируется, см. сообщение о взломе Mozilla для получения инструкций по использованию getDisplayMedia.Также убедитесь, что вы используете последнюю версию файла adapter.js, getDisplayMedia недавно перемещен.

...