如何在Chrome扩展程序弹出窗口中授予webkitGetUserMedia权限？

Question

我已经成功运用webkitGetUserMedia在普通网页中捕获了来自我的网络摄像头的视频，但是当我尝试在Chrome扩展程序的popup.html中执行此操作时却没有反应。我并没有收到任何权限错误，甚至似乎从未询问过（信息栏从未在弹出窗口中滑下）。有什么解决方法吗？看起来我不能在清单JSON中授予权限。

- anonymouse

---

嘿，你能发一下你的manifest.json文件和popup.html中的代码吗？我相信这个可以解决问题，但是我需要看看你想做什么才能帮助你。我正在尝试从后台页面做同样的事情，但我可以从弹出窗口中完成。 - jamesmortensen

Answer 1

虽然有点取巧，但是如果为您的扩展程序创建一个选项页面并在该页面的JS中调用webkitGetUserMedia，它将请求该扩展程序的所有URI的授权。用户在选项页面允许后，背景页面也将拥有使用权限。

- tsbarnes

---

在搜索解决方案数天后，这对我有用了！tsbarnes很棒！ - kirley

工作！但你需要让用户访问选项页面。 - Bill Hoag

你应该如何准确地调用webkitGetUserMedia？这允许哪些后续调用？最好能提供示例代码。@gregoiregentil - Andy McKenzie

这在2014年还有意义吗？ - Ignas

...甚至在2018年 - vertexion

Answer 2

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);
                });

我测试了一下，成功地在一个弹出框中捕获了我的视频。

- jamesmortensen

---

感谢提供详细信息！不幸的是，它无法与扩展程序一起使用： 在尝试安装此扩展时出现了警告： “videoCapture”仅允许打包应用程序使用，而这是一个扩展程序。我在Chromium上遇到了问题，希望他们能尽快解决。 - anonymouse

打包应用和扩展之间没有太大的区别。你可以尝试创建一个页面操作或浏览器操作，但作为一个打包应用。我可能错了，但我认为你想在扩展中做的一切都可以通过打包应用API实现。它们甚至以与扩展相同的方式安装... - jamesmortensen

这是与扩展权限相关的相关错误：https://code.google.com/p/chromium/issues/detail?id=160337 - tomtheengineer

注意：自2014年2月17日起，getUserMedia音频/视频录制不再需要实验权限！太好了！ - Ruben Martinez Jr.

成功创建了这个不安全的打包应用程序区域并播放麦克风 :) - ofir_aghai

据我所知，你无法从应用程序中使用浏览器或页面操作。有人知道如何实现吗？ - Tomas Gonzalez

Answer 3

正如@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访问音频/视频

- Ivan Castellanos

Answer 4

在 options.js 中请求 navigator.webkitGetUserMedia 是有效的，但是你必须在一个新标签页中打开 option.html 弹窗，否则会出现错误，所以在 manifest.json 中必须要写：

"options_ui": {
    "page": "options.html",
    "chrome_style": true,
    "open_in_tab": true
  }

- Andrea Bisello