InvalidStateError on Screen Sharing from extension

[sojharo]

Salaam,

I have used the code of your Screen Sharing extension to upload my own extension. I successfully uploaded it and it can also be installed inline. After this, I used your following code to communicate to extension to get source id:

    // todo: need to check exact chrome browser because opera also uses chromium framework
    var isChrome = !!navigator.webkitGetUserMedia;

    // DetectRTC.js - https://github.com/muaz-khan/WebRTC-Experiment/tree/master/DetectRTC
    // Below code is taken from RTCMultiConnection-v1.8.js (http://www.rtcmulticonnection.org/changes-log/#v1.8)
    var DetectRTC = {};

    (function () {
        var screenCallback;

        DetectRTC.screen = {
            chromeMediaSource: 'screen',
            getSourceId: function (callback) {
                if (!callback) throw '"callback" parameter is mandatory.';
                screenCallback = callback;
                window.postMessage('get-sourceId', '*');
            },
            isChromeExtensionAvailable: function (callback) {
                if (!callback) return;

                if (DetectRTC.screen.chromeMediaSource == 'desktop') callback(true);

                // ask extension if it is available
                window.postMessage('are-you-there', '*');

                setTimeout(function () {
                    if (DetectRTC.screen.chromeMediaSource == 'screen') {
                        callback(false);
                    } else callback(true);
                }, 2000);
            },
            onMessageCallback: function (data) {
                console.log('chrome message', data);

                // "cancel" button is clicked
                if (data == 'PermissionDeniedError') {
                    DetectRTC.screen.chromeMediaSource = 'PermissionDeniedError';
                    if (screenCallback) return screenCallback('PermissionDeniedError');
                    else throw new Error('PermissionDeniedError');
                }

                // extension notified his presence
                if (data == 'kiboconnection-extension-loaded') {
                    DetectRTC.screen.chromeMediaSource = 'desktop';
                }

                // extension shared temp sourceId
                if (data.sourceId) {
                    DetectRTC.screen.sourceId = data.sourceId;
                    if (screenCallback) screenCallback(DetectRTC.screen.sourceId);
                }
            }
        };

        // check if desktop-capture extension installed.
        if (window.postMessage && isChrome) {
            DetectRTC.screen.isChromeExtensionAvailable(function (status) {
                $scope.extensionAvailable = !status;
            });
        }
    })();


    window.addEventListener('message', function (event) {
        if (event.origin != window.location.origin) {
            return;
        }

        //console.log('THIS IS THE EVENT')
        //console.log(event)

        DetectRTC.screen.onMessageCallback(event.data);
    });

    //-----------------//

    function captureUserMedia(onStreamApproved) {
        // this statement defines getUserMedia constraints
        // that will be used to capture content of screen
        var screen_constraints = {
            mandatory: {
                chromeMediaSource: DetectRTC.screen.chromeMediaSource,
                maxWidth: 1920,
                maxHeight: 1080,
                minAspectRatio: 1.77
            },
            optional: []
        };

        // this statement verifies chrome extension availability
        // if installed and available then it will invoke extension API
        // otherwise it will fallback to command-line based screen capturing API
        if (DetectRTC.screen.chromeMediaSource == 'desktop' && !DetectRTC.screen.sourceId) {
            DetectRTC.screen.getSourceId(function (error) {
                // if exception occurred or access denied
                if (error && error == 'PermissionDeniedError') {
                    alert('PermissionDeniedError: User denied to share content of his screen.');
                }

                captureUserMedia(onStreamApproved);
            });
            return;
        }

        console.log(DetectRTC.screen.chromeMediaSource)

        // this statement sets gets 'sourceId" and sets "chromeMediaSourceId"
        if (DetectRTC.screen.chromeMediaSource == 'desktop') {
            screen_constraints.mandatory.chromeMediaSourceId = DetectRTC.screen.sourceId;
        }

        // it is the session that we want to be captured
        // audio must be false
        var session = {
            audio: false,
            video: screen_constraints
        };

        // now invoking native getUserMedia API
        navigator.webkitGetUserMedia(session, onStreamApproved, OnStreamDenied);

    }

It successfully shares the screen for the first time. However, when I stop screen sharing using screenStream.stop() and then when I again try to share the screen, it gives the following error to me.

{"constraintName":"","message":"","name":"InvalidStateError"}

I then went to your demo to see if I am able reproduce the same error there too but there was no option to stop the screen sharing and starting again.

Have you ever come across this error? Can you help why does this occur? and how would one solve this?

[muaz-khan]

Please try this demo (v2.2.2):

• https://www.webrtc-experiment.com/RTCMultiConnection/all-in-one.html

Share audio+video with two/three users. After successful connection, paste following in the console:

connection.addStream({ screen: true, oneway: true })

Now, you can manually stop screen by pasting this snippet:

connection.removeStream({ screen: true, stop: true })

Now you can reshare NEW screen:

connection.addStream({ screen: true, oneway: true })

And it'll work all the time.

[Dido2010]

why always this message ? User denied to share his screen.

[DasPartyEinhorn]

I had the same problem. See here solution is to set sourceId to null after closing Screensharing because in the capture-screen.js this is stored globally and reused.

[tocilla]

@DasPartyEinhorn thank you!

[imidimi]

connection.addStream({ screen: true, oneway: true })

This is giving DOM Exception to me