CODEWITHSUNDEEP
firefoxfirefox-addonfirefox-developer-tools
Running Rabbit
Running Rabbit

Reputation: 2720

How to make use of screen sharing in Firefox with the help of navigator.getUserMedia?

I want to create a screen sharing extension. I have tried certain examples that are provided by Muas Khan on GitHub, but its hard to implement them in you code if you are a newbie to WebRTC. Can I achieve screen sharing with the use of navigator.getUserMedia? Keep in mind that I am using Firefox and I do not want to use my webcam as I am only sharing my screen. Can I write the below code?

window.navigator = window.navigator || {};
navigator.getUserMedia = navigator.getUserMedia ||
                         navigator.webkitGetUserMedia ||
                         navigator.mozGetUserMedia ||
                         null;

if (navigator.getUserMedia === null) {
   // document.getElementById('gum-unsupported').classList.remove('hidden');
    document.getElementById('videorecorderplay-button- recorder').setAttribute('disabled', 'disabled');
    document.getElementById('videorecorderstop-button-recorder').setAttribute('disabled', 'disabled');
} else {
    // Opera <= 12.16 accepts the direct stream.
    // More on this here: http://dev.opera.com/articles/view/playing-with-html5-video-and-getusermedia-support/
    var createSrc = window.URL ? window.URL.createObjectURL : function (stream) { return stream; };

    // Opera <= 12.16 support video only.
    var audioContext = window.AudioContext ||
                       window.webkitAudioContext ||
                       null;
    if (audioContext === null) {
        document.getElementById('gum-partially-supported').classList.remove('hidden');
    }

    document.getElementById('videorecorderplay-button-recorder').addEventListener('click', function () {
        debugger;
        // Capture user's audio and video source
        navigator.getUserMedia({
            video: {mandatory:{chromemediasource:'screen'}
    },
            audio: true
        },
        function (stream) {
            videoStream = stream;
            // Stream the data
            video.src = createSrc(stream);
            video.play();
        },
        function (error) {
            console.log("Video capture error: ", error.code);
        });
    });
    document.getElementById('videorecorderstop-button-recorder').addEventListener('click', function () {
        // Pause the video
        video.pause();
        // Stop the stream
        videoStream.stop();
    });

Its actually not working for me. Where am I missing?

Upvotes: 2

Views: 2063

Answers (1)

mido
mido

Reputation: 25034

screen sharing constraints are different in chrome and firefox, in firefox, it is:

navigator.getUserMedia({ video: {
   mediaSource: "window"       // options are 'screen' ‘window‘ or ‘application‘
}}).then(stream => ...)

also make sure that in about:config the below flags are set properly:

  • media.getusermedia.screensharing.allowed_domains list includes the domain of your application.
  • media.getusermedia.screensharing.enabled is set as true

Upvotes: 1

Related Questions