I am getting deprecated BrowserQRCodeReader(), getVideoInputDevices() and decodeFromInputVideoDeviceContinuously()
mike-rambil opened this issue · 2 comments
mike-rambil commented
Hello, noob question: Whats the fix for this?(screenshot inserted below)
here is my entire page.ts code in nextjs app router
// Sample Submit
async function onWarehouseSubmit(data: z.infer<typeof warehouseSchema>) {
try {
console.log('🚀 ~ warehouse barcode:', data);
// toast({
// title: 'You successfully submitted the following values ✅:',
// description: (
// <pre className='mt-2 w-[340px] rounded-md bg-slate-950 p-4'>
// <code className='text-white'>
// {JSON.stringify(tobeSentData, null, 2)}
// </code>
// </pre>
// ),
// });
// }
} catch (error: any) {
console.error('Sample Error:', error);
toast({
variant: 'destructive',
title: 'Error submitting sample',
description: (
<pre className='mt-2 w-[340px] rounded-md bg-slate-950 p-4'>
<code className='text-white'>
{error?.message
? JSON.stringify(error.message, null, 2)
: JSON.stringify(error, null, 2)}
</code>
</pre>
),
});
}
}
async function onBarrelSubmit(data: z.infer<typeof barrelSchema>) {
try {
console.log('🚀 ~ onBarrelSubmit barcode:', data);
// toast({
// title: 'You successfully submitted the following values ✅:',
// description: (
// <pre className='mt-2 w-[340px] rounded-md bg-slate-950 p-4'>
// <code className='text-white'>
// {JSON.stringify(tobeSentData, null, 2)}
// </code>
// </pre>
// ),
// });
// }
} catch (error: any) {
console.error('Sample Error:', error);
toast({
variant: 'destructive',
title: 'Error submitting sample',
description: (
<pre className='mt-2 w-[340px] rounded-md bg-slate-950 p-4'>
<code className='text-white'>
{error?.message
? JSON.stringify(error.message, null, 2)
: JSON.stringify(error, null, 2)}
</code>
</pre>
),
});
}
}
// Scan
const videoRef = useRef(null);
const [resultState, setResultState] = useState<string>('');
const codeReader = new BrowserQRCodeReader();
useEffect(() => {
const beep = new Audio('/beep.mp3'); //beep audio init
codeReader
.getVideoInputDevices()
.then((videoInputDevices: VideoInputDevice[]) => {
const selectedDeviceId = videoInputDevices[0].deviceId;
codeReader.decodeFromInputVideoDeviceContinuously(
selectedDeviceId,
videoRef.current,
(result: Result, err: Error) => {
if (result) {
// properly decoded qr code
console.log('Found QR code!', result);
const BCvalue = result.text;
// resultRef.current.textContent = BCvalue;
setResultState(BCvalue);
beep.play();
}
if (err) {
// As long as this error belongs into one of the following categories
// the code reader is going to continue as expected. Any other error
// will stop the decoding loop.
//
// Expected Exceptions:
//
// - NotFoundException
// - ChecksumException
// - FormatException
if (err instanceof NotFoundException) {
console.log('No QR code found.');
}
if (err instanceof ChecksumException) {
console.log(
'A code was found, but its read value was not valid.'
);
}
if (err instanceof FormatException) {
console.log(
'A code was found, but it was in an invalid format.'
);
}
}
}
);
})
.catch((err: Error) => console.error(err));
}, []);
return (
<>
<div className='w-full mt-5'>
<h1 className={`${inter.className} antialiased text-xl`}>
WMS Scanner
</h1>
</div>
<div className='flex flex-col w-full space-y-2'>
<video
ref={videoRef}
style={{
width: '350px',
height: '250px',
border: '1px solid gray',
}}
></video>
<Form {...warehouseForm}>
<form onSubmit={warehouseForm.handleSubmit(onWarehouseSubmit)}>
<div className='flex gap-2'>
<div className='flex-1'>
<FormField
control={warehouseForm.control}
name='warehouseBarcode'
render={({ field }) => (
<FormItem>
<FormLabel>Storage Location</FormLabel>
<FormDescription>
Scan a location to see all positions here..
</FormDescription>
<FormControl>
<Input
placeholder='WH-Floor-T-Rick'
{...field}
value={resultState}
onChange={(e) => setResultState(e.target.value)}
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
</div>
<div className='flex justify-center items-end'>
<Button
type='submit'
variant={
warehouseForm.formState.isSubmitting ? 'ghost' : 'default'
}
disabled={warehouseForm.formState.isSubmitting}
>
{warehouseForm.formState.isSubmitting ? (
<>
<LoaderIcon />
<span className='text-black'>Finding...</span>
</>
) : (
'Find'
)}
</Button>
</div>
</div>
</form>
</Form>
<Form {...barrelForm}>
<form onSubmit={barrelForm.handleSubmit(onBarrelSubmit)}>
<div className='flex gap-2'>
<div className='flex-1'>
<FormField
control={barrelForm.control}
name='barrelBarcode'
render={({ field }) => (
<FormItem>
<FormLabel>BarrelID</FormLabel>
<FormControl>
<Input
placeholder='XXX-XXX-XXX'
{...field}
value={resultState}
onChange={(e) => setResultState(e.target.value)}
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
</div>
<div className='flex justify-center items-end'>
<Button
type='submit'
variant={
barrelForm.formState.isSubmitting ? 'ghost' : 'default'
}
disabled={barrelForm.formState.isSubmitting}
>
{barrelForm.formState.isSubmitting ? (
<>
<LoaderIcon />
<span className='text-black'>Submitting...</span>
</>
) : (
'Submit'
)}
</Button>
</div>
</div>
</form>
</Form>
{/* <pre>
<code ref={resultRef}></code>
</pre> */}
<section className='flex-1 flex items-center justify-center h-full px-4'></section>
</div>
</>
);
}
werthdavid commented
Use BrowserQRCodeReader from here:
https://github.com/zxing-js/browser
mike-rambil commented
Thanks for the help!