MediaRecorder power UP!

QV Develop — Thu, 18 Jun 2020 08:51:46 +0000

After a long time fiddling with MSE(MediaSourceBuffer) and canvas to record video/audio from a HtmlVideoElement where the stream constantly change between screen sharing and camera I finally found a solution to keep recording without MediaRecording stop recording.

Luckily I was not the only one with this problem see the following references:

So what did I do? I used the following example:

https://webrtc.github.io/samples/src/content/peerconnection/pc1/

I used the above sample code to create a new library that extends MediaStream functionality to change streams with the MediaRecorder breaking.

So what happens?

Setup local PeerConnection on the same website. webcam/screen Stream -> "remote" Video
Once the sender start sending the stream it makes an RTPSender and that has the changeTrack capability
Save the RTPSender and use it to switch streams. This will end up in the "remote" Video
Attach the MediaRecorder to the "remote" Video and start recording.

No you are able to switch the streams on the "local" video and it directly sends it to the "remote" Video.

I made the library open source and you can find it here StreamSwitcher also there is a demo so feel free to try out DEMO

This library is part of Meething a privacy first browser based video conference using dweb technology. Feel free to try out.

DEV Community: QV Develop

MediaRecorder power UP!