Screensharing in Angular 6 in Firefox












1















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









share|improve this question





























    1















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









    share|improve this question



























      1












      1








      1








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









      share|improve this 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);
      }






      angular firefox webrtc screensharing get-display-media






      share|improve this question















      share|improve this question













      share|improve this question




      share|improve this question








      edited Dec 24 '18 at 14:39









      jib

      21.1k64491




      21.1k64491










      asked Nov 21 '18 at 19:39









      RobbeVRobbeV

      83




      83
























          2 Answers
          2






          active

          oldest

          votes


















          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.






          share|improve this answer
























          • When trying to use adapter.browserDetails.browser & adapter.browserShim.shimGetDisplayMedia() typescript gives the following error: [ts] Cannot find name 'adapter'. [2304], do you know why this is? It seems like it doesn't know what adapter is and can't access. Is it a problem with the importing of webrtc-adapter? I'm using version 6.4.8 of webrtc-adapter which is the latest.

            – RobbeV
            Nov 21 '18 at 20:01













          • try importing like this: import adapter from "webrtc-adapter"; beyond that it might be a typescript thing which i know nothing about.

            – Philipp Hancke
            Nov 21 '18 at 20:35











          • Yeah that did the job, thanks a lot! And keep up the good work ;)

            – RobbeV
            Nov 21 '18 at 20:39



















          0














          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.






          share|improve this answer























            Your Answer






            StackExchange.ifUsing("editor", function () {
            StackExchange.using("externalEditor", function () {
            StackExchange.using("snippets", function () {
            StackExchange.snippets.init();
            });
            });
            }, "code-snippets");

            StackExchange.ready(function() {
            var channelOptions = {
            tags: "".split(" "),
            id: "1"
            };
            initTagRenderer("".split(" "), "".split(" "), channelOptions);

            StackExchange.using("externalEditor", function() {
            // Have to fire editor after snippets, if snippets enabled
            if (StackExchange.settings.snippets.snippetsEnabled) {
            StackExchange.using("snippets", function() {
            createEditor();
            });
            }
            else {
            createEditor();
            }
            });

            function createEditor() {
            StackExchange.prepareEditor({
            heartbeatType: 'answer',
            autoActivateHeartbeat: false,
            convertImagesToLinks: true,
            noModals: true,
            showLowRepImageUploadWarning: true,
            reputationToPostImages: 10,
            bindNavPrevention: true,
            postfix: "",
            imageUploader: {
            brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
            contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
            allowUrls: true
            },
            onDemand: true,
            discardSelector: ".discard-answer"
            ,immediatelyShowMarkdownHelp:true
            });


            }
            });














            draft saved

            draft discarded


















            StackExchange.ready(
            function () {
            StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53419415%2fscreensharing-in-angular-6-in-firefox%23new-answer', 'question_page');
            }
            );

            Post as a guest















            Required, but never shown

























            2 Answers
            2






            active

            oldest

            votes








            2 Answers
            2






            active

            oldest

            votes









            active

            oldest

            votes






            active

            oldest

            votes









            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.






            share|improve this answer
























            • When trying to use adapter.browserDetails.browser & adapter.browserShim.shimGetDisplayMedia() typescript gives the following error: [ts] Cannot find name 'adapter'. [2304], do you know why this is? It seems like it doesn't know what adapter is and can't access. Is it a problem with the importing of webrtc-adapter? I'm using version 6.4.8 of webrtc-adapter which is the latest.

              – RobbeV
              Nov 21 '18 at 20:01













            • try importing like this: import adapter from "webrtc-adapter"; beyond that it might be a typescript thing which i know nothing about.

              – Philipp Hancke
              Nov 21 '18 at 20:35











            • Yeah that did the job, thanks a lot! And keep up the good work ;)

              – RobbeV
              Nov 21 '18 at 20:39
















            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.






            share|improve this answer
























            • When trying to use adapter.browserDetails.browser & adapter.browserShim.shimGetDisplayMedia() typescript gives the following error: [ts] Cannot find name 'adapter'. [2304], do you know why this is? It seems like it doesn't know what adapter is and can't access. Is it a problem with the importing of webrtc-adapter? I'm using version 6.4.8 of webrtc-adapter which is the latest.

              – RobbeV
              Nov 21 '18 at 20:01













            • try importing like this: import adapter from "webrtc-adapter"; beyond that it might be a typescript thing which i know nothing about.

              – Philipp Hancke
              Nov 21 '18 at 20:35











            • Yeah that did the job, thanks a lot! And keep up the good work ;)

              – RobbeV
              Nov 21 '18 at 20:39














            1












            1








            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.






            share|improve this answer













            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.







            share|improve this answer












            share|improve this answer



            share|improve this answer










            answered Nov 21 '18 at 19:47









            Philipp HanckePhilipp Hancke

            6,4791513




            6,4791513













            • When trying to use adapter.browserDetails.browser & adapter.browserShim.shimGetDisplayMedia() typescript gives the following error: [ts] Cannot find name 'adapter'. [2304], do you know why this is? It seems like it doesn't know what adapter is and can't access. Is it a problem with the importing of webrtc-adapter? I'm using version 6.4.8 of webrtc-adapter which is the latest.

              – RobbeV
              Nov 21 '18 at 20:01













            • try importing like this: import adapter from "webrtc-adapter"; beyond that it might be a typescript thing which i know nothing about.

              – Philipp Hancke
              Nov 21 '18 at 20:35











            • Yeah that did the job, thanks a lot! And keep up the good work ;)

              – RobbeV
              Nov 21 '18 at 20:39



















            • When trying to use adapter.browserDetails.browser & adapter.browserShim.shimGetDisplayMedia() typescript gives the following error: [ts] Cannot find name 'adapter'. [2304], do you know why this is? It seems like it doesn't know what adapter is and can't access. Is it a problem with the importing of webrtc-adapter? I'm using version 6.4.8 of webrtc-adapter which is the latest.

              – RobbeV
              Nov 21 '18 at 20:01













            • try importing like this: import adapter from "webrtc-adapter"; beyond that it might be a typescript thing which i know nothing about.

              – Philipp Hancke
              Nov 21 '18 at 20:35











            • Yeah that did the job, thanks a lot! And keep up the good work ;)

              – RobbeV
              Nov 21 '18 at 20:39

















            When trying to use adapter.browserDetails.browser & adapter.browserShim.shimGetDisplayMedia() typescript gives the following error: [ts] Cannot find name 'adapter'. [2304], do you know why this is? It seems like it doesn't know what adapter is and can't access. Is it a problem with the importing of webrtc-adapter? I'm using version 6.4.8 of webrtc-adapter which is the latest.

            – RobbeV
            Nov 21 '18 at 20:01







            When trying to use adapter.browserDetails.browser & adapter.browserShim.shimGetDisplayMedia() typescript gives the following error: [ts] Cannot find name 'adapter'. [2304], do you know why this is? It seems like it doesn't know what adapter is and can't access. Is it a problem with the importing of webrtc-adapter? I'm using version 6.4.8 of webrtc-adapter which is the latest.

            – RobbeV
            Nov 21 '18 at 20:01















            try importing like this: import adapter from "webrtc-adapter"; beyond that it might be a typescript thing which i know nothing about.

            – Philipp Hancke
            Nov 21 '18 at 20:35





            try importing like this: import adapter from "webrtc-adapter"; beyond that it might be a typescript thing which i know nothing about.

            – Philipp Hancke
            Nov 21 '18 at 20:35













            Yeah that did the job, thanks a lot! And keep up the good work ;)

            – RobbeV
            Nov 21 '18 at 20:39





            Yeah that did the job, thanks a lot! And keep up the good work ;)

            – RobbeV
            Nov 21 '18 at 20:39













            0














            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.






            share|improve this answer




























              0














              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.






              share|improve this answer


























                0












                0








                0







                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.






                share|improve this answer













                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.







                share|improve this answer












                share|improve this answer



                share|improve this answer










                answered Nov 21 '18 at 20:39









                jibjib

                21.1k64491




                21.1k64491






























                    draft saved

                    draft discarded




















































                    Thanks for contributing an answer to Stack Overflow!


                    • Please be sure to answer the question. Provide details and share your research!

                    But avoid



                    • Asking for help, clarification, or responding to other answers.

                    • Making statements based on opinion; back them up with references or personal experience.


                    To learn more, see our tips on writing great answers.




                    draft saved


                    draft discarded














                    StackExchange.ready(
                    function () {
                    StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53419415%2fscreensharing-in-angular-6-in-firefox%23new-answer', 'question_page');
                    }
                    );

                    Post as a guest















                    Required, but never shown





















































                    Required, but never shown














                    Required, but never shown












                    Required, but never shown







                    Required, but never shown

































                    Required, but never shown














                    Required, but never shown












                    Required, but never shown







                    Required, but never shown







                    Popular posts from this blog

                    android studio warns about leanback feature tag usage required on manifest while using Unity exported app?

                    SQL update select statement

                    'app-layout' is not a known element: how to share Component with different Modules