Navigator.getUserMedia()
Deprecated: This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.
The deprecated Navigator.getUserMedia()
method prompts
the user for permission to use up to one video input device (such as a camera or shared
screen) and up to one audio input device (such as a microphone) as the source for a
MediaStream
.
If permission is granted, a MediaStream
whose video and/or audio tracks
come from those devices is delivered to the specified success callback. If permission
is denied, no compatible input devices exist, or any other error condition occurs, the
error callback is executed with a MediaStreamError
object describing
what went wrong. If the user instead doesn't make a choice at all, neither callback is
executed.
Note: This is a legacy method. Please use the newer navigator.mediaDevices.getUserMedia()
instead. While technically not
deprecated, this old callback version is marked as such, since the specification
strongly encourages using the newer promise returning version.
Syntax
navigator.getUserMedia(constraints, successCallback, errorCallback);
Parameters
constraints
-
An 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, as well as the article Capabilities, constraints, and settings. successCallback
-
A function which is invoked when the request for media access is approved. The function is called with one parameter: the
MediaStream
object that contains the media stream. Your callback can then assign the stream to the desired object (such as an<audio>
or<video>
element), as shown in the following example:function(stream) { var video = document.querySelector('video'); video.srcObject = stream; video.onloadedmetadata = function(e) { // Do something with the video here. }; }
errorCallback
-
When the call fails, the function specified in the
errorCallback
is invoked with aMediaStreamError
object as its sole argument; this object is modeled onDOMException
. See Errors below for a list of the errors which can occur.
Return value
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.
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.srcObject = 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:
"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.
Browser compatibility
BCD tables only load in the browser
Warning: New code should use MediaDevices.getUserMedia
instead.
See also
MediaDevices.getUserMedia()
that replaces this deprecated method.- WebRTC - the introductory page to the API
- MediaStream API - the API for the media stream objects
-
Taking webcam photos - a
tutorial on using
getUserMedia() for taking photos rather than video.