Widely availableSuitable for production when it improves semantics, input, or browser integration.
Embedded Widely available

Media capture

The navigator.mediaDevices.getUserMedia() API requests access to devices that produce audio or video streams, such as microphones or video cameras. It is most useful when native HTML semantics or browser capabilities can replace custom implementation work.

EmbeddedMedia

Overview

The navigator.mediaDevices.getUserMedia() API requests access to devices that produce audio or video streams, such as microphones or video cameras. It is most useful when native HTML semantics or browser capabilities can replace custom implementation work.

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
InputDeviceInfo
47
79
11
47
11
getCapabilities

The getCapabilities() method of the InputDeviceInfo interface returns a MediaTrackCapabilities object describing the primary audio or video track of the device's MediaStream.
67
79
17
67
17
MediaDeviceInfo

The MediaDeviceInfo interface of the Media Capture and Streams API contains information that describes a single media input or output device.
47
12
39
11
47
11
deviceId

The deviceId read-only property of the MediaDeviceInfo interface returns a string that is an identifier for the represented device and is persisted across sessions.
47
12
39
11
47
11
groupId

The groupId read-only property of the MediaDeviceInfo interface returns a string that is a group identifier.
47
12
39
11
47
11
kind

The kind read-only property of the MediaDeviceInfo interface returns an enumerated value, that is either "videoinput", "audioinput" or "audiooutput".
47
12
39
11
47
11
label

The label read-only property of the MediaDeviceInfo interface returns a string describing this device (for example "External USB Webcam").
47
12
39
11
47
11
toJSON

The toJSON() method of the MediaDeviceInfo interface is a Serialization; it returns a JSON representation of the MediaDeviceInfo object.
47
18
42
11
47
11
MediaDevices

The MediaDevices interface of the Media Capture and Streams API provides access to connected media input devices like cameras and microphones, as well as screen sharing. In essence, it lets you obtain access to any hardware source of media data.
47
12
33
11
47
11
devicechange_event

The devicechange event is sent to a MediaDevices instance whenever a media device such as a camera, microphone, or speaker is connected to or removed from the system.
57
12
52
11
11
enumerateDevices

The enumerateDevices() method of the MediaDevices interface requests a list of the currently available media input and output devices, such as microphones, cameras, headsets, and so forth. The returned Promise is resolved with an array of MediaDeviceInfo objects describing the devices.
47
12
116
11
47
11
getSupportedConstraints

The getSupportedConstraints() method of the MediaDevices interface returns an object based on the MediaTrackSupportedConstraints dictionary, whose member fields each specify one of the constrainable properties the user agent understands.
53
12
44
11
52
11
getUserMedia

The getUserMedia() method of the MediaDevices interface prompts the user for permission to use a media input which produces a MediaStream with tracks containing the requested types of media.
53
12
36
11
53
11
getUserMedia (secure context required)

Secure context required
53
79
68
11
53
11
MediaStream

The MediaStream interface of the Media Capture and Streams API represents a stream of media content. A stream consists of several tracks, such as video or audio tracks. Each track is specified as an instance of MediaStreamTrack.
55
12
15
11
55
11
active

The active read-only property of the MediaStream interface returns a Boolean value which is true if the stream is currently active; otherwise, it returns false. A stream is considered active if at least one of its MediaStreamTracks does not have its property MediaStreamTrack.readyState set to ended. Once every track has ended, the stream's active property…
42
12
52
11
42
11
addTrack

The addTrack() method of the MediaStream interface adds a new track to the stream. The track is specified as a parameter of type MediaStreamTrack.
26
12
44
11
26
11
addtrack_event

The addtrack event is fired when a new MediaStreamTrack object has been added to a MediaStream.
26
12
50
11
26
11
clone

The clone() method of the MediaStream interface creates a duplicate of the MediaStream. This new MediaStream object has a new unique MediaStream.id and contains clones of every MediaStreamTrack contained by the MediaStream on which clone() was called.
35
12
48
11
35
11
getAudioTracks

The getAudioTracks() method of the MediaStream interface returns a sequence that represents all the MediaStreamTrack objects in this stream's track set where MediaStreamTrack.kind is audio.
26
12
22
11
26
11
getTrackById

The getTrackById() method of the MediaStream interface returns a MediaStreamTrack object representing the track with the specified ID string. If there is no track with the specified ID, this method returns null.
26
12
49
11
26
11
getTracks

