MediaStream Recording API Demo
The demo below uses getUserMedia() to capture video from a webcam and the MediaStream Recording API to record the stream to a video file in 1 second chunks/timeslice. It allows you to select the desired webcam, resolution and the video codec + container combo. For more information, check out our article: Media Recorder API in Action on Chrome and Firefox.
Works on:
- Firefox 30 and up
- Chrome 47,48 (video only, enable experimental Web Platform features at chrome://flags)
- Chrome 49+
- Safari 14.0.2+ on macOS
- Safari on iOS 14.3+
- Pause does not stop audio recording on Chrome 49,50
Containers & codecs:
| Browser | Version | Container | Video codecs | Audio codecs |
|---|---|---|---|---|
| Chrome | 47+ | WebM | VP8 | — |
| 49+ | WebM | VP8, VP9 | Opus @ 48kHz | |
| 52+ | WebM | VP8, VP9, H.264 | Opus @ 48kHz | |
| 64+ | WebM | VP8, VP9, H.264 | Opus, PCM @ 48kHz | |
| 126+ | WebM, MP4* | VP8, VP9, H.264, AV11 | Opus, PCM @ 48kHz; AAC LC (MP4 only) | |
| 136+ | WebM, MP4* | VP8, VP9, H.264, AV11, HEVC2 | Opus, PCM @ 48kHz; AAC LC (MP4 only) | |
| Firefox | 30+ | WebM | VP8 | Vorbis/Opus @ 44.1kHz |
| Safari macOS | 14.0.2+ | MP4* | H.264 | Stereo AAC @ 48kHz |
| 18.4+ | MP4*, WebM | H.264, VP8, VP9, HEVC, AV13 | Stereo AAC, Opus @ 48kHz | |
| Safari iOS | 14.3+ | MP4* | H.264 | Stereo AAC @ 44.1/48kHz |
| 18.4+ | MP4*, WebM | H.264, VP8, VP9, HEVC, AV13 | Stereo AAC, Opus @ 44.1/48kHz |
* Produces a fragmented MP4 (fMP4).
1 Chrome on macOS always uses software AV1 encoding. (Source)
2 HEVC encoding is only supported if the user's device and OS provide the necessary capabilities. (Source)
3 AV1 video tracks are supported on devices with AV1 hardware support. (Source)
RELATED RESOURCES
- Article associated with this demo: Media Recorder API in Action on Chrome and Firefox
- Code for this demo on GitHub: https://github.com/addpipe/Media-Recorder-API-Demo
- W3C Draft: http://w3c.github.io/mediacapture-record/MediaRecorder.html
- Media Recorder API at 65% penetration thanks to Chrome
- MediaStream Recorder API Now Available in Safari Technology Preview 73
- Recording audio in the browser using pure HTML5 and minimal JavaScript