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>
  )
}