I am getting deprecated BrowserQRCodeReader(), getVideoInputDevices() and decodeFromInputVideoDeviceContinuously()

[mike-rambil]

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]

Use BrowserQRCodeReader from here: https://github.com/zxing-js/browser

[mike-rambil]

Thanks for the help!