safari media recorder

MediaRecorder API

Nov 23, 2020

by Youenn Fablet

Safari Technology Preview 105 and Safari in the latest iOS 14.3 beta enabled support for the MediaRecorder API by default. This API takes as input live audio/video content to produce compressed media. While the immediate use case is to record from the camera and/or microphone, this API can take any MediaStreamTrack as input, be it a capture track, coming from the network using WebRTC, or generated from HTML (Canvas, WebAudio), as illustrated in the chart below.

The generated output, exposed as blobs, can be readily rendered in a video element to preview the content, edit it, and/or upload to servers for sharing with others.

This API can be feature-detected, as can the set of supported file/container formats and audio/video codecs. Safari currently supports the MP4 file format with H.264 as video codec and AAC as audio codec. MediaRecorder support can be checked as follows:

The following example shows how camera and microphone can be recorded as mp4 content and locally previewed on the same page.

Future work may extend the support to additional codecs as well as supporting options like video/audio bitrates.

getUserMedia in WKWebView

Speaking of Safari in latest iOS 14.3 beta and local capture, navigator.mediaDevices.getUserMedia can now be exposed to WKWebView applications. navigator.mediaDevices.getUserMedia is automatically exposed if the embedding application is able to natively capture either audio or video. Please refer to Apple documentation to meet these requirements. Access to camera and microphone is gated by a user prompt similar to Safari and SafariViewController prompts. We hope to extend WKWebView APIs to allow applications to further control their camera and microphone management in future releases.

We hope you will like these new features. As always, please let us know if you encounter any bugs (or if you have ideas for future enhancements) by filing bugs on bugs.webkit.org .

MediaStream Recorder API Now Available in Safari Technology Preview 73

On Jan 9, 2019 Safari Technology Preview 73 became available for download from webkit.org/downloads .

In the release notes , under the WebRTC section, a new MediaRecorder change was mentioned.

Implemented non-timeslice mode encoding for MediaRecorder

The release notes had mentioned MediaRecorder in the past but the API itself never worked. Trying to record a simple video always failed.

But this build of Safari comes after significant activity in November on the Webkit issues tracking the MediaRecorder implementation (check out the Depends On tickets, all but one are closed) and this time it actually works.

To use the MediaStream Recorder API with Safari TP you first have to activate the feature from Develop > Experimental Features > MediaRecorder:

With the new API activated I was able to record video using the MediaStream Recorder API demo we’ve set up a while ago.

Some demos do not (yet) work with it:

• the WebRTC MediaRecorder sample (throws an error)
• Sam Dutton’s simpl.info MediaStream Recording demo
• Miguel Casas’ W3C Media Stream Recording demos on codepen (obsolete getUserMedia() call)
• Quickbblox’ advanced media stream recorder demo .

Part of the reason is that only the basic MediaStream Recorder API functionality is supported in this 1st implementation.

Things that work:

• MediaRecorder.start()
• MediaRecorder.stop()
• MediaRecorder.state (inactive & recording)
• ondataavailable (called only once after stopping)

Things that do not work (yet) :

• recording in slices/chunks ( MediaRecorder.start(1000) and requestData() )
• checking for supported MIME types with MediaRecorder.isTypeSupported()
• commonly used read only properties like mimeType and stream
• less common read only properties like videoBitratePerSecond , audioBitratePerSecond (these are not supported yet by any browser)
• pausing and resuming ( pause() , resume() , onpause , onresume )

There were no problems resolution wise. We were able to record in all the resolutions tried by the getUserMedia camera resolution finder tool and supported by our integrated FaceTime camera.

In terms of codecs the resulting .webm recording contains H.264 video and stereo AAC audio (I’ve used the Touch Bar MacBook PRO to test, it has 3 mics) at 44.1kHz.

This is great news for Safari. Hopefully the Webkit team at Apple will soon implement the missing functionality and add the feature to Safari on both macOS and iOS as part of an upcoming 12.x update without waiting for the 13 release in autumn.

More about the MediaStream Recording API on our blog:

• HTML5’s Media Recorder API in Action on Chrome and Firefox
• Media Recorder API is Now Supported by 65% of all Desktop Internet Users
• Media Recorder API Demo: Video Recording
• Recording audio in the browser using MediaStream Recorder API

With our 14 days (336 hours) trial you can add video recording to your website today and explore Pipe for 2 weeks.

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.

