CODEWITHSUNDEEP
javascriptwebrtcgetusermedia
Xavier Geerinck
Xavier Geerinck

Reputation: 636

Convert multiple MediaStreams into 1 stream

I want to convert 2 different MediaStreams into 1 MediaStream. For example: You have a moving text stream and I want to overlay this on a webcam stream. How would I be able to do this?

Some things to take into consideration: - I want to 'burn' the moving text on top of the webcam - No multiple videotracks - I'd rather not use toDataURL or render on canvas and then convert to 1 stream since this is a huge CPU hog.

Upvotes: 1

Views: 247

Answers (1)

jesup
jesup

Reputation: 6984

This answer depends on features not yet implemented and for which the spec is still to-be-written: 1) get video and text stream 2) use webgl to merge the text stream onto the video background (I presume webgl has stuff that can do this; effectively it's a green-screen technique 3) dump the webgl frames to a canvas 4)** get a mediastream from the canvas via canvas.captureStream() -- note, no implementations exist for this yet, and the spec isn't even written, though we all agree it's a good thing

Alternatively: if it's truly text, ship it in parallel over a DataChannel and render it at the receiver side into a text overlay of the . This will work today and be much more efficient. Bandwidth for the text will be minimal.

Upvotes: 1

Related Questions