MediaStream Desktop Capture with Web Camera Overlay

user_13765504 0
Viewed 372

I am currently trying to build a WebRTC-based application using MediaStream to capture the computer screen and save it to a video file. I have it working, BUT, now I am trying to add an additional layer to the recorded video so that the Web Camera appears.

As far as I understand, with the Media Streams API, I cant use two Video sources at the same time. So I decided to draw the captured video to a Canvas element and layer the Web Camera on that, and get the stream from the Canvas. But I am having issues and can't get it working

What I am trying to build is something like what Loom has, with the desktop capture and the web camera layered on-top in a circle.

I would like to know if I am heading in the right direction If you were to build something like this, how would you approach it?

mediastream chromium javascript
1 Answers

If you can, the best is probably to stream two MediaStreams: one for the camera, and an other for the screencast.
Then it's just css overlaying of two <video> elements.

Of course you could also do the compositing on the emitter side, by drawing both videos to an HTMLCanvasElement and then streaming a MediaStream generated from this canvas using its captureStream method, but I guess it would end up being more inefficient than the two streams option, and canvas streams quality is generally quite bad...

user_37027970
Related