The Media Capture and Streams API, often called the Media Streams API or simply MediaStream API, is an API related to WebRTC which provides support for streaming audio and video data. It provides the interfaces and methods for working with the streams and their constituent tracks, the constraints associated with data formats, the success and error callbacks when using the data asynchronously, and the events that are fired during the process.
Concepts and usage
The API is based on the manipulation of a MediaStream
object representing a flux of audio- or video-related data. See an example 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 MediaStreamAudioSourceNode
.
Interfaces
In these reference articles, you'll find the fundamental information you'll need to know about each of the interfaces that make up the Media Capture and Streams API.
Early versions of the Media Capture and Streams API specification included separate AudioStreamTrack
and VideoStreamTrack
interfaces—each based upon MediaStreamTrack
—which represented streams of those types. These no longer exist, and you should update any existing code to instead use MediaStreamTrack
directly.
Events
Guides and tutorials
The articles below provide additional guidance and how-to information that will help you learn to use the API, and how to perform specific tasks that you may wish to handle.
- Capabilities, constraints, and settings
- The twin concepts of constraints and capabilities 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 Constraint Exerciser.
Browser compatibility
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
MediaStream | Chrome
Full support
55
| Edge Full support 12 | Firefox Full support 15 | IE No support No | Opera
Full support
42
| Safari Full support 11 | WebView Android
Full support
55
| Chrome Android
Full support
55
| Firefox Android Full support 15 | Opera Android
Full support
42
| Safari iOS Full support 11 | Samsung Internet Android
Full support
6.0
|
MediaStream() constructor | Chrome Full support 21 | Edge Full support ≤18 | Firefox Full support 44 | IE No support No | Opera Full support 42 | Safari No support No | WebView Android Full support 37 | Chrome Android Full support 25 | Firefox Android Full support 42 | Opera Android No support No | Safari iOS No support No | Samsung Internet Android Full support 6.0 |
active | Chrome Full support 45 | Edge Full support 12 | Firefox Full support 52 | IE No support No | Opera No support No | Safari Full support Yes | WebView Android Full support 45 | Chrome Android Full support 45 | Firefox Android Full support 52 | Opera Android No support No | Safari iOS Full support Yes | Samsung Internet Android Full support 5.0 |
active event | Chrome Full support 45 | Edge Full support ≤79 | Firefox ? | IE No support No | Opera ? | Safari ? | WebView Android Full support 45 | Chrome Android Full support 45 | Firefox Android ? | Opera Android No support No | Safari iOS ? | Samsung Internet Android Full support 5.0 |
addTrack | Chrome Full support 26 | Edge Full support 12 | Firefox Full support 44 | IE No support No | Opera No support No | Safari Full support Yes | WebView Android Full support 37 | Chrome Android Full support 26 | Firefox Android No support No | Opera Android No support No | Safari iOS Full support Yes | Samsung Internet Android Full support 1.5 |
addtrack event | Chrome Full support Yes | Edge Full support 12 | Firefox Full support 50 | IE No support No | Opera No support No | Safari Full support Yes | WebView Android Full support Yes | Chrome Android Full support Yes | Firefox Android Full support 50 | Opera Android No support No | Safari iOS Full support Yes | Samsung Internet Android Full support Yes |
clone | Chrome Full support 45 | Edge Full support 12 | Firefox Full support 48 | IE No support No | Opera No support No | Safari Full support Yes | WebView Android Full support 45 | Chrome Android Full support 45 | Firefox Android Full support 48 | Opera Android No support No | Safari iOS Full support Yes | Samsung Internet Android Full support 5.0 |
ended | Chrome
No support
? — 54
| Edge ? | Firefox No support No | IE No support No | Opera No support ? — 39 | Safari ? | WebView Android
No support
? — 54
| Chrome Android
No support
? — 54
| Firefox Android No support No | Opera Android No support ? — 41 | Safari iOS ? | Samsung Internet Android
No support
? — 6.0
|
getAudioTracks | Chrome Full support 26 | Edge Full support 12 | Firefox
Full support
22
| IE No support No | Opera Full support Yes | Safari Full support Yes | WebView Android Full support 37 | Chrome Android Full support 26 | Firefox Android
Full support
22
| Opera Android No support No | Safari iOS Full support Yes | Samsung Internet Android Full support 1.5 |
getTrackById | Chrome Full support 26 | Edge Full support 12 | Firefox Full support 49 | IE No support No | Opera No support No | Safari Full support Yes | WebView Android Full support 37 | Chrome Android Full support 26 | Firefox Android Full support 49 | Opera Android No support No | Safari iOS Full support Yes | Samsung Internet Android Full support 1.5 |
getTracks | Chrome Full support 45 | Edge Full support 12 | Firefox Full support Yes | IE No support No | Opera Full support Yes | Safari Full support Yes | WebView Android Full support 45 | Chrome Android Full support 45 | Firefox Android Full support Yes | Opera Android No support No | Safari iOS Full support Yes | Samsung Internet Android Full support 5.0 |
getVideoTracks | Chrome Full support 26 | Edge Full support 12 | Firefox
Full support
22
| IE No support No | Opera Full support Yes | Safari Full support Yes | WebView Android Full support 37 | Chrome Android Full support 26 | Firefox Android
Full support
22
| Opera Android No support No | Safari iOS Full support Yes | Samsung Internet Android Full support 1.5 |
id | Chrome No support ? — 54 | Edge No support 12 — 79 | Firefox Full support 41 | IE No support No | Opera No support ? — 39 | Safari Full support Yes | WebView Android No support ? — 54 | Chrome Android No support ? — 54 | Firefox Android Full support 41 | Opera Android No support ? — 41 | Safari iOS Full support Yes | Samsung Internet Android No support ? — 6.0 |
inactive event | Chrome Full support 45 | Edge Full support ≤79 | Firefox ? | IE No support No | Opera ? | Safari ? | WebView Android Full support 45 | Chrome Android Full support 45 | Firefox Android ? | Opera Android No support No | Safari iOS ? | Samsung Internet Android Full support 5.0 |
label | Chrome
No support
? — 54
| Edge ? | Firefox ? | IE No support No | Opera No support No | Safari ? | WebView Android
No support
? — 54
| Chrome Android
No support
? — 54
| Firefox Android ? | Opera Android No support No | Safari iOS ? | Samsung Internet Android
No support
? — 6.0
|
onactive | Chrome Full support 45 | Edge Full support ≤79 | Firefox ? | IE No support No | Opera ? | Safari ? | WebView Android Full support 45 | Chrome Android Full support 45 | Firefox Android ? | Opera Android No support No | Safari iOS ? | Samsung Internet Android Full support 5.0 |
onaddtrack | Chrome Full support 26 | Edge Full support 12 | Firefox Full support 50 | IE No support No | Opera No support No | Safari Full support Yes | WebView Android Full support 37 | Chrome Android Full support 26 | Firefox Android Full support 50 | Opera Android No support No | Safari iOS Full support Yes | Samsung Internet Android Full support 1.5 |
oninactive | Chrome Full support 45 | Edge Full support ≤79 | Firefox ? | IE No support No | Opera ? | Safari ? | WebView Android Full support 45 | Chrome Android Full support 45 | Firefox Android ? | Opera Android No support No | Safari iOS ? | Samsung Internet Android Full support 5.0 |
onremovetrack | Chrome Full support 26 | Edge Full support 12 | Firefox No support No | IE No support No | Opera No support No | Safari Full support Yes | WebView Android Full support 37 | Chrome Android Full support 26 | Firefox Android No support No | Opera Android No support No | Safari iOS Full support Yes | Samsung Internet Android Full support 1.5 |
removeTrack | Chrome Full support 26 | Edge Full support 12 | Firefox Full support Yes | IE No support No | Opera Full support Yes | Safari Full support Yes | WebView Android Full support 37 | Chrome Android Full support 26 | Firefox Android Full support Yes | Opera Android No support No | Safari iOS Full support Yes | Samsung Internet Android Full support 1.5 |
removetrack event | Chrome Full support Yes | Edge Full support 12 | Firefox No support No | IE No support No | Opera No support No | Safari Full support Yes | WebView Android Full support Yes | Chrome Android Full support Yes | Firefox Android No support No | Opera Android No support No | Safari iOS Full support Yes | Samsung Internet Android Full support Yes |
stop | Chrome No support ? — 47 | Edge No support 13 — 79 | Firefox ? | IE No support No | Opera No support No | Safari ? | WebView Android No support ? — 47 | Chrome Android No support ? — 47 | Firefox Android ? | Opera Android No support No | Safari iOS ? | Samsung Internet Android No support ? — 5.0 |
Legend
- Full support
- Full support
- No support
- No support
- Compatibility unknown
- Compatibility unknown
- Experimental. Expect behavior to change in the future.
- Experimental. Expect behavior to change in the future.
- Deprecated. Not for use in new websites.
- Deprecated. Not for use in new websites.
- See implementation notes.
- See implementation notes.
- Requires a vendor prefix or different name for use.
- Requires a vendor prefix or different name for use.
See also
- WebRTC - the introductory page to the API
mediaDevices.getUserMedia()
- Taking still photos with WebRTC: a demonstration and tutorial about using
getUserMedia()
.