WebRTC screen + audio recording solution?

Question

I have looked up and browsed about this but haven't reached the point where there is a solution. Let me explain the scenario.

I am working on a project where I have to build a virtual classroom with whiteboard, video+audio broadcasting + chat etc, where it will be one-to-many broadcast . "One" here is the teacher and "many" are the students.

I was working with Opentok for this, but my client cancelled it because he had issues. So, anyhow, I had to start working with bits and pieces from here and there from scratch and so I am.

Now, a point is reached where everything is ready and I have to record the entire session. Entire session here means the activity in the classroom (webpage) as well as audio coming from all the streams as it's going on, so that it can be saved on the server for later playback.

In record-RTC , I believe it's recording the audio and video and not the webpage. I found another one where it's recording the webpage. Plus it's very much unstable and laggy plus saving to server part is pretty much unclear everywhere. I believe that even if it records the audio it won't record the whole audio as in, audio outgoing and incoming (from teacher's perspective).

Isn't there any solution where it describes how to record the entire webpage along with audio (outgoing+incoming) and merge them into a file to save it on the server?

Otherwise, I have to probably give the bad news to my client.

Answer 1

You can try screen-recording extension for Chrome which is NOT_only open sourced, but also it is capable to record your microphone as well as all audios on a tab: ( requires chrome >= 53 )

• https://github.com/muaz-khan/Chrome-Extensions/tree/master/screen-recording

ie you can record entire conference on a tab; however only visible portion of the tab.

All audios from the selected tab will be recorded in a single WebM file.

You can implement same mechanism in a webpage as well. Your webpage will invoke/call chrome extension internally (via postMessage API).

You can check this demo as well:

• https://www.webrtc-experiment.com/RTCMultiConnection/audio-video-screen-sharing-recording.html

Above demo allows you record screen in a separate WebM file.

---

Conclusion:

1. Audio+Tab capturing API allows you record everything from the visible portion of selected tab; ie all visible videos, dashboard, all chats activity, and most importantly all audios from that tab.

2. AFAIK, MediaRecorder API doesn't (yet) provides any API to record multiple audio-tracks into a single WAV/WebM. Which means that above (audio+tab) option is currently the only available solution.

3. Neither multi-audio-tracks, nor multi-video-tracks recording is supported (by the MediaRecorder API).