SourceUnavailbleError when requesting getUserMedia for video from about: page

Add-ons Development
#1

Requesting mic with audio:true works perfectly fine, however requesting webcam video, or screen video is failing with SourceUnavailbleError. I have added the string of browser to the preference media.getusermedia.screensharing.allowed_domains

Code for requesting webcam video:

        var param = {
            // audio: true, // if just this it works fine
            video: true // {mediaSource: 'screen'} does not work either
        };
        navigator.mediaDevices.getUserMedia(param).then(function(stream) {
            console.log('success');
        })
        .catch(function(err) {
            console.error('err:', err)
        });

To reproduce this error, open up browser console, and paste the code above like this:

nL4wSdH.png1531×322

Error given is:

err: MediaStreamError { name: "SourceUnavailableError", message: "Failed to allocate videosource", constraint: "", stack: "" }

Do you know how I can get around this SourceUnvailableError?

I did a lot of digging here - https://dxr.mozilla.org/mozilla-central/source/browser/modules/webrtcUI.jsm#201 - but no success yet.

Thanks