问在标签中显示来自chrome.desktopCapture.chooseDesktopMedia的视频？
EN

Stack Overflow用户

提问于 2014-07-15 06:33:10

回答 2查看 3.2K关注 0票数 2

我正在试用chrome.desktopCapture.chooseDesktopMedia的铬扩展，我可以得到一个桌面流很好。

我使用以下方法在后台脚本中将流转换为blob:-URL，如下所示：

var objectUrl = URL.createObjectURL(stream);

我似乎无法解决的是，如何将其设置为注入页面上的视频元素的src属性。

我试过以下几种方法，每一种方法都不起作用：

在Background.js中：

var video     = document.getElementById("video");
var objectUrl = URL.createObjectURL(stream);
video.src     = objectUrl;

在Content.js中

//objectUrl is a string received in a message from the background page by the content page
var video     = document.getElementById("video");
video.src     = objectUrl;

我在javascript控制台中得到了以下内容：

不允许加载本地资源: blob:chrome-extension://panahgiakgfjeioddhenaabbacfmkclm/48ff3e53-ff6a-4bee-a1dd-1b8844591a91

如果我将URL发布在消息中直到注入的页面，我也会得到相同的信息。这个能行吗？我真的很想听听这里的任何建议。

在我的清单中，我也有"web_accessible_resources": [ "*" ]，但这只是为了看它是否解决了这个问题(它没有解决)。

google-chrome

google-chrome-extension

video-streaming

screensharing

单节点MySQL

低成本高体验，解决您的基础业务数据需求

回答 2

Stack Overflow用户

发布于 2014-07-15 12:58:22

在内容脚本中，DOM与页面共享，因此任何DOM操作(例如设置视频src)都受页面的同源政策而不是扩展的约束。

如果要显示选项卡的内容，则必须将tab.Tab对象传递给chrome.desktopCapture.chooseDesktopMedia。这个对象可以通过多种方式获得，包括讯息传递和制表符 API。下面是一个使用扩展按钮的示例

background.js

chrome.browserAction.onClicked.addListener(function(tab) {
    // NOTE: If you want to use the media stream in an iframe on an origin
    // different from the top-level frame (e.g. http://example.com), set
    //  tab.url = 'http://example.com'; before calling chooseDesktopMedia!
    //  (setting tab.url only works in Chrome 40+)
    chrome.desktopCapture.chooseDesktopMedia([
        'screen', 'window'//, 'tab'
    ], tab, function(streamId) {
        if (chrome.runtime.lastError) {
            alert('Failed to get desktop media: ' +
                chrome.runtime.lastError.message);
            return;
        }   

        // I am using inline code just to have a self-contained example.
        // You can put the following code in a separate file and pass
        // the stream ID to the extension via message passing if wanted.
        var code = '(' + function(streamId) {
            navigator.webkitGetUserMedia({
                audio: false,
                video: {
                    mandatory: {
                        chromeMediaSource: 'desktop',
                        chromeMediaSourceId: streamId
                    }   
                }   
            }, function onSuccess(stream) {
                var url = URL.createObjectURL(stream);
                var vid = document.createElement('video');
                vid.src = url;
                document.body.appendChild(vid);
            }, function onError() {
                alert('Failed to get user media.');
            }); 
        } + ')(' + JSON.stringify(streamId) + ')';

        chrome.tabs.executeScript(tab.id, {
            code: code
        }, function() {
            if (chrome.runtime.lastError) {
                alert('Failed to execute script: ' +
                    chrome.runtime.lastError.message);
            }   
        }); 
    }); 
});

manifest.json

{
    "name": "desktopCapture.chooseDesktopMedia for a tab",
    "version": "1",
    "manifest_version": 2,
    "background": {
        "scripts": ["background.js"]
    },
    "browser_action": {
        "default_title": "Show desktop capture request"
    },
    "permissions": [
        "desktopCapture",
        "activeTab"
    ]
}