DEV Community

An introduction to the MediaRecorder API

Phil Nash on June 03, 2019

On the web we can capture media streams from the user's camera, microphone and even desktop. We can use those media streams for real time video cha...

Read full post

florent giraud • Jun 4 '19

show us about video desktop capture please !

Phil Nash • Jun 4 '19

You can capture desktop video using getDisplayMedia as I show in this post on desktop capture in Edge. This works for Chrome now too, though you used to need an extension. Firefox supports desktop capture, but with an non-standard methods.

Once you capture the media stream, you can use the MediaRecorder just like in this post.

florent giraud • Jun 4 '19 • Edited

Maybe you will know this too so !

Can we stream just a part of the screen or can we take just a specific window

Do you know how to send this media stream to a rtmp flux ?

Phil Nash • Jun 4 '19

This isn’t something I’ve done, but I’m interested!

Within the getDisplayMedia permissions dialog, the user gets to choose whether they share the whole screen or just a window.

To stream just part of the screen, you could copy the video to a canvas element and crop it there, then export the canvas back to a MediaStream using the captureStream method.

As for streaming to RTMP, that is not something built into the browser. You’ll need to stream to a server using webRTC or web sockets and then have the server turn it into a RTMP stream.

florent giraud • Jun 4 '19

ok i got my response for the specific window capture

Jaimie Carter • Jun 4 '19

This looks great. Very interested in media. The AV1 codec looks great and it will be good when there are some hardware encoders, with acceptable latency.

Phil Nash • Jun 5 '19

That is interesting. It looks like the browsers that support MediaRecorder mostly also support playing video encoded with AV1

const video = document.createElement('video');
video.canPlayType('video/webm; codecs="av1"');
// => "probably"

But they don't yet record with it.

MediaRecorder.isTypeSupported('video/webm; codecs="av1"')
// => false

Will be interesting to see where this goes!

Jaimie Carter • Jun 5 '19

Indeed. Maybe the reason recording is unsupported (and I have no idea what I'm talking about, here) is due to the browsers not being about to cope with the level of processing the codec requires. ? An open source solution like this is certainly overdue in this space. Let's hope everyone (apple) supports it properly.

Phil Nash • Jun 5 '19

I would reckon so! Leaving browsers to hang for a long time would not be a good experience and they already suck up plenty of memory. It already takes a while when you record a video to encode it and produce it ready to play back. As you said, as hardware encoding becomes available it might become better and browsers might well be able to hand off to that hardware to process.

That's why the MediaRecorder.isTypeSupported method exists. So we can choose the best possible for our users and then fallback.

Amara Graham • Jun 4 '19

WebM totally hung me up the first time I was playing around with MediaRecorder API. Luckily the service I was sending the audio to accepted that format and I was good to go!

Phil Nash • Jun 5 '19

Ha, that is useful. I am going to look into translating from WebM to other formats in the browser, but that's going to take some WebAssembly wrangling (which I'm sort of looking forward to)!