takePhoto.js

function takePhoto(video, mimeType = 'image/jpeg') {
  return new Promise(resolve => {
    video.animate({opacity: [0,1]}, 300);
    const canvas = document.createElement('canvas');
    canvas.width = video.videoWidth;
    canvas.height = video.videoHeight;
    // TODO
    // https://developer.mozilla.org/en-US/docs/Web/API/OffscreenCanvas/getContext
    // https://bugzilla.mozilla.org/show_bug.cgi?id=801176
    canvas.getContext('2d').drawImage(video, 0, 0);
    canvas.toBlob(resolve, mimeType);
  })
}