Media Recorder API Demo

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:

Chrome

• 47+
• Container: webm
• Video: VP8
• Audio: none
• 49+
• Container: webm
• Video: VP8, VP9
• Audio: Opus @ 48kHz
• 52+
• Container: webm
• Video: VP8, VP9, H264
• Audio: Opus @ 48kHz
• 64+
• Container: webm
• Video: VP8, VP9, H264
• Audio: Opus, PCM @ 48kHz
• 126+
• Container: webm, mp4
• Video: VP8, VP9, H264, AV1*
• Audio: Opus, PCM @ 48kHz
• 136+
• Container: webm, mp4
• Video: VP8, VP9, H264, AV1*, HEVC**
• Audio: Opus, PCM @ 48kHz

* Chrome on macOS always uses software AV1 encoding. (Source)

** HEVC encoding is only supported if the user's device and operating system provide the necessary capabilities. (Source)

Firefox

• 30+
• Container: webm
• Video: VP8
• Vorbis/Opus @ 44.1 kHz

Safari on macOS

• 14.0.2+
• Container: mp4
• Video: H264
• Stereo AAC @ 48kHz
• 18.4+
• Container: mp4, webm
• Video: H264, VP8, VP9, HEVC, AV1*
• Stereo AAC, Opus @ 48kHz

* AV1 video tracks are supported on devices with AV1 hardware support. (Source)

Safari on iOS

• 14.3+
• Container: mp4
• Video: H264
• Stereo AAC @ 44.1kHz or 48kHz
• 18.4+
• Container: mp4, webm
• Video: H264, VP8, VP9, HEVC, AV1*
• Stereo AAC, Opus @ 44.1kHz or 48kHz

* AV1 video tracks are supported on devices with AV1 hardware support. (Source)

Links:

• 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