谷歌Chrome-使用iframe时屏幕捕获失败，相同的脚本在没有iframe的情况下也能工作

Google Chrome - Screen capture failing when iframe is used, same script works without iframe

本文关键字：iframe 脚本 情况下 工作 使用 Chrome- 屏幕 失败 谷歌      更新时间：2023-09-26

当我使用以下脚本时，它可以与普通浏览器一起使用。但当使用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);
});

这是由于a流只能由URL与选项卡原点匹配的帧使用。从Chrome 40开始，如果将tab.url设置为原点与帧匹配的URL（crbug.com/425344），则也可以在帧中使用该流。

流的有效期仅为10秒，因此您必须遵循以下流程：

  1. 加载包含应该处理流的页面的iframe。此页面必须通过安全方案提供服务，例如https:或chrome-extension:
  2. 将帧的原点（location.origin）发送到背景页
  3. 使用选项卡信息请求桌面流，tab.url设置为帧的URL或原点
  4. 将streamId发送回帧并使用它（在10秒内）

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

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-这不是代码问题，浏览器问题

2-这不起作用，因为我正在从HTTP启动扩展(http://www.maindomain.com)使用iframe作为HTTPS(https://subdomain.maindomain.com)使用浏览器扩展的链接

所以要修复它。我需要使用HTTPS(https://www.maindomain.com)打开HTTPS iframe链接(https://subdomain.maindomain.com)。从那时起，它现在起作用了。

希望这能帮助其他人。

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

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

相关文章：