I have two videos one for streaming my webcam and the other to share my desktop screen/window. I need to bine these two media streams into one so that I can save it as an .mp4 file and broadcast it over WebRTC.

I have two videos one for streaming my webcam and the other to share my desktop screen/window. I need to bine these two media streams into one so that I can save it as an .mp4 file and broadcast it over WebRTC.

• javascript
• html
• socket.io
• webrtc

Share Improve this question Follow asked May 24, 2016 at 5:13 Pranin ShakyaPranin Shakya 12911 silver badge99 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

I was able to bine the two VIDEO(streams) tags by bounding them into a DIV tag.

       <div id="elementToShare">
         <video id="webcamVideo" controls loop autoplay class="webcam">No Support.</video>
         <video id="screenshareVideo" controls loop autoplay class="screenshare">No Support.</video>
       </div>

Then I used the DIV tag as a canvas to record the two videos as one using RecordRTC library by Muaz Khan.

   var elementToShare = document.getElementById('elementToShare');
   var canvasRecorder = RecordRTC(elementToShare,{
      type : 'canvas',
      recorderType: CanvasRecorder
   }); 

But the problem with this approach was, I was unable to record the audio stream from my webcam with the canvas for which i used ffmpeg_asm.js. As the js file is 18mb in size it takes a lot of time to load and process the video file.

As to my knowledge, WebRTC is still in its primary phase and I hope something efficient will e along to achieve such stuff.

NOTE: I was able to achieve the above functionality in Google Chrome only as at this stage Mozilla Firefox provided limited support. Whereas Safari has not provided WebRTC support so it was out of the picture from the beginning.

EDIT 1 : Serving the above application with Node.js as server support has improved performance and video processing capabilities. For example : The ffmpeg_asm.js is unable to process video bit rate larger than 2200k without Node.js.

Are you going to bine the streams in real-time? If yes, you need an MCU which will merge these two streams into one stream and record this stream for you.

As an option you can record these streams on server-side and then mix the streams using ffmpeg.

Found this in a ment on another question that I just responded to with a plete proof-of-concept solution. Anyone that finds this - a solution can be found here.

Note: The code there uses video/webm and the vp9 codec.. those lines can be easily replaced to generate a video/mp4 file using h264 codec instead :)