• 4 - 46 : Not supported
• 47 - 48 : Disabled by default
• 49 - 122 : Supported
• 123 : Supported
• 124 - 126 : Supported
• 12 - 18 : Not supported
• 79 - 122 : Supported
• 3.1 - 12 : Not supported
• 12.1 - 14 : Disabled by default
• 14.1 - 17.3 : Supported
• 17.4 : Supported
• TP : Supported
• 2 - 28 : Not supported
• 29 - 123 : Supported
• 124 : Supported
• 125 - 127 : Supported
• 9 - 33 : Not supported
• 34 - 35 : Disabled by default
• 36 - 107 : Supported
• 108 : Supported
• 5.5 - 10 : Not supported
• 11 : Not supported

Chrome for Android

Safari on ios.

• 3.2 - 11.4 : Not supported
• 12 - 14.4 : Disabled by default
• 14.5 - 17.3 : Supported

Samsung Internet

• 4 : Not supported
• 5 - 22 : Supported
• 23 : Supported
• all : Not supported

Opera Mobile

• 10 - 12.1 : Not supported
• 80 : Supported

UC Browser for Android

• 15.5 : Supported

Android Browser

• 2.1 - 4.4.4 : Not supported
• 123 : Not supported

Firefox for Android

• 124 : Not supported
• 14.9 : Supported

Baidu Browser

• 13.52 : Supported

KaiOS Browser

• 2.5 : Supported
• 3 : Supported

How to enable the MediaRecorder API for Safari

Free System Design Interview Course

Many candidates are rejected or down-leveled due to poor performance in their System Design Interview. Stand out in System Design Interviews and get hired in 2024 with this popular free course.

Go to Safari → Preferences → Advanced

Go to Develop → Experimental Features

• Go to Settings → Safari → Advanced → Experimental Features
• Enable MediaRecorder

RELATED TAGS

CONTRIBUTOR

Learn in-demand tech skills in half the time

Mock Interview

Skill Paths

Assessments

Learn to Code

Tech Interview Prep

Generative AI

Data Science

Machine Learning

GitHub Students Scholarship

Early Access Courses

For Individuals

Try for Free

Gift a Subscription

Become an Author

Become an Affiliate

Earn Referral Credits

Cheatsheets

Frequently Asked Questions

Privacy Policy

Cookie Policy

Terms of Service

Business Terms of Service

Data Processing Agreement

Copyright © 2024 Educative, Inc. All rights reserved.

• Skip to main content
• Select language
• Skip to search

MediaRecorder.MediaRecorder()

The MediaRecorder() constructor creates a new MediaRecorder object that will record a specified MediaStream .

options Optional

A dictionary object that can contain the following properties:

• mimeType : The mime type you want to use as the recording container for the new MediaRecorder . Applications can check in advance if this mimeType is supported by the user agent by calling MediaRecorder.isTypeSupported() .
• audioBitsPerSecond : The chosen bitrate for the audio component of the media.
• videoBitsPerSecond : The chosen bitrate for the video component of the media.
• bitsPerSecond : The chosen bitrate for the audio and video components of the media. This can be specified instead of the above two properties. If this is specified along with one or the other of the above properties, this will be used for the one that isn't specified.

If bits per second values are not specified for video and/or audio, the default adopted for video is 2.5Mbps, while the audio default is adaptive, depending upon the sample rate and the number of channels.

This example shows how to create a media recorder for a specified stream, whose audio bit rate is set to 128Kbit/sec and whose video bit rate is set to 2.5 Mbit/sec. The recorded media data will be stored in an MP4 wrapper (so if you gather the chunks of media data and save them to disk, they will be in an MP4 file).

Specifications

Browser compatibility.

[1] The initial Firefox OS implementation only supported audio recording.

• Using the MediaRecorder API
• Web Dictaphone : MediaRecorder + getUserMedia + Web Audio API visualization demo, by Chris Mills ( source on Github .)
• simpl.info MediaStream Recording demo , by Sam Dutton .
• Navigator.mediaDevices.getUserMedia()

Document Tags and Contributors

• Constructor
• Media Capture
• Media Recorder API
• MediaRecorder
• MediaStream Recording API
• MediaRecorder()
• audioBitsPerSecond
• ignoreMutedMedia
• ondataavailable
• isTypeSupported
• requestData()
• EventTarget
• dataavailable