Save frame from video element

video2frame.js

/**
 * Save frame from video element
 * @author Nurudin Imsirovic <[email protected]>
 * @param {Element} video Video element
 * @param {boolean} download Download frame as file
 * @param {string} filename Download name
 * @return {?string} Blob URL of frame
 */
function video2frame(video = null, download = true, filename = null) {
  // Not a video element
  if (video instanceof HTMLVideoElement === false) {
    return null;
  }

  // Video dimensions
  let width = video.videoWidth;
  let height = video.videoHeight;

  // Create canvas to draw the frame into
  let canvas = document.createElement('canvas');
  canvas.context = canvas.getContext('2d');
  canvas.width = width;
  canvas.height = height;
  canvas.context.drawImage(video, 0, 0, width, height);

  let blob_url = '';

  // Create URL for Blob
  canvas.toBlob(blob => {
    blob_url = URL.createObjectURL(blob);

    if (download) {
      let a = document.createElement('a');
      a.href = blob_url;
      a.download = filename ?? '';
      a.click();
      a.remove();
    }
  });

  return blob_url;
}