How do I give webkitGetUserMedia permission in a Chrome Extension popup window?

Question

I've successfully used webkitGetUserMedia to capture video from my webcam on a normal webpage, but when I try to do this in the popup.html of my Chrome Extension nothing happens. I don't get any permission errors, it just never even seems to ask (the inforbar never slides down in the popup window). Is there any way around this? It doesn't look like I can give permissions in the manifest json.

Answer 1

It's a cheap hack, but if you create an options page for your extension and include a call to webkitGetUserMedia in the JS for it, it will request permission for all URIs for that extension, after the user allows it in the options page the background page will also have permission to use it.

Answer 2

Chrome Extensions and WebRTC:

The Chrome Extensions Manifest Permissions Documentation doesn't mention the two permissions needed in the manifest, "videoCapture" and "audioCapture", so I'm not sure if that functionality is available to Chrome Extensions or not, you should try and see what happens before continuing any further! ;)

Chrome Packaged Apps and WebRTC:

However, in Chrome Packaged apps, it is possible, both in sandboxed and non-sandboxed pages! Chrome Packaged Apps are very similar to extensions, so depending on what you're doing, you may want to build an app instead.

In the Packaged Apps Manifest Permissions Documentation, the "videoCapture" and "audioCapture" permissions aren't explicitly listed, but one is demonstrated in an example.

I have a packaged app that uses a sandboxed HTML page to run webkitGetUserMedia, and it works great. Here is what you'd need in your manifest:

{
  "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" ]
}

You then need to launch your popup from the chrome://newtab page as an app. The main.js should contain something like this:

// Chrome v24+
chrome.app.runtime.onLaunched.addListener(function() {
    chrome.app.window.create('mainpage.html',
        {width: 1190, height: 709});
});

And mainpage should be your popup window. In my setup, I have an iframe called call.htm inside mainpage.html, and the iframe page is sandboxed so it can do some unsafe operations that can only be done as a normal web page. However, if I run the getUserMedia command in a non-sandboxed popup, I do get the MediaStream object from the call to webkitGetUserMedia:

 navigator.webkitGetUserMedia({ audio: true, video: true },
                function (stream) {
                    mediaStream = stream;
                },
                function (error) {
                    console.error("Error trying to get the stream:: " + error.message);
                });

I tested it out, and I was able to capture my video in a popup.