在 iframe 中请求屏幕共享答案

【问题标题】：Request Screen Share Within iframe在 iframe 中请求屏幕共享
【发布时间】：2017-06-01 08:29:36
【问题描述】：

我已经构建了一个 Chrome 扩展程序，它成功地实现了与 WebRTC 的屏幕共享，但是需要使用该扩展程序在 iframe 中运行的站点。

有可能实现吗？下面是我的代码示例 - 在 iframe 中始终执行“未知”案例。

function getUserScreen(sources, extensionId) {
    const request = {
            type: 'getUserScreen',
            sources: sources
    };
    return new Promise((resolve, reject) => {
        chrome.runtime.sendMessage(extensionId, request, response => {
            switch (response && response.type) {
                case 'success':
                    log('success!');
                    resolve(response.streamId);
                    break;
                case 'error':
                    log('error!');
                    reject(new Error(error.message));
                    break;
                default:
                    log('unknown!');
                    reject(new Error('Unknown response'));
                    break;
            }
        });
    }).then(streamId => {
        return navigator.mediaDevices.getUserMedia({
            video: {
                mandatory: {
                    chromeMediaSource: 'desktop',
                    chromeMediaSourceId: streamId,
                    maxWidth: window.screen.width,
                    maxHeight: window.screen.height                         
                }
            }
        });
    });
}

【问题讨论】：

你解决了吗？

标签： google-chrome-extension google-chrome-app

【解决方案1】：

一种方法是使用message 事件。通过“消息”事件，IFrame 可以用来与网页通信，因此它也可以与扩展程序可能在该网页上执行的任何内容脚本进行通信；谷歌推荐这种方法，如下所示：https://developer.chrome.com/extensions/content_scripts#host-page-communication

从 iframe 看，它看起来像这样：

var msg = { type: "CUSTOM_FROM_IFRAME", data: "Say hi." };
parent.postMessage(msg, "*");

window.addEventListener("message", ev=>{
  if(ev.type == "CUSTOM_FROM_CONTENTSCRIPT") console.log("can proceed");
});

内容脚本：

window.addEventListener("message", ev=>
{
  if(ev.type == "CUSTOM_FROM_IFRAME")
     chrome.runtime.sendMessage({type: ev.type, data: ev.data}, response => { 
     myIFrame_element.contentWindow.postMessage({type: "CUSTOM_FROM_CONTENTSCRIPT", data: response.data}, "*"); }); 
});

然后从后台页面执行内容脚本代码：

chrome.tabs.executeScript(mypgage_tab_id, {src: contentscript.js});

【讨论】：