Frame capture

Some use-cases (proctoring, KYC and healthcare) require taking snapshots of video frames. This can be achieved on the video element by using web platform APIs (see snippet below).

export const downloadSnapshot = inputCanvas => {
  const link = document.createElement("a");
  link.download = "snapshot.png";
  link.href = inputCanvas.toDataURL("image/png");
  link.click();
};

export const createSnapshotFromVideo = inputVideo => {
  const canvas = document.createElement("canvas");
  canvas.width = inputVideo.videoWidth;
  canvas.height = inputVideo.videoHeight;
  const context = canvas.getContext("2d");
  context.drawImage(inputVideo, 0, 0, canvas.width, canvas.height);
  downloadSnapshot(canvas);
};

This snippet can be attached to a button that passes the video element and triggers the above method.

<button onClick="createSnapshotFromVideo(document.querySelector('video'))">
  Capture snapshot
</button>

const VideoTile = () => {
  const ref = useRef();
  // code to render video

  return ( 
    <video ref={ref} />
    <button onClick={() => {
      createSnapshotFromVideo(ref.current);
    }}>Capture snapshot</button>
  )
}