The getTracks() method of the MediaStream interface returns a sequence that represents all the MediaStreamTrack objects in this stream's track set, regardless of MediaStreamTrack.kind.
38
12
34
11
38
11
getVideoTracks

The getVideoTracks() method of the MediaStream interface returns a sequence of MediaStreamTrack objects representing the video tracks in this stream.
26
12
22
11
26
11
id

The id read-only property of the MediaStream interface is a string containing 36 characters denoting a unique identifier (GUID) for the object.
26
12
41
11
26
11
MediaStream

The MediaStream() constructor returns a newly-created MediaStream, which serves as a collection of media tracks, each represented by a MediaStreamTrack object.
55
12
44
11
55
11
removeTrack

The removeTrack() method of the MediaStream interface removes a MediaStreamTrack from a stream.
26
12
44
11
26
11
removetrack_event

The removetrack event is fired when a new MediaStreamTrack object has been removed from a MediaStream.
26
12
72
11
26
11
MediaStreamTrack

The MediaStreamTrack interface of the Media Capture and Streams API represents a single media track within a stream; typically, these are audio or video tracks, but other track types may exist as well.
26
12
22
11
26
11
applyConstraints

The applyConstraints() method of the MediaStreamTrack interface applies a set of constraints to the track; these constraints let the website or app establish ideal values and acceptable ranges of values for the constrainable properties of the track, such as frame rate, dimensions, echo cancellation, and so forth.
59
12
43
11
59
11
applyConstraints (aspectRatio constraint)

The MediaTrackConstraints dictionary's aspectRatio property is a ConstrainDouble describing the requested or mandatory constraints placed upon the value of the MediaTrackSettings.aspectRatio constrainable property.
59
≤15
11
59
11
applyConstraints (autoGainControl constraint)

The MediaTrackConstraints dictionary's autoGainControl property is a ConstrainBoolean describing the requested or mandatory constraints placed upon the value of the MediaTrackSettings.autoGainControl constrainable property.
67
79
55
67
applyConstraints (channelCount constraint)

The MediaTrackConstraints dictionary's channelCount property is a ConstrainULong describing the requested or mandatory constraints placed upon the value of the MediaTrackSettings.channelCount constrainable property.
59
79
59
applyConstraints (deviceId constraint)

The MediaTrackConstraints dictionary's deviceId property is a ConstrainDOMString describing the requested or mandatory constraints placed upon the value of the MediaTrackSettings.deviceId constrainable property.
59
12
43
11
59
11
applyConstraints (echoCancellation constraint)

The MediaTrackConstraints dictionary's echoCancellation property is a ConstrainBooleanOrDOMString describing the requested or mandatory constraints placed upon the value of the MediaTrackSettings.echoCancellation constrainable property.
59
79
50
11
59
11
applyConstraints (facingMode constraint)

The MediaTrackConstraints dictionary's facingMode property is a ConstrainDOMString describing the requested or mandatory constraints placed upon the value of the MediaTrackSettings.facingMode constrainable property.
59
12
50
11
59
11
applyConstraints (frameRate constraint)

The MediaTrackConstraints dictionary's frameRate property is a ConstrainDouble describing the requested or mandatory constraints placed upon the value of the MediaTrackSettings.frameRate constrainable property.
59
12
50
11
59
11
applyConstraints (groupId constraint)

The MediaTrackConstraints dictionary's groupId property is a ConstrainDOMString describing the requested or mandatory constraints placed upon the value of the MediaTrackSettings.groupId constrainable property.
59
12
70
11
59
11
applyConstraints (height constraint)

The MediaTrackConstraints dictionary's height property is a ConstrainULong describing the requested or mandatory constraints placed upon the value of the MediaTrackSettings.height constrainable property.
59
12
50
11
59
11
applyConstraints (latency constraint)

The MediaTrackConstraints dictionary's latency property is a ConstrainDouble describing the requested or mandatory constraints placed upon the value of the MediaTrackSettings.latency constrainable property.
59
79
50
59
applyConstraints (noiseSuppression constraint)

The MediaTrackConstraints dictionary's noiseSuppression property is a ConstrainBoolean describing the requested or mandatory constraints placed upon the value of the MediaTrackSettings.noiseSuppression constrainable property.
67
79
55
67
applyConstraints (resizeMode constraint)

`resizeMode` constraint
72
79
72
applyConstraints (sampleRate constraint)

