The MediaStream Recording API, sometimes simply referred to as the Media Recording API or the MediaRecorder API, is closely affiliated with the Media Capture and Streams API and the WebRTC API. The MediaStream Recording API makes it possible to capture the data generated by a
HTMLMediaElement object for analysis, processing, or saving to disk. It's also surprisingly easy to work with.
The MediaStream Recording API is comprised of a single interface,
MediaRecorder, which does all the work of taking the data from a
MediaStream and delivering it to you for processing. The data is delivered by a series of
dataavailable events, already in the format you specify when creating the
MediaRecorder. The process of recording a stream is simple:
- Set up a
HTMLMediaElement(in the form of an
<video>element) to serve as the source of the media data.
MediaRecorder.ondataavailableto an event handler for the
dataavailableevent; this will be called whenever data is available for you.
- Create a
MediaRecorderobject, specifying the source stream and any desired options (such as the container's MIME type or the desired bit rates of its tracks.
- Once the source media is playing and you've reached the point where you're ready to record video, call
MediaRecorder.start()to begin recording.
dataavailableevent handler gets called every time there's data ready for you to do with as you will; the event has a data attribute whose value is a
Blobthat contains the media data in the . You can force a
dataavailableevent to occur, thereby delivering the latest sound to you so you can filter it, save it, whatever.
- Recording stops automatically when the source media stops playing.
- You can stop recording at any time by calling
If you need or want to check to see if a specific MIME type is supported, that's possible as well. Just call
To learn more about using the MediaStream Recording API, see Using the MediaStream Recording API, which shows how to use the API to record audio clips. A second article, Recording a media element, describes how to receive a stream from an
<video> element and use the captured stream (in this case, recording it and saving it to a local disk).
|MediaStream Recording||Working Draft||Initial definition|
|Feature||Chrome||Firefox (Gecko)||Internet Explorer||Microsoft Edge||Opera||Safari (WebKit)|
|Basic support||47.0||25.0 (25.0)||No support||?||No support||No support|
|Feature||Android||Android Webview||Firefox Mobile (Gecko)||Firefox OS||IE Phone||Opera Mobile||Safari Mobile||Chrome for Android|
|Basic support||No support||47.0||25.0 (25.0)||1.3||No support||No support||No support||47.0|
 The initial Firefox OS implementation only supported audio recording.
 To use
MediaRecorder in Chrome 47 and 48, enable experimental Web Platform features from the
 Audio recording works in Chrome 49 and above; Chrome 47 and 48 only support video recording.
- Using the MediaStream Recording API
- Recording a media element
- simpl.info MediaStream Recording demo, by Sam Dutton
- HTML5’s Media Recorder API in Action on Chrome and Firefox
- TutorRoom: HTML5 video capture/playback/download using getUserMedia and the MediaRecorder API (source on GitHub)
- FingerSpell: Sign Language Fingerspelling practice using getUserMedia and the MediaRecorder API to create and download recordings, MediaRecorder API supported desktop browsers only (source on GitHub)
- Simple video recording demo
- Advanced media stream recorder sample
- OpenLang: HTML5 video language lab web application using MediaDevices and the MediaStream Recording API for video recording (source on GitHub)