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?