The MediaTrackConstraints dictionary's sampleRate property is a ConstrainULong describing the requested or mandatory constraints placed upon the value of the MediaTrackSettings.sampleRate constrainable property.
59
12
11
59
11
applyConstraints (sampleSize constraint)

The MediaTrackConstraints dictionary's sampleSize property is a ConstrainULong describing the requested or mandatory constraints placed upon the value of the MediaTrackSettings.sampleSize constrainable property.
59
12
11
59
11
applyConstraints (width constraint)

The MediaTrackConstraints dictionary's width property is a ConstrainULong describing the requested or mandatory constraints placed upon the value of the MediaTrackSettings.width constrainable property.
59
12
50
11
59
11
clone

The clone() method of the MediaStreamTrack interface creates a duplicate of the MediaStreamTrack. This new MediaStreamTrack object is identical except for its unique MediaStreamTrack.id.
35
12
48
11
35
11
enabled

The enabled property of the MediaStreamTrack interface is a Boolean value which is true if the track is allowed to render the source stream or false if it is not. This can be used to intentionally mute a track.
26
12
24
11
26
11
ended_event

The ended event of the MediaStreamTrack interface is fired when playback or streaming has stopped because the end of the media was reached or because no further data is available.
26
12
50
11
26
11
getCapabilities

The getCapabilities() method of the MediaStreamTrack interface returns an object detailing the accepted values or value range for each constrainable property of the associated MediaStreamTrack, based upon the platform and user agent.
59
12
132
11
59
11
getConstraints

The getConstraints() method of the MediaStreamTrack interface returns a MediaTrackConstraints object containing the set of constraints most recently established for the track using a prior call to MediaStreamTrack.applyConstraints. These constraints indicate values and ranges of values that the website or application has specified are required or acceptable…
53
12
50
11
52
11
getSettings

The getSettings() method of the MediaStreamTrack interface returns a MediaTrackSettings object containing the current values of each of the constrainable properties for the current MediaStreamTrack.
59
12
50
11
59
11
id

The id read-only property of the MediaStreamTrack interface returns a string containing a unique identifier (GUID) for the track, which is generated by the user agent.
26
12
22
11
26
11
kind

The kind read-only property of the MediaStreamTrack interface returns a string set to "audio" if the track is an audio track and to "video" if it is a video track. It doesn't change if the track is disassociated from its source.
26
12
22
11
26
11
label

The label read-only property of the MediaStreamTrack interface returns a string containing a user agent-assigned label that identifies the track source, as in "internal microphone".
26
12
22
11
26
11
mute_event

The mute event is sent to a MediaStreamTrack when the track's source is temporarily unable to provide media data.
26
12
59
11
26
11
muted

The muted read-only property of the MediaStreamTrack interface returns a boolean value indicating whether or not the track is currently unable to provide media output.
38
12
59
11
38
11
readyState

The readyState read-only property of the MediaStreamTrack interface returns an enumerated value giving the status of the track.
26
12
50
11
26
11
stop

The stop() method of the MediaStreamTrack interface stops the track.
32
12
34
11
32
11
unmute_event

The unmute event is sent to a MediaStreamTrack when the track's source is once again able to provide media data after a period of not being able to do so.
26
12
59
11
26
11
MediaStreamTrackEvent

The MediaStreamTrackEvent interface of the Media Capture and Streams API represents events which indicate that a MediaStream has had tracks added to or removed from the stream through calls to Media Capture and Streams API methods. These events are sent to the stream when these changes occur.
26
12
50
11
26
11
MediaStreamTrackEvent

The MediaStreamTrackEvent() constructor returns a new MediaStreamTrackEvent object, which represents an event signaling that a MediaStreamTrack has been added to or removed from a MediaStream.
55
12
50
11
55
11
track

The track read-only property of the MediaStreamTrackEvent interface returns the MediaStreamTrack associated with this event.
26
12
50
11
26
11
mediaDevices

The mediaDevices read-only property of the Navigator interface returns a MediaDevices object, which provides access to connected media input devices like cameras and microphones, as well as screen sharing.
47
12
36
11
47
11
mediaDevices (secure context required)

Secure context required
74
79
69
11
74
11
OverconstrainedError

The OverconstrainedError interface of the Media Capture and Streams API indicates that the set of desired capabilities for the current MediaStreamTrack cannot currently be met. When this event is thrown on a MediaStreamTrack, it is muted until either the current constraints can be established or until satisfiable constraints are applied.
63
79
11
63
11
constraint

