Firefox WebRTC + MediaRecorder and changing resolutions

HTML

<button id="startButton">
Start
</button>
<canvas id="canvas" width="60" height="40"></canvas>
<video id="canvasVideo" width="60" height="40"></video>
<video id="video" width="60" height="40"></video>
<a id="downloadButton" download="recording.webm" disabled="true">
Download recording
</a>
<div id="log" style="white-space:pre;font-family:Courier New;">
    <p><b>Log</b></p>
</div>

JavaScript

var logs = document.getElementById("log");
function log() {
  // Make an array copy of arguments to have access to array
  // methods like map, join.
  var args = new Array(arguments.length);
  for(var i = 0; i < args.length; ++i) {
      args[i] = arguments[i];
  }

  var p = document.createElement('p');
  var repr = arg => {
    if (typeof(arg) == "object") {
        return JSON.stringify(arg, null, 2);
    } else {
      return arg;
    }
  };

  p.innerHTML = args.map(a => repr(a))
                    .join(" ");
  logs.appendChild(p);
}

window.RTCPeerConnection = window.RTCPeerConnection || window.mozRTCPeerConnection;

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var canvasLargeWidth = canvas.width;
var canvasLargeHeight = canvas.height;
var canvasSmallWidth = canvas.width / 2;
var canvasSmallHeight = canvas.height / 2;

var canvasVideo = document.getElementById("canvasVideo");
var video = document.getElementById("video");
var stream = canvas.captureStream(0);
canvasVideo.srcObject = stream;
canvasVideo.play();
var recorder;

function drawLarge() {
  canvas.width = canvasLargeWidth;
  canvas.height = canvasLargeHeight;
  ctx.fillStyle = "blue";  
  ctx.fillRect(0, 0, canvas.width, canvas.height);
  stream.requestFrame();
}

function drawSmall() {
  canvas.width = canvasSmallWidth;
  canvas.height = canvasSmallHeight;
  ctx.fillStyle = "green";  
  ctx.fillRect(0, 0, canvas.width, canvas.height);
  stream.requestFrame();
}

function wait(time, f) {
  return new Promise(y => setTimeout(() => { f(); y(); }, time));
}

var pcSend = new window.RTCPeerConnection();
var pcRecv = new window.RTCPeerConnection();

window.pcSend = pcSend;
window.pcRecv = pcRecv;

pcSend.name = "pcSend";
pcRecv.name = "pcRecv";

function setupIceGathering(from, to) {
  var success = () => log("Added an ice candidate from", from.name, "to", to.name);
  var failure = err => log("Failed to add ice candidate from", from.name, "to", to.name);
 ...