Cannot screenshare from within iframe Cross domain. InvalidStateError #6212

andyryan · 2017-10-17T14:23:31Z

I have an app that is connecting to a webapp across domains through an iframe. This embedded app is trying to initialise a screen share but the getUserMedia request fails with InvalidStateError.

I have tried using both the chooseDesktopMedia and DesktopCaptureMonitor(and yes I am remembering to use registerStream functions and both lead to the same error on getUserMedia.

Note: this flow works correctly on Chrome. Even cross domain.

The text was updated successfully, but these errors were encountered:

Christywl · 2017-10-18T08:48:28Z

Could you please share your sample to reproduce this issue?

andyryan · 2017-10-18T10:44:43Z

I can't share the actual code due to IP, but heres roughly what it's doing.

Parent frame

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script type="text/javascript" src="demo.js"></script>
    <link rel="stylesheet" type="text/css" href="demo.css" >
</head>
<body>
    <iframe src="{some other domain}" style="width:100%; height:400px;"></iframe>
</body>
</html>

embedded iframe

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script type="text/javascript" src="demo.js"></script>
    <link rel="stylesheet" type="text/css" href="demo.css" >
</head>
<body>
    <div class="screen-share-demo">
        <video id="screen-share" autoplay></video>
        <div class="tools">
        <button onclick="chooseDesktopMedia()">screen.chooseDesktopMedia</button>
        </div>
    </div>
</body>
</html>

demo.js

function chooseDesktopMedia(){
    if(nw.Screen.Init){
        nw.Screen.Init();
    }
    nw.Screen.chooseDesktopMedia(["screen"],function(streamId){
        if(streamId) {
            var conf = {
                mandatory: {
                    chromeMediaSource: 'desktop',
                    chromeMediaSourceId: streamId,
                    maxWidth: 1920,
                    maxHeight: 1080
                },
                optional: []
            };
            console.log("[nw.chooseDesktopMedia] stream id:" + streamId);
            showScreenShare({audio: false, video: conf});
        }
    })
}

function showScreenShare(conf){
    var ve = document.getElementById("screen-share");

   navigator.mediaDevices.getUserMedia(conf)
    .then(function(stream){
        var url = window.URL.createObjectURL(stream);
        ve.src = url;
    })
    .catch(function(e){
        console.log(e);
        alert(e);
    });

}

NOTE: bug only occurs when the iframe src is on a separate domain

andyryan · 2017-10-18T14:06:27Z

Tried something new today. I tried getting the iFrame to request that the parent frame get the media source ID and passing that back to the iframe and the iframe initiating screen sharing. Still no luck.

Another thing I have tried is the --disable-web-security and --no-sandbox chromium launch flags and they don't work either

rogerwang · 2017-10-19T02:37:30Z

@andyryan could you please extract some minimal reproducible case from the app. It would be best if the same code works in Chrome but breaks in NW. PS, you can use nw --url= to test any web page.

andyryan · 2017-10-19T12:40:06Z

Does the above code not reproduce?

Christywl · 2017-10-23T06:55:24Z

I try to reproduce this with the codes above:

Set up a http-server(npm) and put the iframe html and demo.js in this server.
Replace src to my server address http://*****:8080/child.html in index.html.
Add chromium-args in package.json due to my server is http, or it will throw NotSupportedError: Only secure origins are allowed:

{
    "name": "6212",
    "main": "index.html",
    "nodejs":true,
    "chromium-args": "--unsafely-treat-insecure-origin-as-secure=http://*****:8080",
    "node-remote": "<all_urls>"
}

Launch the app with nwjs-sdk-v0.26.0, and click the screen.chooseDesktopMedia button:

note: please ignore demo.css error.

@andyryan , is the result same as yours? And please let me know if there are some wrong steps.

andyryan · 2017-10-23T07:24:03Z

Yes thats what I'm seeing precisely. Thanks for reproducing.

One thing that may be of note. I've managed to work around this by using a reverse proxy to give the appearance that the contents of the iframe and from the same domain. This seems to have ben successful.

However I also tried changing the document.domain property so both were the same (as they only had different subdomains in the first place) however that alone did not seem to fix the problem

rogerwang · 2017-10-24T05:41:53Z

@Christywl since OP said "this flow works correctly on Chrome. Even cross domain.", could you please try it in Chrome browser?

Christywl · 2017-10-24T07:42:52Z

I have no idea about how to check it on chrome browser. I remove nw and modify the codes to chrome.desktopCapture.chooseDesktopMedia and open index.html with chrome, but it returns undefined.
@andyryan , could you please kindly tell me how to check this on Chrome?

andyryan · 2017-10-24T09:18:27Z

Screensharing with Chrome is only possible from an extension which must be called from your app

rogerwang · 2017-10-31T13:31:43Z

This is fixed in git and will be available in the next nightly build.

rogerwang · 2017-11-01T02:14:06Z

https://dl.nwjs.io/live-build/11-01-2017/nw26-95c0990-9d2f46a-e2f0133-7d1aaec/v0.26.3/

…n. InvalidStateError #6212

…s domain. InvalidStateError #6212

Christywl added the needinfo label Oct 18, 2017

Christywl assigned rogerwang Oct 23, 2017

Christywl added bug P2 triaged and removed needinfo labels Oct 23, 2017

rogerwang added the WIP label Oct 31, 2017

rogerwang closed this as completed Oct 31, 2017

rogerwang added test-todo and removed WIP labels Oct 31, 2017

rogerwang added a commit that referenced this issue Nov 1, 2017

[test] add test for Cannot screenshare from within iframe Cross domai…

0c7246f

…n. InvalidStateError #6212

rogerwang removed the test-todo label Nov 1, 2017

rogerwang added a commit that referenced this issue Nov 2, 2017

fixup! [test] add test for Cannot screenshare from within iframe Cros…

4cb1aea

…s domain. InvalidStateError #6212

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Cannot screenshare from within iframe Cross domain. InvalidStateError #6212

Cannot screenshare from within iframe Cross domain. InvalidStateError #6212

andyryan commented Oct 17, 2017

Christywl commented Oct 18, 2017

andyryan commented Oct 18, 2017

andyryan commented Oct 18, 2017

rogerwang commented Oct 19, 2017

andyryan commented Oct 19, 2017

Christywl commented Oct 23, 2017

andyryan commented Oct 23, 2017

rogerwang commented Oct 24, 2017

Christywl commented Oct 24, 2017

andyryan commented Oct 24, 2017

rogerwang commented Oct 31, 2017

rogerwang commented Nov 1, 2017

Cannot screenshare from within iframe Cross domain. InvalidStateError #6212

Cannot screenshare from within iframe Cross domain. InvalidStateError #6212

Comments

andyryan commented Oct 17, 2017

Christywl commented Oct 18, 2017

andyryan commented Oct 18, 2017

andyryan commented Oct 18, 2017

rogerwang commented Oct 19, 2017

andyryan commented Oct 19, 2017

Christywl commented Oct 23, 2017

andyryan commented Oct 23, 2017

rogerwang commented Oct 24, 2017

Christywl commented Oct 24, 2017

andyryan commented Oct 24, 2017

rogerwang commented Oct 31, 2017

rogerwang commented Nov 1, 2017