Javascript Google Chrome-当使用iframe时屏幕捕获失败，相同的脚本在没有iframe的情况下工作

当我使用以下脚本时，它与普通浏览器一起工作。但当使用iframe时，它会向我显示以下错误：

有人知道这是什么原因导致的，并且可以解决吗

错误：

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.com/*", "*://*.b.com/*"]
  }],
  "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) {
                // communicate 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);
});

---

1-这不是代码问题，而是浏览器问题

2-这不起作用，因为我正在使用使用浏览器扩展的HTTPS（）链接从HTTP（）启动扩展

因此，我们需要修复它。我需要使用HTTPS（）打开HTTPS iframe链接（）。从那时起，它现在起作用了

希望这能帮助别人

---

注意：出现问题：当我从同一子域subdomain.maindomain.com/test.php（iframe src=subdomain.maindomain.com/core.php）运行iframe时，它就工作了。但是当我以maindomain.com/otherpages（iframe src=subdomain.maindomain.com/core.php）的形式运行它时，这就不起作用了。这很令人困惑

---

编辑：这仍然没有解决问题。屏幕共享对话框打开，但当我按share screen时，它会出现相同的错误并失败。

这是因为a流只能由URL与选项卡原点匹配的帧使用。从Chrome40开始，如果您将

tab.url

设置为其原点与框架匹配的url（），则也可以在框架中使用流

该流仅在10秒钟内有效，因此您必须遵循以下流程：

加载包含应处理流的页面的iframe。此页面必须通过安全方案提供，例如

https:

或

chrome扩展名：

将帧的原点（

location.origin

）发送到背景页

使用选项卡信息请求桌面流，将

tab.url

设置为框架的url或原点

将streamId发送回帧并使用它（在10秒内）

示例（基于问题中的代码）：

var-tab=channel.sender.tab；
//新（铬40+）
tab.url=message.url；//您的自定义消息，例如{url:location.origin}
chrome.desktopCapture.chooseDesktopMedia（['screen'，'window']，tab，
函数（streamid）{
//…有关代码的其余部分，请参见问题
});

当我从同一子域（iframe src=）运行iframe时，它就会工作。但是当我以（iframe src=）的形式运行它时，这就不起作用了。非常混乱。你能编辑你的问题并包含这些信息吗？这类信息与你的问题非常相关。你使用的是哪个版本的Chrome？请看我的答案，它正在工作。感谢you@RobW：我错了，我的答案不对。今天我再次测试，仍然抛出相同的错误。如果你创建一个演示页面，可以验证你问题中的问题，我愿意研究你的问题。别忘了提及你使用的是哪个版本的Chrome和哪个操作系统。