我已经成功运用webkitGetUserMedia在普通网页中捕获了来自我的网络摄像头的视频,但是当我尝试在Chrome扩展程序的popup.html中执行此操作时却没有反应。我并没有收到任何权限错误,甚至似乎从未询问过(信息栏从未在弹出窗口中滑下)。有什么解决方法吗?看起来我不能在清单JSON中授予权限。
我已经成功运用webkitGetUserMedia在普通网页中捕获了来自我的网络摄像头的视频,但是当我尝试在Chrome扩展程序的popup.html中执行此操作时却没有反应。我并没有收到任何权限错误,甚至似乎从未询问过(信息栏从未在弹出窗口中滑下)。有什么解决方法吗?看起来我不能在清单JSON中授予权限。
虽然有点取巧,但是如果为您的扩展程序创建一个选项页面并在该页面的JS中调用webkitGetUserMedia
,它将请求该扩展程序的所有URI的授权。用户在选项页面允许后,背景页面也将拥有使用权限。
Chrome扩展和WebRTC:
Chrome扩展清单权限文档没有提到清单中需要的两个权限:“videoCapture”和“audioCapture”,所以我不确定这些功能是否可用于Chrome扩展。在继续之前,您应该尝试并查看会发生什么!;)
Chrome打包应用和WebRTC:
然而,在Chrome打包应用程序中,这是可能的,无论是在沙箱页面还是非沙箱页面上! Chrome打包应用程序与扩展非常相似,因此,根据您正在做的事情,您可能希望构建一个应用程序。
在打包应用程序清单权限文档中,没有明确列出“videoCapture”和“audioCapture”权限,但在示例中演示了其中一个权限。
我有一个打包的应用程序,使用沙箱HTML页面来运行webkitGetUserMedia,效果很好。这是您在清单中需要的内容:
{
"name": "app name",
"version": "0.2",
"manifest_version": 2,
"minimum_chrome_version": "21",
"app": {
"background": {
"scripts": ["main.js"]
}
},
"icons": {
/* "128": "icon_128.png" */
},
"sandbox": {
"pages": ["call.htm" ]
},
"permissions" : [ "videoCapture", "audioCapture" ]
}
您需要将弹出窗口作为应用程序从chrome://newtab页面启动。 main.js文件应该包含类似以下内容的代码:
// Chrome v24+
chrome.app.runtime.onLaunched.addListener(function() {
chrome.app.window.create('mainpage.html',
{width: 1190, height: 709});
});
主页面应该是您的弹出窗口。在我的设置中,我在mainpage.html内有一个名为call.htm的iframe,并且iframe页面被沙箱化,因此它可以执行一些只能作为普通网页完成的不安全操作。但是,如果我在非沙箱化的弹出窗口中运行getUserMedia命令,则确实会从调用webkitGetUserMedia获得MediaStream对象:
navigator.webkitGetUserMedia({ audio: true, video: true },
function (stream) {
mediaStream = stream;
},
function (error) {
console.error("Error trying to get the stream:: " + error.message);
});
我测试了一下,成功地在一个弹出框中捕获了我的视频。
正如@tsbarnes所建议的那样,有一个hack方法,但是对于Chrome应用程序,这个hack方法是不同的,您需要从background.js
调用navigator.webkitGetUserMedia,类似于以下内容:
navigator.webkitGetUserMedia({audio: true, video: true}, function() {
console.log('ok');
}, function(e) {
console.log('webcam not ok');
});
然后你仍然可以从window.html或任何其他webview访问音频/视频
在 options.js
中请求 navigator.webkitGetUserMedia
是有效的,但是你必须在一个新标签页中打开 option.html
弹窗,否则会出现错误,所以在 manifest.json
中必须要写:
"options_ui": {
"page": "options.html",
"chrome_style": true,
"open_in_tab": true
}