react-qr-barcode-scanner
Version:
A simple React Component using the client's webcam to read barcodes and QR codes.
70 lines (69 loc) • 2.81 kB
TypeScript
import React from "react";
import { BarcodeFormat, Result } from "@zxing/library";
import { BarcodeStringFormat } from "./BarcodeStringFormat";
declare global {
interface MediaTrackCapabilities {
torch?: boolean;
}
}
export declare const BarcodeScanner: ({ onUpdate, onError, width, height, facingMode, torch, delay, videoConstraints, stopStream, formats, }: {
/**
* Function that returns the result for every captured frame. Text from barcode can be accessed from result.getText() if there is a result.
* @param arg0 Error message or null
* @param arg1 result of the scan
* @returns
*/
onUpdate: (arg0: unknown, arg1?: Result) => void;
/**
* If passed to the component, this function is called when there is an error with the camera (rather than with with reading the QR code, which would be passed to onUpdate). An example would be an error thrown when the user does not allow the required camera permission.
* @param arg0 Error message or DOMException
* @returns
*/
onError?: (arg0: string | DOMException) => void;
/**
* The width of the video element. Default is "100%".
* Can be a number (in pixels) or a string (e.g. "100%").
* If a number is provided, it will be converted to a string with "px" appended.
* If a string is provided, it will be used as-is.
* @example
* width={500} // 500px
* width="100%" // 100% of the parent element
*/
width?: number | string;
/**
* The height of the video element. Default is "100%".
* Can be a number (in pixels) or a string (e.g. "100%").
* If a number is provided, it will be converted to a string with "px" appended.
* If a string is provided, it will be used as-is.
* @example
* height={500} // 500px
* height="100%" // 100% of the parent element
*/
height?: number | string;
/**
* The facing mode of the camera. Default is "environment".
* Can be "user" for front camera or "environment" for back camera.
*/
facingMode?: "environment" | "user";
/**
* Whether to turn on the flashlight. Default is false.
*/
torch?: boolean;
/**
* Delay between scans in milliseconds. Default is 500ms.
*/
delay?: number;
/**
* Video constraints to pass to the webcam. If not provided, the default constraints will be used.
*/
videoConstraints?: MediaTrackConstraints;
stopStream?: boolean;
/**
* Array of barcode formats to decode. If not provided, all formats will be used. A smaller list may improve the speed of the scan.
*
* @example
* formats={["QR_CODE", "DATA_MATRIX"]}
*/
formats?: BarcodeFormat[] | BarcodeStringFormat[];
}) => React.ReactElement;
export default BarcodeScanner;