Please note, this is a STATIC archive of website developer.mozilla.org from 03 Nov 2016, cach3.com does not collect or store any user information, there is no "phishing" involved.

Media Capture and Streams API (Media Streams)

There was a scripting error on this page. While it is being addressed by site editors, you can view partial content below.

{{DefaultAPISidebar("Media Capture and Streams")}}

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 {{domxref("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 {{domxref("File")}}, or a {{domxref("Blob")}} object created with {{domxref("window.URL.createObjectURL()")}}, as described in Get the video.

A MediaStream consists of zero or more {{domxref("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 {{domxref("MediaDevices.getUserMedia", "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 {{HTMLElement("video")}} or {{HTMLElement("audio")}}, a stream originating over the network, and obtained via the WebRTC {{domxref("RTCPeerConnection")}} API, or a stream created using the Web Audio API {{domxref("MediaStreamAudioSourceNode")}}.   The output of the MediaStream object is linked to a consumer. It can be a media elements, like {{HTMLElement("audio")}} or {{HTMLElement("video")}},  the WebRTC {{domxref("RTCPeerConnection")}} API or a Web Audio API {{domxref("MediaStreamAudioDestinationNode")}}.

Reference

  • {{event("addtrack")}} (event)
  • {{domxref("AudioStreamTrack")}}
  • {{domxref("BlobEvent")}}
  • {{event("ended")}} (event)
  • {{event("ended")}} (event)
  • {{domxref("MediaStream")}}
  • {{domxref("MediaStreamTrack")}}
  • {{domxref("MediaStreamTrackEvent")}}
  • {{domxref("MediaTrackCapabilities")}}
  • {{domxref("MediaTrackConstraints")}}
  • {{domxref("MediaTrackSettings")}}
  • {{domxref("MediaTrackSupportedConstraints")}}
  • {{event("muted")}} (event)
  • {{domxref("NavigatorUserMedia")}}
  • {{domxref("NavigatorUserMediaError")}}
  • {{event("overconstrained")}} (event)
  • {{event("removetrack")}} (event)
  • {{event("started")}} (event)
  • {{event("unmuted")}} (event)
  • {{domxref("URL")}}
  • {{domxref("VideoStreamTrack")}}

Guides and tutorials

{{LandingPageListSubpages}}

Browser compatibility

{{ CompatibilityTable }} 

Feature Chrome Firefox (Gecko) Microsoft Edge Internet Explorer Opera  Safari (WebKit)
Stream API  21{{ property_prefix("webkit") }}  Nightly 18{{ property_prefix("moz") }}  {{CompatVersionUnknon{{ {{ CompatUnknown }}  12 {{ CompatUnknown }} 
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Stream API  {{ CompatNo }}  {{ CompatUnknown }} {{ CompatUnknown }}  {{ CompatNo }}  {{ CompatNo }} 

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
  • {{navigator.mediaDevices.getUserMedia()")}}
  • Taking webcam photos: a demonstration and tutorial about using getUserMedia().

Document Tags and Contributors

 Last updated by: Sheppy,