Navigator.getUserMedia()

 

Note: This API has been renamed to MediaDevices.getUserMedia(). Please use that version instead! This deprecated legacy version of the API exists for backwards compatibility only.

Deprecated
This feature has been removed from the Web standards. Though some browsers may still support it, it is in the process of being dropped. Do not use it in old or new projects. Pages or Web apps using it may break at any time.

The Navigator.getUserMedia() method prompts the user for permission to use 0 or 1 video and 0 or 1 audio input device such as a camera, a shared screen, or a microphone. If the user provides permission, then the successCallback is invoked with the resulting MediaStream object as its argument. If the user denies permission or media is not available, then the errorCallback is called with PermissionDeniedError or NotFoundError respectively. Note that it is possible for neither completion callback to be called, as the user is not required to make a choice.

Syntax

JavaScript
navigator.getUserMedia(constraints, successCallback, errorCallback);

Parameters

constraints
A MediaStreamConstaints object specifying the types of media to request, along with any requirements for each type. For details, see the constraints section under the modern MediaDevices.getUserMedia() method.
successCallback
When the call succeeds, the function specified in the successCallback is invoked with the MediaStream object that contains the media stream. You may assign that object to the appropriate element and work with it, as shown in the following example:
JavaScript
function(stream) {
   var video = document.querySelector('video');
   video.src = window.URL.createObjectURL(stream);
   video.onloadedmetadata = function(e) {
      // Do something with the video here.
   };
}
errorCallback
When the call fails, the function specified in the errorCallback is invokedwith a MediaStreamError object as its sole argument; this object is is modeled on DOMException. The error codes are described as follows:
Error Description
PermissionDeniedError Permission to use a media device was denied by the user or the system.
NotFoundError No media tracks of the type specified were found that satisfy the constraints specified.

Examples

Width and height

Here's an example of using getUserMedia(), including code to cope with various browsers' prefixes. Note that this is the deprecated way of doing it: See the Examples section under the MediaDevices.getUserMedia() for modern examples.

JavaScript
navigator.getUserMedia = navigator.getUserMedia ||
                         navigator.webkitGetUserMedia ||
                         navigator.mozGetUserMedia;

if (navigator.getUserMedia) {
   navigator.getUserMedia({ audio: true, video: { width: 1280, height: 720 } },
      function(stream) {
         var video = document.querySelector('video');
         video.src = window.URL.createObjectURL(stream);
         video.onloadedmetadata = function(e) {
           video.play();
         };
      },
      function(err) {
         console.log("The following error occurred: " + err.name);
      }
   );
} else {
   console.log("getUserMedia not supported");
}

Permissions

To use getUserMedia() in an installable app (for example, a Firefox OS app), you need to specify one or both of the following fields inside your manifest file:

JavaScript
"permissions": {
  "audio-capture": {
    "description": "Required to capture audio using getUserMedia()"
  },
  "video-capture": {
    "description": "Required to capture video using getUserMedia()"
  }
}

See permission: audio-capture and permission: video-capture for more information.

Specifications

Specification Status Comment
Media Capture and Streams
The definition of 'navigator.getUserMedia' in that specification.
Editor's Draft Initial definition.

Browser compatibility

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 21webkit [1] 17moz [3] No support 12 [2]
18webkit
No support
Feature Android Android Webview Firefox Mobile (Gecko) Firefox OS (Gecko) IE Phone Opera Mobile Safari Mobile Chrome for Android
Basic Support ? 40.0webkit [2] 24moz [3] 1.2moz [4]
1.4moz
No support 12 [2] No support No support

[1] Later versions of Chrome support unprefixed MediaDevices.getUserMedia(), that replaced this deprecated method.

[2] Chrome and Opera still use an outdated constraint syntax, but the syntax described here is available through the adapter.js polyfill.

[3] The constraint syntax described here is available as of Firefox 38. Earlier versions (32-37) used an outdated constraint syntax, but the syntax described here is available there through the adapter.js polyfill.

[4] In Firefox OS 1.2 only audio was supported, 1.4 added support for video.

See also

License

© 2016 Mozilla Contributors
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-us/docs/web/api/navigator/getusermedia

API Deprecated Method Reference WebRTC