Does a website have to ask permission in order to access the microphone and webcam?

Question

Unless there are settings in your browser, whether Windows, Linux or Android, unless expicitly allowed, is it standard design to require user interaction (allowance) in order for a webpage to access the microphone and webcam? What security measures are in place to prevent undesired or even accidental access?

What is the standard process for doing this, both by the rules and maliciously? I'm guess Javascript.

Answer 1

That's correct. HTML5 exposes getUserMedia API to access media resources on the host.

See here for a reference implementation. This is the code in action: https://webaudiodemos.appspot.com/input/index.html

In terms of what the spec say about the security, quoting from this website:

Security

Some browsers throw up an infobar upon calling getUserMedia(), which gives users the option to grant or deny access to their camera/mic. The spec unfortunately is very quiet when it comes to security.

Permission dialog in Chrome: If your app is running from SSL (https://), this permission will be persistent. That is, users won't have to grant/deny access every time.

This is the issue to implement permission support in the spec itself: https://github.com/w3c/permissions/issues/62

However in practice, all standard browsers ask for permission via a popup box (or a infobar) before accessing the media resources. Hence, so far as one is using a modern browser, it should ask for permission.

If one is using a non-standard browser, modified version of chromium shell, or desktop based electronjs/nwjs apps, then it could be possible that the browser doesn't ask for permission, but again in such a case all other security gaurantees that modern browsers provide (eg. XSS auditor, CORS, Same origin policy etc.) goes for a toss.

Answer 2

From the Mozilla Developer Network:

The MediaDevices.getUserMedia() method prompts the user for permission to use one video and/or one audio input device such as a camera or screensharing and/or a microphone. If the user provides permission, then the returned Promise is resolved with the resulting MediaStream object. If the user denies permission, or media is not available, then the promise is rejected with PermissionDeniedError or NotFoundError respectively. Note that it is possible for the returned promise to neither resolve nor reject, as the user is not required to make a choice.

In Firefox, it would seem that the browser displays a prompt when the Javascript method is being accessed for the first time. The JS code does not handle the prompt, but rather the browser.

The older method still works in Firefox, and handles the exact same way. The code is provided below:

// Fork getUserMedia for multiple browser versions, for those that need prefixes.
navigator.getUserMedia = (navigator.getUserMedia ||
                          navigator.webkitGetUserMedia ||
                          navigator.mozGetUserMedia ||
                          navigator.msGetUserMedia ||
                          navigator.oGetUserMedia );

/**
 * Checks whether getUserMedia() is available and if so, launches the animation.
 */

if (navigator.getUserMedia)
{
    navigator.getUserMedia ({ audio: true },
    // Success callback
    // ...
}

This means 2 things:

1. You have to have Javascript enabled, or allow it with NoScript
2. Regardless of where and when the JS method is called, the browser will prompt the user for an option.

MDN Link: https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia

Older Demonstration (still works): https://www.openprocessing.org/sketch/175689