There was a scripting error on this page. While it is being addressed by site editors, you can view partial content below.
The Media Capture and Streams API, often called the Media Stream API or the Stream API, is an API related to WebRTC which supports streams of audio or video data, the methods for working with them, the constraints associated with the type of data, the success and error callbacks when using the data asynchronously, and the events that are fired during the process.
Basic concepts
The API is based on the manipulation of a MediaStream
object representing a flux of audio- or video-related data. Typically a MediaStream
object is as a simple URL string which can be used to reference data stored in a DOM File
, or a Blob
object created with window.URL.createObjectURL()
, as described in Get the video.
A MediaStream
consists of zero or more MediaStreamTrack
objects, representing various audio or video tracks. Each MediaStreamTrack
may have one or more channels. The channel represents the smallest unit of a media stream, such as an audio signal associated with a given speaker, like left or right in a stereo audio track.
MediaStream
objects have a single input and a single output. A MediaStream
object generated by getUserMedia()
is called local, and has as its source input one of the user's cameras or microphones. A non-local MediaStream
may be representing to a media element, like <video>
or <audio>
, a stream originating over the network, and obtained via the WebRTC RTCPeerConnection
API, or a stream created using the Web Audio API MediaStreamAudioSourceNode
. The output of the MediaStream
object is linked to a consumer. It can be a media elements, like <audio>
or <video>
, the WebRTC RTCPeerConnection
API or a Web Audio API MediaStreamAudioDestinationNode
.
Reference
addtrack
(event)AudioStreamTrack
BlobEvent
ended
(event)ended
(event)MediaStream
MediaStreamTrack
MediaStreamTrackEvent
MediaTrackCapabilities
MediaTrackConstraints
MediaTrackSettings
MediaTrackSupportedConstraints
muted
(event)NavigatorUserMedia
NavigatorUserMediaError
overconstrained
(event)removetrack
(event)started
(event)unmuted
(event)URL
VideoStreamTrack
Guides and tutorials
- Capabilities, constraints, and settings
- The twin concepts of constraints and capabilies let the browser and Web site or app exchange information about what constrainable properties the browser's implementation supports and what values it supports for each one. This article discusses capabilities and constraints, as well as media settings, and includes an example we call the Example: Constraint exerciser, which you can use to experiment with the results of different constraint sets being applied to the audio and video tracks coming from the computer's A/V input devices (such as its webcam and microphone).
Browser compatibility
Feature | Chrome | Firefox (Gecko) | Microsoft Edge | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|---|
Stream API | 21webkit | Nightly 18moz | (Yes) | ? | 12 | ? |
Feature | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Stream API | No support | ? | ? | No support | No support |
Currently using WebRTC for accessing the camera is supported in Chrome, Opera and Firefox Nightly 18. Enabling WebRTC in Firefox Nightly requires you to set a flag in the configuration:
- Type "about:config" in the address bar and say yes that you want to make changes
- Find the "media.navigator.enabled" entry and set it to true
See also
- WebRTC - the introductory page to the API
- {{ mediaDevices.getUserMedia }}
- Taking webcam photos: a demonstration and tutorial about using
getUserMedia()
.