WebRTC Reduce a recording video size

Question

I recorded video for 10 second in (Firefox/Chrome) using this example https://www.webrtc-experiment.com/RecordRTC/. Recorded blob size around [10 Sec, 4.36MB (320x240)] , Then I modified some parameter as fallows

var videoConstraints = {
    audio: false,
    video: {
        mandatory: {
            width: { min: 320 },
            height: { min: 240 }
        },
        optional: [
            { width: 320 },
            { width: 
                { min: 320 }
            },
            { frameRate: 60 },
            { quality: 10 },
            { width: 
                { max: 320 }
            },
            { facingMode: "user" }
        ]
    }
};

But still blob size is almost same. what can I do, for reduce recorded blob size.

Answer 1

Your constraints mix Chrome-specific format and the standard, and will work in no browser.

The standard (still requires a polyfill in Chrome):

var constraints = {
  video: {
    width: { min: 320 },
    height: { min: 240 },
    advanced: [
       { width: 320 },
       { width: { min: 320 } },
       { frameRate: 60 },
       { width: { max: 320 } },
       { facingMode: "user" }
    ]
  }
};

The standard also lets you express things declaratively, so this is the same/better:

var constraints = {
  video: {
    width: { min: 320, ideal: 320 },
    height: { min: 240 },
    frameRate: 60,
    facingMode: "user",
  }
};

Finally, if you're trying to reduce the size, don't use min. min and max are bounds, so min wont give you low resolutions, just the opposite, it sets a lower bound. Instead use ideal for gravity, or even max.

I wont explain what this would look like in Chrome, since it uses an outdated syntax that wont work in other browsers, but this snippet works across browsers using a polyfill:

var constraints = {
  video: {
    width: { min: 320, ideal: 320 },
    height: { min: 240 },
    frameRate: 60,
    facingMode: "user",
  }
};

function start() {
  navigator.mediaDevices.getUserMedia(constraints)
  .then(function(stream) { v.srcObject = stream; })
  .then(function() {
    return new Promise(function(r) { v.onloadedmetadata = r;});
  })
  .then(function() {
    log("Success: "+ v.videoWidth +"x"+ v.videoHeight);
  })
  .catch(failed);
}

function log(msg) { div.innerHTML += "<p>" + msg + "</p>"; }
function failed(e) { log(e + ", line " + e.lineNumber); }

<video id="v" height="120" width="160" autoplay></video><br>
<button onclick="start()">Start!</button><div id="div"></div>
<script src="https://rawgit.com/webrtc/adapter/master/adapter.js"></script>

quality is not a standard constraint.

Answer 2

@jib's answer will reduce the resolution/framerate of the capture. However, the reason the blob size doesn't change is that you need to reduce the encoding bitrate for MediaRecorder. However, no browser has implemented bitrate limits for MediaRecorder (Firefox plans to do so soon - Firefox's initial implementation was to support video recording in Firefox OS cameras, and that ran at a fixed bitrate).