Bug 85851 - MediaStream API: support MediaStreamRecorder implementation
Summary: MediaStream API: support MediaStreamRecorder implementation
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: WebRTC (show other bugs)
Version: 528+ (Nightly build)
Hardware: Unspecified Unspecified
: P2 Normal
Assignee: Nobody
URL:
Keywords: InRadar
Depends on: 194779 197673 215018 216688 216832 216856 188822 189526 190018 190291 190438 190642 190778 198912 202233 213720 214972 214973 216663 216664
Blocks:
  Show dependency treegraph
 
Reported: 2012-05-07 19:26 PDT by William Lin
Modified: 2020-09-23 05:29 PDT (History)
53 users (show)

See Also:


Attachments

Note You need to log in before you can comment on or make changes to this bug.
Description William Lin 2012-05-07 19:26:19 PDT
To support MediaStreamRecorder implementation in MediaStream API
Comment 1 Tommy Widenflycht 2012-05-08 00:43:01 PDT
Just FYI this feature is quite far in the future since the specification is way behind.
Comment 2 Miguel Casas-Sanchez 2016-11-14 17:25:57 PST
Update: This is available in Chrome and Firefox:

http://caniuse.com/#search=mediarecorder

and the Spec is on its way to become Candidate Recommendation.
Comment 3 Jeremy Noring 2017-05-16 08:17:55 PDT
I'd also like to add this is one feature that's important to have to abandon flash support.  Right now to record media in the browser, really the only way besides javascript encoder/decoder implementations (performance isn't there yet) is to use a media server and stream rtmp (yuck!).
Comment 4 Frank Faubert 2017-06-09 11:54:26 PDT
Please add support for this so we can finally get rid of flash...
Comment 5 waza123 2018-01-15 10:19:41 PST
MediaRecorder
PLEASE CREATE THIS Class faster !
Comment 6 Jeremy Noring 2018-04-03 10:48:48 PDT
I'm at the point where I need this feature so badly that I'm willing to try and do the work myself.  Questions:

1. Would webkit accept a contribution like this, assuming I went through the normal process to make contributions to webkit, and 
2. Is there a webkit developer I could work with to make this happen?

Roundabout story: we've tried to make a MediaRecorder polyfill with webassembly, and it is prohibitively difficult for a number of reasons (tl;dr codec royalties are a thing, javascript garbage collection and video are hard, script processor nodes are finicky and working with a canvas has some idiosyncrasies that are difficult to address).  

Any advice: hugely welcome.
Comment 7 Eric Carlson 2018-06-27 07:45:48 PDT
Apologies for the late reply, I didn't see your questions before now. 

(In reply to Jeremy Noring from comment #6)
> I'm at the point where I need this feature so badly that I'm willing to try
> and do the work myself.  Questions:
> 
> 1. Would webkit accept a contribution like this, assuming I went through the
> normal process to make contributions to webkit, and 

Yes of course!

> 2,. Is there a webkit developer I could work with to make this happen?
> 

If you mean someone to help with questions and patch reviews, I will be happy to help out.
Comment 8 Eric Carlson 2018-06-27 07:48:15 PDT
<rdar://problem/40939511>
Comment 9 youenn fablet 2018-06-27 07:50:27 PDT
> 1. Would webkit accept a contribution like this, assuming I went through the
> normal process to make contributions to webkit, and 

+1 !!

> 2. Is there a webkit developer I could work with to make this happen?

I can also help a bit.

> Roundabout story: we've tried to make a MediaRecorder polyfill with
> webassembly, and it is prohibitively difficult for a number of reasons
> (tl;dr codec royalties are a thing, javascript garbage collection and video
> are hard, script processor nodes are finicky and working with a canvas has
> some idiosyncrasies that are difficult to address).  

+1
Comment 10 Octavian Naicu 2018-07-11 04:27:37 PDT
Having this feature in Safari on iOS would allow us to move away from the limited HTML Media Capture spec (which on Safari/iOS doesn't even work for audio just video) and implement proper video recording directly in iOS devices using our UI, our start/stop/pause controls, our constraints, JavaScript, we could trigger events, etc.

Having this feature in Safari on macOS would allow us to retire the last piece of Flash we're using.

(In reply to Jeremy Noring from comment #6)

> Roundabout story: we've tried to make a MediaRecorder polyfill with
> webassembly, and it is prohibitively difficult for a number of reasons
> (tl;dr codec royalties are a thing, javascript garbage collection and video
> are hard, script processor nodes are finicky and working with a canvas has
> some idiosyncrasies that are difficult to address).  

We've actually considered doing the same thing: taking snapshots from the canvas and encoding them as video using a WebAssembly video encoding library. I'm not sure it's possible though or, if works, if it could be used in production. For example these FFMPEG WebAssembly builds are 12MB in size and 4-5MB gzipped https://github.com/BrianJFeldman/ffmpeg.js.wasm. Another problem is audio would have to be captured separately and thus it will most certainly be out of sync.

As an example, there is a working MediaRecorder polyfill for audio that records uncompressed pcm in .wav https://github.com/ai/audio-recorder-polyfill

We've also tried using WebRTC to establish a p2p connection to a server and record the video server side but the video quality is bad (since WebRTC prioritizes low latency as it should) and the connection process is extremely complex (to account for all possible networks) resulting in failed connections: https://addpipe.com/blog/troubleshooting-webrtc-connection-issues/

Chrome supports mediastream recording since January 2016. It was "The most starred Chrome feature EVER" with 2877 stars https://developers.google.com/web/updates/2016/01/mediarecorder

I am not even that much concerned about codecs as we can easily convert those server side to whatever we need.
Comment 11 Octavian Naicu 2018-07-11 04:37:08 PDT
Just a thought: If this does not make it in Safari/12 and Safari 12/macOS we'll most probably have to wait at least another year until Safari 13.
Comment 12 Andrey Sitnik 2018-07-11 07:14:55 PDT
I wrote a polyfill for MediaRecorder for audio https://github.com/ai/audio-recorder-polyfill

But it will be much better to have native support. Really useful feature.
Comment 13 dirkk0 2018-07-11 10:23:09 PDT
+1 from me.
I am working on PWAs for clients who would love proper audio and especially video support.
Comment 14 Remus Negrota 2018-07-12 00:53:15 PDT
Having this feature will greatly improve usability on iOS. As of now on Safari on iOS if you want to capture just audio you have to rely on HTML Media Capture and this does not even allow you to record audio directly, it records both videa and audio and after that we must extract the audio.

Not the simplest of tasks as it should be and is on all other modern browsers.
Comment 15 Jeremy Noring 2018-07-12 08:41:11 PDT
(In reply to Octavian Naicu from comment #10)
> Having this feature in Safari on iOS would allow us to move away from the
> limited HTML Media Capture spec (which on Safari/iOS doesn't even work for
> audio just video) and implement proper video recording directly in iOS
> devices using our UI, our start/stop/pause controls, our constraints,
> JavaScript, we could trigger events, etc.
> 
> Having this feature in Safari on macOS would allow us to retire the last
> piece of Flash we're using.
> 
> (In reply to Jeremy Noring from comment #6)
> 
> > Roundabout story: we've tried to make a MediaRecorder polyfill with
> > webassembly, and it is prohibitively difficult for a number of reasons
> > (tl;dr codec royalties are a thing, javascript garbage collection and video
> > are hard, script processor nodes are finicky and working with a canvas has
> > some idiosyncrasies that are difficult to address).  
> 
> We've actually considered doing the same thing: taking snapshots from the
> canvas and encoding them as video using a WebAssembly video encoding
> library. I'm not sure it's possible though or, if works, if it could be used
> in production. For example these FFMPEG WebAssembly builds are 12MB in size
> and 4-5MB gzipped https://github.com/BrianJFeldman/ffmpeg.js.wasm. Another
> problem is audio would have to be captured separately and thus it will most
> certainly be out of sync.
> 
> As an example, there is a working MediaRecorder polyfill for audio that
> records uncompressed pcm in .wav
> https://github.com/ai/audio-recorder-polyfill
> 
> We've also tried using WebRTC to establish a p2p connection to a server and
> record the video server side but the video quality is bad (since WebRTC
> prioritizes low latency as it should) and the connection process is
> extremely complex (to account for all possible networks) resulting in failed
> connections:
> https://addpipe.com/blog/troubleshooting-webrtc-connection-issues/
> 
> Chrome supports mediastream recording since January 2016. It was "The most
> starred Chrome feature EVER" with 2877 stars
> https://developers.google.com/web/updates/2016/01/mediarecorder
> 
> I am not even that much concerned about codecs as we can easily convert
> those server side to whatever we need.

So the issue with codecs is: if you want to playback the video you just recorded in the browser--which is a really common use case--then you either need MediaRecorder producing files supported by that particular browser, or you need yet another polyfill (we've been using ogv.js, for example) to decode whatever random codec you recorded in locally.

This is where the codec royalty issue comes into play: if you ship a polyfill that records in H.264, your company owes royalties to MPEG-LA. The easy way around this is to record in something that doesn't require royalties, like VP8, but then that necessitates yet another webassembly project to playback the video you just recorded.
Comment 16 Octavian Naicu 2018-07-13 02:03:58 PDT
On desktop we're using Media Recorder API + Flash on Safari/IE/legacy and that works great. We're most concerned about mobile where on Safari we're stuck with HTML Media Capture while Chrome on Android has full Media Recorder API support.
Comment 17 Michael L. 2018-07-22 03:25:07 PDT
This is also crucial to us, for the exact same reasons as previous contributors, getting rid of Flash and Media Capture for the sake of user experience.

Happy to help if I can, please update us on the current status !
Comment 18 jp pincheira 2018-07-25 15:14:17 PDT
Crucial to us too, we really don't want to use Flash, so sadly, we're encouraging our users to move away from Desktop Safari at the moment, to Chrome/FF/Opera.
Comment 19 Robert Gerald (Rob) Porter 2018-07-30 11:35:50 PDT
This is something where we've been forced to recommend only Android devices (&Chrome) for doing short video recording for our clients. Would love to see this having proper cross-browser support. Feels like such a large gap item to me, especially considering the push to abandon Flash.
Comment 20 Shradha 2018-08-16 00:07:16 PDT
We are using the api to let our users record short videos(<1 min). We've been forced to direct our users to download chrome/ff. We do want it on Safari as well but right now it just seems like too much effort.Waiting for it to be released for safari.
Comment 21 Matt 2018-08-17 09:50:42 PDT
Even Adobe recommends disabling Flash:

"Adobe said that it will now 'encourage content creators to build with new web standards,' such as HTML5, rather than Flash. It's also beginning to deprecate the Flash name by renaming its animation app to Animate CC, away from Flash Professional CC."

https://www.theverge.com/2015/12/1/9827778/stop-using-flash
Comment 22 jp pincheira 2018-08-17 10:02:38 PDT
I feel that "Status:	UNCONFIRMED" is a bit of a disrespect to developers using and caring about Webkit. It is really offensive that this is the status since 2012.
Comment 23 Timothy Swieter 2018-08-27 07:54:03 PDT
I'd love to see this implemented so that Safari and Chrome/FF can have similar functionality.
Comment 24 winofchina 2018-08-27 14:56:54 PDT
6 years passed, the bug still exists...
Comment 25 Thomas Sigdestad 2018-09-09 11:34:38 PDT
Let's get this done Apple!
Apple is slowly turning into a new Microsoft by stalling the development of the web - just like they did with ie6. That did not end well...

I'm sad to say I have many friends and colleagues that have used iOS since 2009, that have now abandoned it for Android due to the limited web support. Under Jobs, Safari/iOS was the best mobile web platform on earth - not anymore :-(
Comment 26 stuart 2018-09-16 09:55:20 PDT
Can someone from the webkit team tell us whether there is a plan to fix/implement this? If it's going to come and we just need to wait, then that's useful information. If it's not going to happen at all, then we know we need to make other plans.
Any info either way would be very useful.

Thankyou

Stuart
Comment 27 youenn fablet 2018-09-16 17:50:16 PDT
As detailed in https://webkit.org/status/#feature-mediastream-recording-api, this feature is under consideration. Corresponding WPT tests have also been imported in WebKit and are run in WebKit CI.

Any help around that feature is welcome.
Contributing media stream recording API tests to https://github.com/web-platform-tests/wpt would be useful. It would require MediaStream recording API knowledge plus general JS/HTML knowledge.
Comment 28 Zach Rattner 2018-10-01 13:19:44 PDT
+1 that this would be great to see ton mobile Safari since Chrome has had it for some time now. Recording streams through WebRTC sacrifices video quality since it's fundamentally a different use case than record + upload. Sort of strange to still be in unconfirmed status after 6 years...
Comment 29 Octavian Naicu 2018-10-02 05:52:19 PDT
We are now working on implementing recording through WebRTC for Safari on iOS and macOS and it is a pain: you need a server to handle signalling and act as the other client, the connection process is complex and might fail especially without another TURN server/service and the quality is just not there because WebRTC is made for low latency live video.

On Chrome/Android we can just use the MediaStream Recording API. Its the same code we use on desktop plus a few extra lines to handle the front/back camera.
Comment 30 Allan 2018-12-05 05:25:14 PST
We are working on doing a mobile version of our application and the challenge is to record videos using camera of IOS devices such as Iphone or iPADs, we are stuck and so far only android /chrome implementation is possible. If anyone has ideas, it will be grateful to share..
Comment 31 Allan 2018-12-05 05:34:49 PST
We are working on doing a web app version of our application on mobile devices,  the challenge is to use safari and access the camera and record videos on IOS devices such as Iphone or iPADs, we are stuck and so far only android /chrome implementation is possible. If anyone has ideas, it will be grateful to share..
Comment 32 Mark Beeby 2018-12-27 08:26:56 PST
Have the Safari team taken note of Edge's latest maneuver? In adopting the Chromium project they're going to be able to take the Microsoft brand forward without holding everyone back, Safari really is going to be the biggest pain in back for developers. This feature is one of too many that are sat in the ignored column by Apple...
Comment 33 David Mannion 2019-01-10 10:55:03 PST
We really need this feature implemented.  We have an application that works great in Chrome and Firefox on non-Apple devices but we had to write a work around for Webkit that requires the user to jump out of the browser to the device's video recording app to capture their video.  Please get this done ASAP!
Comment 34 Octavian Naicu 2019-01-29 02:18:03 PST
Great news! 

Safari Technology Preview 73 implements a basic working version of the MediaStream Recorder API.

I've covered what works and what doesn't here: https://addpipe.com/blog/safari-technology-preview-73-adds-limited-mediastream-recorder-api-support/

Hopefully a fully working implementation will be shipped in Safari 12.x .
Comment 35 Adam Szaloczi 2019-03-14 14:09:18 PDT
I am planning to make an app, where the main functionality would be audio recording in browser, but currently, the mediarecorder API is the bottleneck. There is a workaround with webaudio API, but thats very poorly documented, so very hard to implement.
Comment 36 pkishan1990 2019-03-19 07:46:35 PDT
Please add support, working with media stream server is scary and not supported by our current stack.
Comment 37 Jeff 2019-03-29 11:54:43 PDT
iOS 12.2 still does not support MediaRecorder. Please add!
Comment 38 Octavian Naicu 2019-08-08 01:45:07 PDT
Quick update:  the MediaRecorder feature in Safari is an Experimental Feature in both iOS 12.4 and iOS 13 public beta 4. It is turned off by default. You need to manually enable it from the iOS Settings > Safari > Advanced > Experimental Features for it to work.
Comment 39 Mayowa Daniel 2019-08-09 13:29:24 PDT
finally!!!!(In reply to Octavian Naicu from comment #38)
> Quick update:  the MediaRecorder feature in Safari is an Experimental
> Feature in both iOS 12.4 and iOS 13 public beta 4. It is turned off by
> default. You need to manually enable it from the iOS Settings > Safari >
> Advanced > Experimental Features for it to work.
Comment 40 Nam 2019-08-22 00:38:18 PDT
The recorded video frames are rotated 90 degrees and stretched by the MediaRecorder feature in Safari is an Experimental Feature
Comment 41 Alon Meytal 2019-09-09 01:03:40 PDT
Any idea when is this feature going to be out of the experimental phase??
Comment 42 Octavian Naicu 2019-09-09 02:58:59 PDT
(In reply to Alon Meytal from comment #41)
> Any idea when is this feature going to be out of the experimental phase??

Hopefully in iOS 13 - Apple's event is tomorrow - together with an HTML Media Capture implementation for audio-only recordings. That would bring it in line with Chrome on Android in terms of audio & video recording capabilities.
Comment 43 Octavian Naicu 2019-09-20 02:01:20 PDT
Installed Safari 13 on my Mac and iPhone yesterday. 

Media Stream Recorder API is still experimental :(.

On top of that trying to record just audio with HTML Media Capture crashes Safari on iOS and iPad OS, I've reported the issue here: https://bugs.webkit.org/show_bug.cgi?id=202039
Comment 44 Senthil Ramachandran 2019-11-01 15:27:10 PDT
Hi, with experimental features turned on, recorded videos look stretched and flipped -90 degrees.

Here is the my repo I used to reproduce this.
https://github.com/senpost/mediarecorderX

If you don't have node or you don't want to run this locally, I can try to publish this site into netlify so it is accessible from internet.
Comment 45 rigel 2020-01-27 18:18:48 PST
The experimental implementation still results in stretched/flipped video files. Here is a video of what this looks like in iOS 13.3: https://youtu.be/OVDM-aQhoiM

Repro steps:
1. Turn on MediaRecorder in Safari Experimental Settings (iOS 13)
2. Navigate to https://addpipe.com/media-recorder-api-demo/
3. Record + Save video
4. Open saved video in Chrome (no iOS webm playback)

Also described here: https://bugs.webkit.org/show_bug.cgi?id=198912
Comment 46 salvo 2020-03-25 08:52:22 PDT
Hi there!,

Currently even last Safari 13.1 does not have MediaRecorder activated by default.

Is there a release date for this Api?
Thanks
Comment 47 Diego Caravana 2020-03-28 06:26:09 PDT
Just curious to know why this feature is just half-baked.

Why even start implementing it if there is no interest (from Apple at least) in releasing it?

And it's clear there is no interest cause MediaRecorder is there as an experimental feature since more than one year, and given the fairly good implementations in other browsers, there is clearly no technical reason not to complete and deliver it.

Our clients are demanding more and more that our software works on iOS, too, but we cannot satisfy their needs as currently there is no simple alternative on iOS to do video recording, except using a distorted implementation of WebRTC perhaps, or creating an app, which we don't want to create yet.

In these hard times, enabling communication in every possible way should be the first priority of a company like Apple, a company that has a huge impact on many millions of lives every day.

Thanks for listening.
Comment 48 salvo 2020-03-28 06:59:03 PDT
@Diego. i think the biggest problem is the webm video replay after record.

it is very strange that MediaReacorder api can record in webm format but <video tag cannot reproduce it.

i have impementend a workaorund for this problem: convert the video client side with ffmepg_asm.js with codec: copy. just convert the container from webm to mp4.

So i need only to convice my clients to turn on the Experminetal Features flag.

Please Apple, take us a release date!!!!!
Comment 49 Octavian Naicu 2020-03-28 11:27:06 PDT
(In reply to Diego Caravana from comment #47)

> there is no simple
> alternative on iOS to do video recording, except using a distorted
> implementation of WebRTC perhaps, or creating an app, which we don't want to
> create yet.

We're actually still using a Flash-based client and a Wowza media server to record audio & video from Safari users. I think we'll stop supporting Safari end of 2020 unless Media Stream Recorder API is implemented.
Comment 50 Kim Scott 2020-05-11 11:55:48 PDT
We're currently just not supporting Safari at https://lookit.mit.edu (video-based online developmental research) because of this issue. Would be very excited about MediaStreamRecorder support!
Comment 51 AndyDeveloper 2020-05-12 08:27:28 PDT
@salvo (In reply to salvo from comment #48)

> it is very strange that MediaReacorder api can record in webm format but
> <video tag cannot reproduce it.

MediaRecorder on Safari can record directly in mp4 
 new MediaRecorder(stream, { type: 'video/mp4' })

Cheers
Comment 52 Diego Caravana 2020-05-29 13:38:24 PDT
(In reply to Kim Scott from comment #50)
> We're currently just not supporting Safari at https://lookit.mit.edu
> (video-based online developmental research) because of this issue. Would be
> very excited about MediaStreamRecorder support!

Thank you Kim, I was planning to do something to fill this gap anyway, but your project gave me another strong reason to do it.

So I'm even happier now to share the proof of concept I put together.

Basically it's a MediaRecorder polyfill that merges code from these two projects:

- https://github.com/GoogleChromeLabs/webm-wasm
- https://github.com/kbumsik/opus-media-recorder


The first one provides a way to efficiently create a webm video file through Wasm, while the second is a (good) example of MediaRecorder polyfill (just for audio recording, though).

All the credit goes to these two projects, I just packaged them together.

Both are fairly complex projects, so to make things simpler I worked on this file only:

https://github.com/dcaravana/webm-wasm/blob/ios_test/demo/live_download_mediarecorder.html


I want to reiterate that this is just a prototype, the code is quite rough and far from being usable in production, so feel free to take inspiration from it or even contribute back.

I'm quite proud of this result as it defeats any  reasoning behind holding the MediaRecorder implementation back in Safari (in fact, it took me a bit more that one day of work).
Comment 53 Diego Caravana 2020-06-29 02:57:21 PDT
No feedback in one month.

This bug has been filed in 2012.

After considering what I heard at WWDC keynote about Safari, I'm assuming there is an explicit will not to finish this implementation.

I just wonder why?

An official word from Apple (and I see Apple employees in the CC list here) would at least make it all more polite and put everyone's hopes finally to rest.

Maybe something like this?

https://www.zdnet.com/article/apple-declined-to-implement-16-web-apis-in-safari-due-to-privacy-concerns/


Thanks.
Comment 54 youenn fablet 2020-06-29 03:05:22 PDT
Implementation of MediaRecorder is making some progress with the implementation of progressive results now implemented.
Testing is of course most welcome when these changes will hit STP.
Comment 55 Zach Rattner 2020-07-18 08:14:42 PDT
The latest Safari Technology Preview (release 110) adds support for MediaRecorder.onstart and other APIs crucial for recording: 

https://developer.apple.com/safari/technology-preview/release-notes/

The Apple Developer site is only clear on how to get Safari Technology Preview on macOS. I couldn't find iOS instructions, but I'll try getting the latest iOS 14 beta on my iPhone and see if that does the trick.
Comment 56 Jeremy Noring 2020-07-29 15:31:37 PDT
This is now available in Chrome, Firefox, and Edge.  The only missing browser is safari.  Is there _any_ hope of this making into into safari without being hidden behind a switch?  I don't even want to go into the sort of horrific crap we've had to do to continue supporting safari for recording.
Comment 57 Octavian Naicu 2020-08-25 16:30:51 PDT
Safari 14 is one or two months out, is this going to be in Safari 14 (without the flag)? We need to know to prepare for either case:

1. not supported at launch or behind a flag: we'll not support Safari 14 and need to announce clients
2. supported at launch: we need to make sure our current MediaStream Recorder implementation works as expected
Comment 58 Jeremy Noring 2020-08-26 08:13:57 PDT
Ditto.  I'd like to know if we can stop blocking safari.
Comment 59 Diego Caravana 2020-09-17 05:58:01 PDT
For the recordi, Safari 14, out today for desktop and mobile, doesn't support this API yet.

Expected given the issues that are still open here.
Comment 60 AndyDeveloper 2020-09-17 11:45:31 PDT
I'm observing that in iOS 14 Safari, the video no longer appears stretched (it is still rotated -90 degrees). Any existing workarounds will have to become conditional, based on the iOS version.
Comment 61 AndyDeveloper 2020-09-22 08:56:43 PDT
Also, I am experiencing a new issue with the recorded files since iOS 14 and Safari 14 on MacOS. Most media players can't play the recorded files. It seems the metadata (duration, frame rate...) are not set properly. If I re-encode the file assuming the frame rate, then I get a valid file.
Comment 62 youenn fablet 2020-09-22 09:11:29 PDT
(In reply to AndyDeveloper from comment #61)
> Also, I am experiencing a new issue with the recorded files since iOS 14 and
> Safari 14 on MacOS. Most media players can't play the recorded files. It
> seems the metadata (duration, frame rate...) are not set properly. If I
> re-encode the file assuming the frame rate, then I get a valid file.

Can you file a new bug report and provide some repro steps?
Comment 63 AndyDeveloper 2020-09-22 09:56:36 PDT
Filed this bug: 
MediaRecorder produces invalid video files since iOS/Safari 14
https://bugs.webkit.org/show_bug.cgi?id=216832
Comment 64 Marcos G. 2020-09-22 12:24:12 PDT
Using safari 14, I am able to get video recording working using this example from https://webrtc.github.io/samples/src/content/getusermedia/record/.

In order to get the example working, I ignored the isTypeSupported check, specified video/mp4 vs video/webm, updated the constraints {video: true, audio:true}, and I am able to record video but not audio.

https://codepen.io/marcosdg3/pen/rNeoyzz

I used ffprobe and found the audio stream is missing. Am I missing something, is there any documentation you can share on how this is being used/tested in-house?

Any help would be much appreciated as we would like to support safari.

Video recorded in chrome:
$ ffprobe tested-in-chrome.mp4 
ffprobe version 4.2.2 Copyright (c) 2007-2019 the FFmpeg developers
  built with Apple clang version 11.0.0 (clang-1100.0.33.17)
  configuration: --prefix=/usr/local/Cellar/ffmpeg/4.2.2_2 --enable-shared --enable-pthreads --enable-version3 --enable-avresample --cc=clang --host-cflags= --host-ldflags= --enable-ffplay --enable-gnutls --enable-gpl --enable-libaom --enable-libbluray --enable-libmp3lame --enable-libopus --enable-librubberband --enable-libsnappy --enable-libtesseract --enable-libtheora --enable-libvidstab --enable-libvorbis --enable-libvpx --enable-libwebp --enable-libx264 --enable-libx265 --enable-libxvid --enable-lzma --enable-libfontconfig --enable-libfreetype --enable-frei0r --enable-libass --enable-libopencore-amrnb --enable-libopencore-amrwb --enable-libopenjpeg --enable-librtmp --enable-libspeex --enable-libsoxr --enable-videotoolbox --disable-libjack --disable-indev=jack
  libavutil      56. 31.100 / 56. 31.100
  libavcodec     58. 54.100 / 58. 54.100
  libavformat    58. 29.100 / 58. 29.100
  libavdevice    58.  8.100 / 58.  8.100
  libavfilter     7. 57.100 /  7. 57.100
  libavresample   4.  0.  0 /  4.  0.  0
  libswscale      5.  5.100 /  5.  5.100
  libswresample   3.  5.100 /  3.  5.100
  libpostproc    55.  5.100 / 55.  5.100
Input #0, mov,mp4,m4a,3gp,3g2,mj2, from 'tested-in-chrome.mp4':
  Metadata:
    major_brand     : isom
    minor_version   : 512
    compatible_brands: isomiso2avc1mp41
    encoder         : Lavf57.56.101
  Duration: 00:00:03.31, start: 0.000000, bitrate: 167 kb/s
    Stream #0:0(eng): Video: h264 (High) (avc1 / 0x31637661), yuv420p, 480x360 [SAR 1:1 DAR 4:3], 126 kb/s, 16 fps, 16 tbr, 16384 tbn, 32 tbc (default)
    Metadata:
      handler_name    : VideoHandler
    Stream #0:1(eng): Audio: aac (LC) (mp4a / 0x6134706D), 24000 Hz, mono, fltp, 32 kb/s (default)
    Metadata:
      handler_name    : SoundHandler


Video recorded in safari:
$ ffprobe tested-in-safari.mp4
ffprobe version 4.2.2 Copyright (c) 2007-2019 the FFmpeg developers
  built with Apple clang version 11.0.0 (clang-1100.0.33.17)
  configuration: --prefix=/usr/local/Cellar/ffmpeg/4.2.2_2 --enable-shared --enable-pthreads --enable-version3 --enable-avresample --cc=clang --host-cflags= --host-ldflags= --enable-ffplay --enable-gnutls --enable-gpl --enable-libaom --enable-libbluray --enable-libmp3lame --enable-libopus --enable-librubberband --enable-libsnappy --enable-libtesseract --enable-libtheora --enable-libvidstab --enable-libvorbis --enable-libvpx --enable-libwebp --enable-libx264 --enable-libx265 --enable-libxvid --enable-lzma --enable-libfontconfig --enable-libfreetype --enable-frei0r --enable-libass --enable-libopencore-amrnb --enable-libopencore-amrwb --enable-libopenjpeg --enable-librtmp --enable-libspeex --enable-libsoxr --enable-videotoolbox --disable-libjack --disable-indev=jack
  libavutil      56. 31.100 / 56. 31.100
  libavcodec     58. 54.100 / 58. 54.100
  libavformat    58. 29.100 / 58. 29.100
  libavdevice    58.  8.100 / 58.  8.100
  libavfilter     7. 57.100 /  7. 57.100
  libavresample   4.  0.  0 /  4.  0.  0
  libswscale      5.  5.100 /  5.  5.100
  libswresample   3.  5.100 /  3.  5.100
  libpostproc    55.  5.100 / 55.  5.100
Input #0, mov,mp4,m4a,3gp,3g2,mj2, from 'tested-in-safari.mp4':
  Metadata:
    major_brand     : iso5
    minor_version   : 1
    compatible_brands: isomiso5hlsf
    creation_time   : 2020-09-22T18:20:34.000000Z
  Duration: 18:47:50.35, start: 67669.391667, bitrate: 0 kb/s
    Stream #0:0(und): Video: h264 (High) (avc1 / 0x31637661), yuv420p, 640x480 [SAR 1:1 DAR 4:3], 0 kb/s, 30.39 fps, 30 tbr, 600 tbn, 1200 tbc (default)
    Metadata:
      creation_time   : 2020-09-22T18:20:34.000000Z
      handler_name    : Core Media Video
Comment 65 Marcos G. 2020-09-22 13:32:56 PDT
I had 'Modern WebAudio API' enabled in experimental features which prevented sound from being recorded. After disabling and restarting the browser, audio is recorded. The video is corrupted though.

Also updating my audio constraints to: 
{sampleRate: 24000, noiseSuppression: true, echoCancellation: true} 
prevented audio recording. 

Noting that the video constraints are ignored as well. 

Output from ffprobe for video recording:

[mov,mp4,m4a,3gp,3g2,mj2 @ 0x7fbd52008200] Could not find codec parameters for stream 0 (Video: h264 (avc1 / 0x31637661), none, 640x480, 1 kb/s): unspecified pixel format
Consider increasing the value for the 'analyzeduration' and 'probesize' options
Input #0, mov,mp4,m4a,3gp,3g2,mj2, from 'safari.mp4':
  Metadata:
    major_brand     : iso5
    minor_version   : 1
    compatible_brands: isomiso5hlsf
    creation_time   : 2020-09-22T20:16:42.000000Z
  Duration: 20:44:27.94, start: 2.249333, bitrate: 1 kb/s
    Stream #0:0(und): Video: h264 (avc1 / 0x31637661), none, 640x480, 1 kb/s, SAR 1:1 DAR 4:3, 30.05 fps, 600 tbr, 600 tbn, 1200 tbc (default)
    Metadata:
      creation_time   : 2020-09-22T20:16:42.000000Z
      handler_name    : Core Media Video
    Stream #0:1(und): Audio: aac (LC) (mp4a / 0x6134706D), 48000 Hz, mono, fltp, 174 kb/s (default)
    Metadata:
      creation_time   : 2020-09-22T20:16:42.000000Z
      handler_name    : Core Media Audio