When i use this following script it works with normal browser. But when iframe is used then its showing me this error:

Does anyone know what is causing this and can be resolved?

ERROR:

channel message Object {type: "getScreenPending", id: 24504, request: 6} content.js:4
channel message Object {type: "gotScreen", id: 24504, request: 6} content.js:4
>>> ShareScreen: if any err NavigatorUserMediaError {constraintName: "", message: "", name: "InvalidStateError"} test.js:1616

manifest.json:

{
  "name": "Screen sharing",
  "description": "Screensharing utility",
  "version": "0.0.2",
  "manifest_version": 2,
  "minimum_chrome_version": "34",
  "icons": {
    "48" : "icon.png"
  },
  "permissions": [
    "desktopCapture"
  ],
  "background": {
    "scripts": ["background.js"]
  },
  "content_scripts": [ {
    "js": [ "content.js" ],
    "all_frames": true,
    "run_at": "document_start",
    "matches": ["*://*.a/*", "*://*.b/*"]
  }],
  "web_accessible_resources": [
        "icon.png"
  ]
}

background.js:

/* background page, responsible for actually choosing media */
chrome.runtime.onConnect.addListener(function (channel) {
    channel.onMessage.addListener(function (message) {
        switch(message.type) {
        case 'getScreen':
            var pending = chrome.desktopCapture.chooseDesktopMedia(message.options || ['screen', 'window'], 
                                                                   channel.sender.tab, function (streamid) {
                // municate this string to the app so it can call getUserMedia with it
                message.type = 'gotScreen';
                message.sourceId = streamid;
                channel.postMessage(message);
            });
            // let the app know that it can cancel the timeout
            message.type = 'getScreenPending';
            message.request = pending;
            channel.postMessage(message);
            break;
        case 'cancelGetScreen':
            chrome.desktopCapture.cancelChooseDesktopMedia(message.request);
            message.type = 'canceledGetScreen';
            channel.postMessage(message);
            break;
        }
    });
});

content.js:

/* the chrome content script which can listen to the page dom events */
var channel = chrome.runtime.connect();
channel.onMessage.addListener(function (message) {
    console.log('channel message', message);
    window.postMessage(message, '*');
});

window.addEventListener('message', function (event) {
    if (event.source != window)
        return;
    if (!event.data && (event.data.type == 'getScreen' || event.data.type == 'cancelGetScreen'))
        return;
    channel.postMessage(event.data);
});

When i use this following script it works with normal browser. But when iframe is used then its showing me this error:

Does anyone know what is causing this and can be resolved?

ERROR:

channel message Object {type: "getScreenPending", id: 24504, request: 6} content.js:4
channel message Object {type: "gotScreen", id: 24504, request: 6} content.js:4
>>> ShareScreen: if any err NavigatorUserMediaError {constraintName: "", message: "", name: "InvalidStateError"} test.js:1616

manifest.json:

{
  "name": "Screen sharing",
  "description": "Screensharing utility",
  "version": "0.0.2",
  "manifest_version": 2,
  "minimum_chrome_version": "34",
  "icons": {
    "48" : "icon.png"
  },
  "permissions": [
    "desktopCapture"
  ],
  "background": {
    "scripts": ["background.js"]
  },
  "content_scripts": [ {
    "js": [ "content.js" ],
    "all_frames": true,
    "run_at": "document_start",
    "matches": ["*://*.a./*", "*://*.b./*"]
  }],
  "web_accessible_resources": [
        "icon.png"
  ]
}

background.js:

/* background page, responsible for actually choosing media */
chrome.runtime.onConnect.addListener(function (channel) {
    channel.onMessage.addListener(function (message) {
        switch(message.type) {
        case 'getScreen':
            var pending = chrome.desktopCapture.chooseDesktopMedia(message.options || ['screen', 'window'], 
                                                                   channel.sender.tab, function (streamid) {
                // municate this string to the app so it can call getUserMedia with it
                message.type = 'gotScreen';
                message.sourceId = streamid;
                channel.postMessage(message);
            });
            // let the app know that it can cancel the timeout
            message.type = 'getScreenPending';
            message.request = pending;
            channel.postMessage(message);
            break;
        case 'cancelGetScreen':
            chrome.desktopCapture.cancelChooseDesktopMedia(message.request);
            message.type = 'canceledGetScreen';
            channel.postMessage(message);
            break;
        }
    });
});

