How-to guides
Preview the camera and scan QR codes
Mount a viewfinder and control a live video session.
Enable preview
Apply capability setup with internalPlugins.videoStream: true and pluginOptions.VideoStream.usageDescription:
pnpm add @capgo/camera-preview@8.14.2Mount a viewfinder
Give the mounted element nonzero dimensions:
const viewfinder = useRef<HTMLDivElement>(null);
const stream = useVideoStream({ viewfinder, onDetect: setLastQR });
// Render inside your component:
<div ref={viewfinder} style={{ width: "100%", height: "40vh" }} />;Connect controls
Connect supported actions to buttons:
| Action | Call | Condition |
|---|---|---|
| Start or stop | stream.start(), .stop() | User action |
| Switch camera | stream.switchCamera() | Active session |
| Zoom | stream.setZoom(level) | Within value.zoom.min and .max |
| Torch | stream.setTorch(true) | value.torchAvailable |
| QR detection | Read detection results | detectionAvailable; browser needs BarcodeDetector |
You see the live preview after starting.
Handle stream.error; stop when finished. Unmount releases the camera. See Video stream reference.