applyConstraints and getConstraints - JSFiddle

Test

by munrochiang

HTML

<button id="b1" onclick="apply(160,120)" disabled>160</button>
<button id="b2" onclick="apply(320,240)" disabled>320</button>
<button id="b3" onclick="apply(640,480)" disabled>640</button>
<button id="b4" onclick="apply(1280,720)" disabled>1280</button>
<button id="b5" onclick="stop()" disabled>Stop</button><br>
<div id="div3"></div>
<div id="div2"><p>0 x 0 x 0.0</p></div>
<video id="v" autoplay></video><br><div id="div"></div>

JavaScript

var constraints = { width: 160, height: 120, frameRate: 10 };
var track, t1 = 0, t2 = 1, f1 = 0, f2 = 0;

navigator.mediaDevices.getUserMedia({ video: constraints })
.then(stream => {
  track = (v.srcObject = stream).getVideoTracks()[0];
  sayit();
})
.then(() => new Promise(resolve => v.onloadedmetadata = resolve))
.then(() => [b1, b2, b3, b4, b5].forEach(b => b.disabled = false))
.then(() => repeat(1000, () => {
  t2 = v.currentTime; f2 = v.mozPaintedFrames;
  var hz = (f2 - f1) / (t2 - t1);
  update(div2, ""+ v.videoWidth +" x "+ v.videoHeight +" x "+ hz.toFixed(2));
  update(div3, JSON.stringify(track.getSettings()));
  t1 = t2; f1 = f2;
}))
.catch(failed);
var sayit = () => log(JSON.stringify(track.getConstraints()) +
            " ---> "+ JSON.stringify(track.getSettings()));
var apply = (w, h)  => track.applyConstraints({ width: w, height: h})
  .then(() => sayit()).catch(failed);

var stop = () => { track.stop(); v.srcObject = null; };

v.onresize = () => log("Resize: "+ v.videoWidth +"x"+ v.videoHeight);

var repeat = (ms, func) => new Promise(r => setInterval(func, ms));
var log = msg => div.innerHTML += "<p>" + msg + "</p>";
var update = (div, msg) => div.innerHTML = "<p>" + msg + "</p>";
var failed = e => log(e +", line "+ e.lineNumber);