content.js:

/* the chrome content script which can listen to the page dom events */
var channel = chrome.runtime.connect();
channel.onMessage.addListener(function (message) {
    console.log('channel message', message);
    window.postMessage(message, '*');
});

window.addEventListener('message', function (event) {
    if (event.source != window)
        return;
    if (!event.data && (event.data.type == 'getScreen' || event.data.type == 'cancelGetScreen'))
        return;
    channel.postMessage(event.data);
});

• javascript
• google-chrome
• iframe
• google-chrome-extension
• webrtc

Share Improve this question Follow asked Oct 17, 2014 at 11:48 user285594user285594 7

• when i run the iframe from same subdomain subdomain.maindomain./test.php (iframe src=subdomain.maindomain./core.php) then it works. But when i am running it as maindomain./otherpages (iframe src=subdomain.maindomain./core.php) then this is not working. Very confusing. – user285594 Commented Oct 17, 2014 at 19:54
• Could you edit your question and include that information? That kind of information is very relevant to your question. And which version of Chrome are you using? – Rob W Commented Oct 17, 2014 at 20:03
• @Rob W: i was wrong my answer is not correct. Today i was testing again and its still throwing the same error. – user285594 Commented Oct 20, 2014 at 13:56
• I'm willing to look into your issue if you create a demo page where the problem in your question can be verified. Don't forget to mention which version of Chrome and which OS you're using. – Rob W Commented Oct 20, 2014 at 14:01
• OK - i will prepare that link (if you do not mind, is there any way confidentially i can send this link to you like private or so? because for the pany i am working i had NDA signed as temporary task). Google Chrome M38 and Canary latest with Windows 7, 8.1 64-bit and OSX 10.9.4 its happening, also with Linux Ubuntu 12.04, 14.04 64-bit same issue. Thank you very much. – user285594 Commented Oct 20, 2014 at 14:27

 |  Show 2 more ments

2 Answers 2

Sorted by: Reset to default 5

This is caused by the fact that the a stream can only be used by frames whose URL match the origin of the tab. Starting with Chrome 40, you can use the stream in frames as well if you set tab.url to a URL whose origin matches the frame (crbug./425344).

The stream is only valid for ten seconds, so you have to follow the following flow:

1. Load the iframe that contains the page that should handle the stream. This page must be served from a secure scheme, e.g. https: or chrome-extension:.
2. Send the frame's origin (location.origin) to the background page.
3. Request the desktop stream using the tab info, with tab.url set to the frame's URL or origin.
4. Send the streamId back to the frame and use it (within ten seconds).

Example (based on the code in the question):

var tab = channel.sender.tab;
// NEW (Chrome 40+)
tab.url = message.url; // Your custom message, e.g. {url: location.origin}
chrome.desktopCapture.chooseDesktopMedia(['screen', 'window'], tab,
    function (streamid) {
        // ... see question for the rest of the code
    });

1 - this is not a code problem, browser problem

2 - this is not working because i am launching the extension from HTTP (http://www.maindomain.) using iframe a HTTPS (https://subdomain.maindomain.) link which is using the browser extension

So to fix it. I needed to use HTTPS (https://www.maindomain.) opening HTTPS iframe links (https://subdomain.maindomain.) . Since then it works now.

Hope this help others.

NOTE: problem occurred: when i run the iframe from same subdomain subdomain.maindomain./test.php (iframe src=subdomain.maindomain./core.php) then it works. But when i am running it as maindomain./otherpages (iframe src=subdomain.maindomain./core.php) then this is not working. Was very confusing.

EDIT: This still did not resolved the problem. screen share dialog box opens but when i press share screen then it gives same error and fails.