function prettyLocalDate(d) {
  let millis = d.getTime() - (d.getTimezoneOffset() * 60000);
  d.setTime(millis);
  return d.toISOString().slice(0, 16).replace('T', '--');
}


// From Gist: https://gist.github.com/yig/aeeb1ee67a13bea98f3d
function saveBlobAs(blob, name) {
  "use strict";

  // Inspired by Syntax: http://stackoverflow.com/questions/23451726/saving-binary-data-as-file-using-javascript-from-a-browser/23451803#23451803
  // Initially created to work around a bug in eligray/FileSaver.js
  // which prevented saving multiple files
  // (Issue 165: https://github.com/eligrey/FileSaver.js/issues/165 ).

  // Create a hidden `a` element.
  var a = document.createElement("a");
  document.body.appendChild(a);
  a.style.cssText = "display: none";

  // createObjectURL() will leak memory.
  var url = window.URL.createObjectURL(blob);
  a.href = url;
  a.download = name;
  a.click();
  window.URL.revokeObjectURL(url);
  a.parentNode.removeChild(a);
}

function makeVideoScreenshot() {
  const vid = document.querySelector('video');

  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');
  if (!ctx) {
    throw new Error("Error getting canvas context");
  }
  const {
    videoWidth,
    videoHeight
  } = vid;
  canvas.setAttribute('width', vid.videoWidth);
  canvas.setAttribute('height', vid.videoHeight);
  ctx.drawImage(vid, 0, 0, videoWidth, videoHeight);

  var kMIMEType = "image/png";

  var blob = canvas.toBlob(function(blob) {
    const title = document.querySelector('title').text.replace(/[^\.\,\-\_\@\!\$ a-zA-Z0-9А-Яа-я()]+/g, '_');
    const hostname = window.location.hostname;
    const date = prettyLocalDate(new Date());
    const filename = [date, hostname, title].join('__').slice(0,250) + '.png';
    saveBlobAs(blob, filename);
  }, kMIMEType);
}

makeVideoScreenshot();