The constraint read-only property of the OverconstrainedError interface returns the constraint that was supplied in the constructor, meaning the constraint that was not satisfied.
63
79
11.1
63
11.3
OverconstrainedError

The OverconstrainedError() constructor creates a new OverconstrainedError object which indicates that the set of desired capabilities for the current MediaStreamTrack cannot currently be met. When this event is thrown on a MediaStreamTrack, it is muted until either the current constraints can be established or until satisfiable constraints are applied.
63
79
11
63
11
permission_camera

`camera` permission
64
79
132
16
64
16
permission_microphone

`microphone` permission
64
79
132
16
64
16
Other
html.elements.iframe.allow.camera
64
79
74
11.1
64
11.3
html.elements.iframe.allow.microphone
64
79
74
11.1
64
11.3
http.headers.Permissions-Policy.camera
Experimental

The HTTP Permissions-Policy header camera directive controls whether the current document is allowed to use video input devices.
88
88
88
http.headers.Permissions-Policy.microphone
Experimental

The HTTP Permissions-Policy header microphone directive controls whether the current document is allowed to use audio input devices.
88
88
88
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Notes 1 item(s)
Implementation note
  • Before Firefox 67, related devices are not actually grouped together by `groupId`.
Notes 4 item(s)
Implementation note
  • `enumerateDevices()` enumerates both input and output devices. Previously only input devices were returned.
  • `enumerateDevices()` only returns input devices.
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (116)
Notes 1 item(s)
Compatibility
  • If you need this capability before version 53, refer to `navigator.webkitGetUserMedia`, a prefixed form of the deprecated `navigator.getUserMedia` API.
Notes 4 item(s)
Compatibility
  • If you need this capability before version 36, refer to `navigator.mozGetUserMedia`, a prefixed form of the deprecated `navigator.getUserMedia` API.
Implementation note
  • Before Firefox 55, `getUserMedia()` incorrectly returns `NotSupportedError` when the list of constraints specified is empty, or has all constraints set to `false`. Starting in Firefox 55, this situation now correctly calls the failure handler with a `TypeError`.
  • When using the Firefox-specific `video` constraint called `mediaSource` to request display capture, Firefox 66 and later consider values of `screen` and `window` to both cause a list of screens and windows to be shown.
  • Starting in Firefox 66, `getUserMedia()` can no longer be used in sandboxed `<iframe>`s or `data` URLs entered in the address bar by the user.
Notes 1 item(s)
Compatibility
  • If you need this capability before version 53, refer to `navigator.webkitGetUserMedia`, a prefixed form of the deprecated `navigator.getUserMedia` API.
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: webkit (21)
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: webkit (79)
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: webkit (25)
Notes 1 item(s)
Implementation note
  • Before Firefox 64, this method returned an array of `AudioStreamTrack` objects. However, `MediaStreamTrack` has now subsumed that interface's functionality.
Notes 1 item(s)
Implementation note
  • Before Firefox 64, this method returned an array of `VideoStreamTrack` objects. However, `MediaStreamTrack` has now subsumed that interface's functionality.
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: webkit (21)
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: webkit (79)
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: webkit (25)
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (72)
Implementation note
  • Before Firefox 72, the event handler was exposed but had no effect.
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: moz (46)
Notes 1 item(s)
Implementation note
  • Before Firefox 69, Firefox only supported `deviceId` in constraints passed into `getUserMedia()`.
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: moz (46)
Notes 2 item(s)
Limitation
  • This browser only partially implements this feature
Implementation note
  • Does not currently track the microphone's muted state from the operating system, see bug 1739163.

Syntax

JAVASCRIPT 
const stream = await navigator.mediaDevices.getUserMedia({
  video: { width: 1280, height: 720 },
  audio: true
});
const video = document.querySelector('video');
video.srcObject = stream;

Use cases

  • Use Media capture

    Use Media capture when standard HTML needs a more specific platform feature, semantic signal, or browser capability.

  • Handle edge cases

    Apply Media capture to solve a focused requirement without redesigning the whole page architecture.

Cautions

  • Test Media capture in your target browsers and input environments before depending on it as a primary behavior.

Accessibility

  • Make sure Media capture supports the intended task without making the page harder to perceive, understand, or operate.

Related links

Powered by web-features