Home/Tech demos/MediaRecorder API - Video
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 | AAC @ 48kHz |
| 18.4+ | MP4*, WebM | H.264, VP8, VP9, HEVC, AV13 | AAC, Opus @ 48kHz | |
| 26+ | MP4*, WebM | H.264, VP8, VP9, HEVC, AV13 | ALAC, PCM, AAC, Opus @ 48kHz | |
| Safari iOS | 14.3+ | MP4* | H.264 | AAC @ 44.1/48kHz |
| 18.4+ | MP4*, WebM | H.264, VP8, VP9, HEVC, AV13 | AAC, Opus @ 44.1/48kHz | |
| 26+ | MP4*, WebM | H.264, VP8, VP9, HEVC, AV13 | ALAC, PCM, AAC, Opus @ 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
- Blog post: Media Recorder API in Action on Chrome and Firefox
- GitHub code: MediaRecorder API Demo
- W3C draft: MediaStream Recording
- Blog post: Media Recorder API at 65% Penetration Thanks to Chrome
- Blog post: MediaStream Recorder API Now Available in Safari Technology Preview 73
- Blog post: Recording Audio in the Browser Using Pure HTML5 and Minimal JavaScript
- Blog post: Recording True Stereo Audio Using getUserMedia
More tech demos.
Skip the MediaRecorder codec headaches.
AddPipe records webcam video in every major browser and converts it to an MP4 that plays anywhere. Try it free for 14 days.