Modern gUM resize

Shows track.applyConstraints

by jib1

HTML

<table><tr>
  <td><button onclick="start()">Start!</button></td>
  <td><div id="info"></div></td>
</tr></table><div id="div2"></div><div id="sliders"></div><br>
<video id="v" autoplay></video>
<script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>

JavaScript

var c = { width: 0, height: 0 };
var setWidth = e => apply(c.width = e.target.value);
var setHeight = e => apply(c.height = e.target.value);

var start = () => navigator.mediaDevices.getUserMedia({ video: c })
  .then(stream => v.srcObject = stream)
  .then(() => new Promise(resolve => v.onloadedmetadata = resolve))
  .then(() => setInterval(() =>
    update(`${c.width}x${c.height} -> ${v.videoWidth}x${v.videoHeight}`), 50))
  .catch(log);

var apply = () => v.srcObject &&
  v.srcObject.getVideoTracks()[0].applyConstraints(c).catch(log);

// Sliders setup
[{ min: 0, max: 1920, value: c.width, onchange: setWidth },
 { min: 0, max: 1080, value: c.height, onchange: setHeight }]
.forEach(props => {
  var buttons = ["range", "number"].map((type, i) => {
    var button = document.createElement("input");
    button.type = type;
    for (var prop in props) button[prop] = props[prop];
    button.oninput = () => buttons[1-i].value = buttons[i].value;
    return button;
  });
  buttons.forEach(button => sliders.appendChild(button));
  sliders.appendChild(document.createElement("br"));
});

var log = msg => div.innerHTML += "<br>" + msg;
var update = msg => info.innerHTML = msg;