Dynamic resizing of MediaStream with canvas capture

by Andreas Pehrson

HTML

<button id="enlargeBtn">
Enlarge
</button>
<button id="shrinkBtn">
Shrink
</button>
<canvas id="c" width="100" height="100"></canvas>
<video id="v"></video>

JavaScript

var canvas = document.getElementById("c");
var video = document.getElementById("v");

var dimensions = v => v.videoWidth +"x"+ v.videoHeight;
var draw = () => {
  var ctx = canvas.getContext("2d");
  ctx.fillStyle = "green";
  ctx.fillRect(0, 0, canvas.width, canvas.height);
};

var enlarge = () => (canvas.width = canvas.height = canvas.width + 10, draw());
var shrink = () => (canvas.width = canvas.height = canvas.width - 10, draw());

document.getElementById("enlargeBtn").onclick = enlarge;
document.getElementById("shrinkBtn").onclick = shrink;

draw();

var stream = canvas.captureStream();
video.srcObject = stream;
video.play();
new Promise(r => video.onloadedmetadata = r)
  //.then(() => wait(1000)) // Bug!!
  .then(() => console.log("Loadedmetadata", dimensions(video)))
  .then(() => video.onresize = () => console.log("Resize", dimensions(video)))
  .then(() => setInterval(() => console.log(dimensions(video)), 1000))
  .catch(console.log.bind(console));