@domore-hr/react-barcode-scanner
Version:
A barcode scanner base on Barcode Detector
28 lines (27 loc) • 1.55 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, onCameraInitialized = _a.onCameraInitialized, onCameraUnavailable = _a.onCameraUnavailable, props = __rest(_a, ["options", "onCapture", "trackConstraints", "onCameraInitialized", "onCameraUnavailable"]);
var instance = useRef(null);
var isCameraSupport = useCamera(instance, trackConstraints)[0];
var _b = useScanning(instance, options), detected = _b[0], open = _b[1], close = _b[2];
useEffect(function () {
if (isCameraSupport) {
open();
onCameraInitialized === null || onCameraInitialized === void 0 ? void 0 : onCameraInitialized();
}
else {
close();
onCameraUnavailable === null || onCameraUnavailable === void 0 ? void 0 : onCameraUnavailable();
}
}, [close, isCameraSupport, open, onCameraInitialized, onCameraUnavailable]);
useEffect(function () {
if (detected !== undefined) {
onCapture === null || onCapture === void 0 ? void 0 : onCapture(detected);
}
}, [detected, onCapture]);
return (_jsx("video", __assign({ ref: instance, style: { width: "100%", height: "100%", objectFit: "cover" }, autoPlay: true, muted: true, playsInline: true }, props)));
};
export default BarcodeScanner;