use-barcode-detector

Detect barcodes and QR codes with the Barcode Detection API.


Package	`@vizejs/composable/use-barcode-detector`
Own the source	`vize lib pull composable:use-barcode-detector`
Runtime exports	`useBarcodeDetector`
Gzip budget	3328 B

Usage

import { useBarcodeDetector } from "@vizejs/composable/use-barcode-detector";

Runtime contract

Utility	Category	Stability	SSR	Hydration	Cleanup	Targets	Host globals	Uses
`useBarcodeDetector`	media	experimental	deterministic-fallback	caller-managed	caller, reactive-scope	web, desktop	`globalThis`, `window`	`tryOnScopeDispose`, `useRafFn`

API

`useBarcodeDetector`

Detect barcodes and QR codes with the Barcode Detection API. detect(source) scans once; with a source (typically a camera video), detection also runs on animation frames through useRafFn, throttled by fpsLimit and never overlapping. Results are normalized into plain DetectedBarcode objects. The frame loop stops with the owning reactive scope; outside a scope call stop(). Server rendering: nothing is constructed or scheduled, supported is false and barcodes is empty. Inside a component supported turns true only after mounting, so hydration renders this server state first.

function useBarcodeDetector( options: UseBarcodeDetectorOptions = {}, ): BarcodeDetectorControls

const video = useTemplateRef<HTMLVideoElement>("video");
const { barcodes } = useBarcodeDetector({ source: video, formats: ["qr_code"] });

Types

`BarcodeBoundingBox`

Axis-aligned bounds of a detected barcode, in source pixels.

Member	Type	Description
`x`	`number`	Left edge.
`y`	`number`	Top edge.
`width`	`number`	Width.
`height`	`number`	Height.

`BarcodePoint`

Corner of a detected barcode, in source pixels.

Member	Type	Description
`x`	`number`	Horizontal coordinate.
`y`	`number`	Vertical coordinate.

`DetectedBarcode`

Normalized detection result.

Member	Type	Description
`rawValue`	`string`	Decoded text.
`format`	`BarcodeFormat`	Symbology (`"unknown"` for formats this module does not know).
`boundingBox`	`BarcodeBoundingBox`	Bounding box.
`cornerPoints`	`readonly BarcodePoint[]`	Corner points, clockwise from top-left.

`DetectedBarcodeLike`

Raw detection result produced by a host detector.

Member	Type	Description
`rawValue`	`string`	Decoded text.
`format`	`string`	Symbology name.
`boundingBox`	`BarcodeBoundingBox`	Bounding box.
`cornerPoints`	`readonly BarcodePoint[]`	Corner points.

`BarcodeDetectorLike`

Minimal BarcodeDetector instance.

Member	Type	Description
`detect`	`(source: ImageBitmapSource) => Promise<readonly DetectedBarcodeLike[]>`	Detect barcodes in an image source.

`BarcodeDetectorHost`

Minimal BarcodeDetector constructor.

Member	Type	Description
`getSupportedFormats`?	`() => Promise<readonly string[]>`	Formats the platform can detect.

`UseBarcodeDetectorOptions`

Options for useBarcodeDetector.

Member	Type	Description
`BarcodeDetector`?	`MaybeRef<BarcodeDetectorHost \| null \| undefined>`	`BarcodeDetector` constructor for alternate runtimes and tests. A ref (not a getter) because the host is a constructor function.
`formats`?	`MaybeRefOrGetter<readonly BarcodeFormat[] \| undefined>`	Formats to detect. Reactive; a new detector is created when it changes.
`source`?	`MaybeRefOrGetter<ImageBitmapSource \| null \| undefined>`	Source scanned continuously (for example a camera `<video>`). Video frames are skipped until `readyState >= 2`.
`immediate`?	`boolean`	Start continuous detection immediately.
`fpsLimit`?	`MaybeRefOrGetter<number \| undefined>`	Maximum continuous detections per second. A frame is also skipped while the previous detection is still running.
`scheduler`?	`FrameScheduler`	Frame host for continuous detection. An injected scheduler also drives frames without a browser `window` (native or offscreen hosts, tests).

`BarcodeDetectorControls`

Reactive state and actions returned by useBarcodeDetector.

Member	Type	Description
`supported`	`ComputedRef<boolean>`	Whether the Barcode Detection API is available.
`barcodes`	`Readonly<ShallowRef<readonly DetectedBarcode[]>>`	Barcodes found by the most recent successful detection.
`error`	`Readonly<ShallowRef<unknown>>`	Most recent detection failure, cleared on success.
`isActive`	`Readonly<ShallowRef<boolean>>`	Whether continuous detection is running.
`detect`	`(source: ImageBitmapSource) => Promise<readonly DetectedBarcode[]>`	Detect barcodes once.
`getSupportedFormats`	`() => Promise<BarcodeFormat[]>`	Formats the platform supports.
`start`	`() => void`	Start continuous detection of `source`.
`stop`	`() => void`	Stop continuous detection. Idempotent.