43 lines
1.2 KiB
TypeScript
43 lines
1.2 KiB
TypeScript
|
"use client";
|
||
|
|
|
||
|
|
import { useEffect, useRef } from "react";
|
||
|
|
import { BrowserMultiFormatReader } from "@zxing/library";
|
||
|
|
|
||
|
|
type Props = { onDetected: (code: string) => void; };
|
||
|
|
|
||
|
|
export default function BarcodeScanner({ onDetected }: Props) {
|
||
|
|
const videoRef = useRef<HTMLVideoElement>(null);
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
const codeReader = new BrowserMultiFormatReader();
|
||
|
|
if (!videoRef.current) return;
|
||
|
|
|
||
|
|
// Obtener la cámara trasera si existe
|
||
|
|
codeReader.listVideoInputDevices().then((devices) => {
|
||
|
|
const backDevice = devices.find(d => d.label.toLowerCase().includes("back"));
|
||
|
|
const deviceId = backDevice ? backDevice.deviceId : devices[0].deviceId;
|
||
|
|
|
||
|
|
// Inicia la cámara inmediatamente
|
||
|
|
codeReader.decodeFromVideoDevice(deviceId, videoRef.current!, (result) => {
|
||
|
|
if (result) onDetected(result.getText());
|
||
|
|
});
|
||
|
|
}).catch(console.error);
|
||
|
|
|
||
|
|
return () => { codeReader.reset(); };
|
||
|
|
}, [onDetected]);
|
||
|
|
|
||
|
|
return (
|
||
|
|
<video
|
||
|
|
ref={videoRef}
|
||
|
|
style={{
|
||
|
|
width: "100%",
|
||
|
|
maxWidth: "600px", // Más grande
|
||
|
|
border: "2px solid #004aad",
|
||
|
|
borderRadius: "10px"
|
||
|
|
}}
|
||
|
|
autoPlay
|
||
|
|
muted
|
||
|
|
/>
|
||
|
|
);
|
||
|
|
}
|