title: Screensharing in Angular 6 in Firefox
body: <p>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 &amp; 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.</p>
  
  <p>After running the following command</p>
  
  <pre><code>npm install webrtc-adapter &amp;&amp; @types/webrtc
  </code></pre>
  
  <p>I imported the adapter like this:
  <a href="https://i.stack.imgur.com/MBeHB.png" rel="nofollow noreferrer">import 'webrtc-adapter'</a></p>
  
  <p>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:</p>
  
  <pre><code>try {
    let mediaStream = await navigator.mediaDevices.getDisplayMedia({video:true});
    videoElement.srcObject = mediaStream;
  } catch (e) {
    console.log('Unable to acquire screen capture: ' + e);
  }
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/25m4l.png" rel="nofollow noreferrer">Implementation in my project</a></p>
  
  <p>Using this method gives the error in both versions of Firefox: </p>
  
  <pre><code>TypeError: "navigator.mediaDevices.getDisplayMedia is not a function"
  </code></pre>
  
  <p>Also, in the node CLI if gives me this error:</p>
  
  <pre><code>ERROR in src/app/video/video.component.ts(32,52): error TS2339: Property 'getDisplayMedia' does not exist on type 'MediaDevices'.
  </code></pre>
  
  <p>I also found this post: 
  <a href="https://groups.google.com/forum/#!topic/mozilla.dev.platform/20EhEy_ahKg" rel="nofollow noreferrer">https://groups.google.com/forum/#!topic/mozilla.dev.platform/20EhEy_ahKg</a>
  Which states (I think?) that the navigator.mediaDevices.getDisplayMedia is not supported until Firefox 64/65.</p>
  
  <p>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.</p>
  
  <p>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?</p>
  
  <p>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.</p>
  
  <p>Handy links I found trying to solve this problem:</p>
  
  <p><a href="https://stackoverflow.com/questions/53350985/share-screen-in-firefox-using-rtcmulticonnection/53352888#53352888">Share screen in Firefox using RTCMultiConnection</a></p>
  
  <p><a href="https://blog.mozilla.org/webrtc/getdisplaymedia-now-available-in-adapter-js/" rel="nofollow noreferrer">https://blog.mozilla.org/webrtc/getdisplaymedia-now-available-in-adapter-js/</a></p>
  
  <p><a href="https://jsfiddle.net/jib1/q75yb8pf" rel="nofollow noreferrer">https://jsfiddle.net/jib1/q75yb8pf</a></p>
  
  <p>These are solutions of how to solve this problem in javascript, but I can't seem to make it work in typescript.</p>
  
  <p>EDIT: I got it to work thanks to the answers of Philipp Hancke &amp; jib, what I did is import the webrtc-adapter like this:</p>
  
  <pre><code>import adapter from "webrtc-adapter";
  </code></pre>
  
  <p>And called it from my code like this:</p>
  
  <pre><code>    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);
    }
  </code></pre>