applyConstraints

Test

by jib1

HTML

<video id="v" height="120" width="160" autoplay></video><br>
<button id="sd" onclick="apply(640,480)">SD</button>
<button id="hd" onclick="apply(1280,720)">HD</button>
<button id="stopp" onclick="stop()">Stop</button>
<div id="div"></div><div id="div2"></div>

JavaScript

var constraints = { width: 320, height: 240, frameRate: 10 };

navigator.mediaDevices.getUserMedia({ video: constraints })
.then(stream => v.srcObject = stream)
.then(() => new Promise(r => v.onloadedmetadata = r))
.then(() => {
  var t1, t2, f1, f2;
  setInterval(() => {
    t2 = v.currentTime, f2 = v.mozPaintedFrames;
    update(v.videoWidth +" x "+ v.videoHeight +" x "+
           ((f2-f1) / (t2-t1)).toFixed(2));
    t1 = t2; f1 = f2;
  }, 1000);
})
.catch(log);

function apply(w, h) {
  var track = v.srcObject.getVideoTracks()[0];
  constraints.width = w;
  constraints.height = h;
  track.applyConstraints(constraints)
  .then(() => log("Applied "+ w +"x"+ h))
  .catch(log);
};

var stop = () => (v.srcObject.stop(), v.srcObject = null);
var log = msg => div.innerHTML += "<br>" + msg;
var update = msg => div2.innerHTML = msg;