Webcam Capture

ProNew

Take a photo with the camera: permission and error states, a camera chooser, an optional countdown, a mirrored preview, retake, and a File result. Tracks stop as soon as the camera is not needed.

Customize

This item has no props to tune. Use the lens above to change theme, density, direction and more.

Guide and examples

Installation


pnpm dlx shadcn@latest add @tealmac-pro/webcam-capture

Usage

The page must be served over HTTPS (or localhost) for the browser to allow the camera. Set a Permissions-Policy: camera=(self) header if your site restricts it.

Props

Prop	Type	Default	Description
`onCapture`	`(file: File) => void`	-	The photo.
`confirm`	`boolean`	`true`	Ask "Use photo" before calling `onCapture`.
`facingMode`	`user`, `environment`	`user`	Which camera to ask for first.
`mirror`	`boolean`	`true` for `user`	Mirror the preview and the saved file.
`countdown`	`number`	`0`	Seconds before the shutter.
`outputType`, `quality`, `fileName`		`image/jpeg`, `0.92`, `photo`	The saved file.

Accessibility

The camera starts only after a button press, never on load, so there is no surprise permission prompt and no unexpected recording indicator.
States are text: "Starting camera...", the blocked, missing and failed messages are announced as alerts with a "Try again" button; the live region says "Camera is on." and "Photo taken."
The countdown is announced number by number and also shown on screen; the button is disabled and labelled "Taking photo in 2" while it runs. The large number is hidden from assistive technology so it is not read twice.
Take photo, Use photo, Retake and the camera chooser are native controls. The video has an accessible name; the captured photo has alt text.
Every track is stopped after the photo, on unmount and before switching cameras, so the camera light goes off.

Testing

The component ships with a Testing Library test (webcam-capture.test.tsx) that covers: its main behaviour, the keyboard path and the error or empty states.

Guide and examples

Installation


pnpm dlx shadcn@latest add @tealmac-pro/webcam-capture

Usage

The page must be served over HTTPS (or localhost) for the browser to allow the camera. Set a Permissions-Policy: camera=(self) header if your site restricts it.

Props

Prop	Type	Default	Description
`onCapture`	`(file: File) => void`	-	The photo.
`confirm`	`boolean`	`true`	Ask "Use photo" before calling `onCapture`.
`facingMode`	`user`, `environment`	`user`	Which camera to ask for first.
`mirror`	`boolean`	`true` for `user`	Mirror the preview and the saved file.
`countdown`	`number`	`0`	Seconds before the shutter.
`outputType`, `quality`, `fileName`		`image/jpeg`, `0.92`, `photo`	The saved file.

Accessibility

The camera starts only after a button press, never on load, so there is no surprise permission prompt and no unexpected recording indicator.
States are text: "Starting camera...", the blocked, missing and failed messages are announced as alerts with a "Try again" button; the live region says "Camera is on." and "Photo taken."
The countdown is announced number by number and also shown on screen; the button is disabled and labelled "Taking photo in 2" while it runs. The large number is hidden from assistive technology so it is not read twice.
Take photo, Use photo, Retake and the camera chooser are native controls. The video has an accessible name; the captured photo has alt text.
Every track is stopped after the photo, on unmount and before switching cameras, so the camera light goes off.

Testing

The component ships with a Testing Library test (webcam-capture.test.tsx) that covers: its main behaviour, the keyboard path and the error or empty states.