react-barcode-scanner
Version:
A barcode scanner base on Barcode Detector
37 lines (36 loc) • 1.61 kB
JavaScript
import { __assign, __rest } from "tslib";
import { jsx as _jsx } from "react/jsx-runtime";
import { useEffect, useRef } from 'react';
import { useCamera, useScanning } from '../hooks';
var BarcodeScanner = function (_a) {
var options = _a.options, onCapture = _a.onCapture, trackConstraints = _a.trackConstraints, _b = _a.paused, paused = _b === void 0 ? false : _b, props = __rest(_a, ["options", "onCapture", "trackConstraints", "paused"]);
var instance = useRef(null);
var isCameraReady = useCamera(instance, trackConstraints).isCameraReady;
var _c = useScanning(instance, options), detectedBarcodes = _c.detectedBarcodes, startScan = _c.startScan, stopScan = _c.stopScan;
useEffect(function () {
if (isCameraReady && !paused) {
startScan();
}
else {
stopScan();
}
}, [stopScan, isCameraReady, startScan, paused]);
useEffect(function () {
if (detectedBarcodes !== undefined) {
onCapture === null || onCapture === void 0 ? void 0 : onCapture(detectedBarcodes);
}
}, [detectedBarcodes, onCapture]);
useEffect(function () {
var video = instance.current;
if (!video)
return;
if (isCameraReady && !paused) {
video.play().catch(console.error);
}
else {
video.pause();
}
}, [paused, isCameraReady]);
return (_jsx("video", __assign({ ref: instance, style: { width: '100%', height: '100%', objectFit: 'cover' }, autoPlay: true, muted: true, playsInline: true }, props)));
};
export default BarcodeScanner;