WebRTC remote stream size too big

Question

I'm trying to record the remote video stream in a WebRTC call. I think the main problem is that I can't use codecs to compress the recorded video.

I've tried this code

  let options = {mimeType: 'video/mp4;codecs=vp9'};
  if (!MediaRecorder.isTypeSupported(options.mimeType)) {
    console.error(`${options.mimeType} is not Supported`);
  options = {mimeType: 'video/mp4;codecs=vp8'};
  if (!MediaRecorder.isTypeSupported(options.mimeType)) {
  console.error(`${options.mimeType} is not Supported`);
  options = {mimeType: 'video/mp4'};
  if (!MediaRecorder.isTypeSupported(options.mimeType)) {
    console.error(`${options.mimeType} is not Supported`);
    options = {mimeType: ''};
  }
}
}

In the snippet above I'm trying .mp4 type but codecs are rejected. Same happens if I try other codecs like h.264 instead of vp9.

The only file type that is accepted is .webm with vp9 encoding but its size is too big.

Code is based on this source

Brad · Answer 1 · 2020-12-07T06:08:47.227

0

Not all browsers support all the formats you're trying to use. In any case, you're complaining that the output with VP9 is too big, and yet it's one of the most efficient codecs available.

Your actual problem is that the default bitrates are too high, and you're not setting them. Try this instead:

const mediaRecorder = new MediaRecorder(stream, {
  audioBitsPerSecond: 128 * 1000, // 128 kbit/s
  videoBitsPerSecond: 2 * 1000 * 1000, // 2 Mbit/s
});

Adjust those values as necessary for your quality/file size tradeoff.

edited Dec 07 '20 at 06:08

answered Jul 25 '19 at 05:59

Brad

159,648
54
349
530

That was helpful, but I want to reduce the size further. Is there something else I can do? – Lauren Jul 25 '19 at 17:29
@Lauren Lower the bitrate further. – Brad Jul 25 '19 at 17:55
@Lauren I don't know what your expectations are, but video takes a great deal of bandwidth. – Brad Jul 25 '19 at 17:56
@Lauren So, you need about a 600 kbit/s video stream. That's really tight. You're going to want to scale the resolution way down. Avoid widescreen, just use a 4:3 aspect ratio. Perhaps at like 640x480, it will look okay. – Brad Jul 25 '19 at 18:36
@Brad, I used your code, for 12 minutes of recording, the video size shows 217 MB. What should I do to reduce its size? – Jayna Tanawala Dec 07 '20 at 06:02
@JaynaTanawala Video is large. All you can really do is lower the bitrate further. You might also consider lowering your resolution to make a lower bitrate more tolerable. – Brad Dec 07 '20 at 06:05

score -2 · Answer 2 · answered Jul 24 '19 at 19:51

From my experience in this same scenario, we have two options

Write the file type as .mp4 still the file internally is .webm.
Use a third-party library for compressing or converting the file type in the browser or in Node Backend. Ex: https://github.com/bgrins/videoconverter.js (not actively maintained)

Actually, it's not a good idea to load a heavy file in a browser. FFMPEGJS gzipped takes 6.7MB which is quite heavy.

I did write a screen recorder though https://s.ajx.io try it. I followed option 1 :P

Then you should be loading the videoconverter.js and do a really heavy task of conversion on a worker thread in the client browser. — visrey, Jul 24 '19 at 20:10

WebRTC remote stream size too big

2 Answers2