Example

Real-time webcam

Continuous corner detection from getUserMedia, drawn on an overlay every 500 ms.

Camera off

Click "Start camera" to begin

FPS

Confidence

Inference

Tip: hold a document in front of the camera. The overlay outlines the detected quad in real time. The model runs entirely in your browser. No frames leave this page.

Source code for this example

import { Quadscan } from 'quadscan';

const video = document.querySelector('video')!;
const overlay = document.querySelector('canvas')!;
const ctx = overlay.getContext('2d')!;

const stream = await navigator.mediaDevices.getUserMedia({ video: true });
video.srcObject = stream;
await video.play();
overlay.width = video.videoWidth;
overlay.height = video.videoHeight;

const q = new Quadscan();
await q.initialize();

const timer = setInterval(async () => {
  const r = await q.scan(video, { mode: 'detect' });
  ctx.clearRect(0, 0, overlay.width, overlay.height);
  if (!r.success) return;

  const { topLeft, topRight, bottomRight, bottomLeft } = r.corners;
  ctx.strokeStyle = 'currentColor';
  ctx.lineWidth = 4;
  ctx.beginPath();
  ctx.moveTo(topLeft.x, topLeft.y);
  ctx.lineTo(topRight.x, topRight.y);
  ctx.lineTo(bottomRight.x, bottomRight.y);
  ctx.lineTo(bottomLeft.x, bottomLeft.y);
  ctx.closePath();
  ctx.stroke();
}, 500);

// Cleanup
function stop() {
  clearInterval(timer);
  for (const t of stream.getTracks()) t.stop();
  q.dispose();
}