MediaRecorder API

The MediaRecorder API (MediaStream Recording) aims to provide a really simple mechanism by which developers can record media streams from the user's input devices and instantly use them in web apps, rather than having to perform manual encoding operations on raw PCM data, etc., which would be required when using Navigator.getUserMedia() alone.

Key concepts and usage

MediaRecorder works alongside Navigator.getUserMedia() to capture media data. In a simple application, the MediaRecorder.start() method is called to start the recording. The dataavailable event is then fired when data is available to grab — when the MediaStream ends,  or when MediaRecorder.stop() or MediaRecorder.requestData() are called. The current recorded data is made available, in the platform's default encoding, as a Blob under dataavailable's data attribute.

More complex applications can query the available set of encodings on the platform and select which one to use, and choose to receive small buffers of data at regular intervals rather than the whole lot at once (a time slice argument can been specified when MediaRecorder.start() is called).

MediaRecorder Interfaces

MediaRecorder

Contains all the functionality required for the MediaRecorder API to capture media. Created by the invokation of the MediaRecorder() constructor.

BlobEvent

Provides access to a Blob object containing the media captured by the MediaRecorder.

Specifications

Browser compatibility

• [1] The initial Firefox OS implementation only supported audio recording.
• [2] To use MediaRecorder in Chrome 47 and 48, enable experimental Web Platform features from the chrome://flags page.
• [3] Audio recording work in Chrome 49 and above; Chrome 47 and 48 only support video recording.

See also

• Using the MediaRecorder API
• Web Dictaphone: MediaRecorder + getUserMedia + Web Audio API visualization demo (source on Github.)
• simpl.info MediaStream Recording demo.
• Simple video recording demo
• Navigator.getUserMedia()
• 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)