Modern gUM recorder: pause, resume, request data

by SingingTree

HTML

<button onclick="start(5000)">Record!</button>
<button onclick="pause()">Pause!</button>
<button onclick="resume()">Resume!</button>
<button onclick="requestData()">Request Data!</button>
<button onclick="clearLog()">Clear log!</button>
<div id="div"></div>
<br>
<video id="video" height="120" width="160" autoplay></video>
<a id="link"></a>

JavaScript

var pause;
var resume;
var requestData;
var start = ms => navigator.mediaDevices.getUserMedia({ audio: true, video: true })
  .then(stream => record(stream, ms)
    .then(recording => {
      stop(stream);
      video.src = link.href = URL.createObjectURL(new Blob(recording));
      link.download = "recording.webm";
      link.innerHTML = "Download recording";
      log("Playing "+ recording[0].type +" recording:");
    })
    .catch(log).then(() => stop(stream)))
  .catch(log);
var record = (stream, ms) => {
  var rec = new MediaRecorder(stream), data = [];
  rec.addEventListener("start", e => log("Got start event"));
  rec.addEventListener("dataavailable", e => log("Got dataavailable event"));
  rec.addEventListener("pause", e => log("Got pause event"));
  rec.addEventListener("resume", e => log("Got resume event"));
  rec.addEventListener("stop", e => log("Got stop event"));
  pause = () => rec.pause();
  resume = () => rec.resume();
  requestData = () => rec.requestData();
  rec.ondataavailable = e => data.push(e.data);
  rec.onpause = e => log("Got onpause");
  rec.onresume = e => log("Got onresume");
  rec.start();
  log(rec.state + " for "+ (ms / 1000) + " seconds...");
  var stopped = new Promise((y, n) => (rec.onstop = y, rec.onerror = e => n(e.error || e.name)));
  return Promise.all([stopped, wait(ms).then(() => rec.stop())])
    .then(() => data);
};

var clearLog = () => div.innerHTML = "";

var stop = stream => stream.getTracks().forEach(track => track.stop());
var wait = ms => new Promise(resolve => setTimeout(resolve, ms));
var log = msg => div.innerHTML += "<br>" + msg;