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"); = "snapshot.png"; link.href = inputCanvas.toDataURL("image/png");; }; 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>

Have a suggestion? Recommend changes ->

Was this helpful?