Screensharing in Angular 6 in Firefox

Question

I'm making an Angular application and I need to be able to share the users screen. I'm using adapter.js version 6.4.8 and testing it in Firefox Developer 64.0b11 & Firefox 63.0.3, I know there are a lot of differences in implementations between browsers. I want to make the application work in Firefox at least, if I can support more browsers that's even better.

After running the following command

npm install webrtc-adapter && @types/webrtc

I imported the adapter like this: import 'webrtc-adapter'

There are a lot of changes being made around capturing screens in webRTC recently it seems, the most recent draft of WebRTC specs says you have to implement screencapture like this:

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

Using this method gives the error in both versions of Firefox:

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

Also, in the node CLI if gives me this error:

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

I also found this post: https://groups.google.com/forum/#!topic/mozilla.dev.platform/20EhEy_ahKg Which states (I think?) that the navigator.mediaDevices.getDisplayMedia is not supported until Firefox 64/65.

But isn't that what the adapter.js API is for? I thought adapter.js acted as an abstraction layer between the spec and different browser implementations.

At this point I don't know what I'm doing wrong, am I importing the webrtc-adapter wrong in my Angular project, interpreting the specs wrong?

I hope I provided you with enough information for you to help me, I'd really appreciate help with this problem because webRTC is new to me and I don't know what to do next.

Handy links I found trying to solve this problem:

Share screen in Firefox using RTCMultiConnection

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

https://jsfiddle.net/jib1/q75yb8pf

These are solutions of how to solve this problem in javascript, but I can't seem to make it work in typescript.

EDIT: I got it to work thanks to the answers of Philipp Hancke & jib, what I did is import the webrtc-adapter like this:

import adapter from "webrtc-adapter";

And called it from my code like this:

    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

screensharing is not shimmed by default, see the mozilla hacks post for instructions how to use getDisplayMedia. Also make sure you are using the latest adapter.js version, getDisplayMedia moved recently.

Answer 2

It works for me in Firefox with 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);
  }
})();

Unfortunately, Firefox still forces the app to pick between sharing the full screen or a window. This should be fixed once it's supported natively.