2

I am making a web app and I am using a scanner and camera. I implemented a GS1-parser and that one is working fine (and the scanning with a hardware scan).

My problem is the camera scan. That one does not seem to scan the Group Separator character (needed to parse GS1/code128).

I am using react-qr-barcode-scanner and/or @thewirv/react-barcode-scanner

Screenshot 2 contains the logs of the data that has been collected from the camera scan of a GS1-barcode.

Screenshot 3 is what the data should be (similar to).

I tried to replace any other character digits to other characters, but that did not seem to work. Here's my code:

import { Text } from "@mantine/core";
import {BarcodeScanner} from "@thewirv/react-barcode-scanner";
import { useEffect, useState } from "react";
import { parseBarcode } from "gs1-barcode-parser-mod";

export default function Scan(props){

  const [data, setData] = useState("Geen resultaat");

  useEffect(() => {
      if(data !== null && data !== "Geen resultaat"){
          console.log(data.replace(/\D/g, "test"));
          console.log(data.replace(/\x1D/g, "test"));
          console.log(parseBarcode(data));
      }
  }, [data]);

  function handleSubmit(data){
      console.log(data);
      props.onGetStockItem(data);
  }

  const BarcodeReader = () => {
    return (
        // <BarcodeScanner
        //     facingMode="environment"
        //     width="500px"
        //     onUpdate={(err, result) => {
        //         if (result) handleSubmit(result?.text);
        //         if (err) console.log(err);
        //     }}
        // />
          <BarcodeScanner
              constraints={{facingMode: "environment"}}
              onSuccess={(text) => {console.log(text);setData(text); }}
              onError={(error) => {
              if (error) {
                  console.error(error.message);
              }
              }}
              onLoad={() => console.log('Video feed has loaded!')}
              containerStyle={{width: '100%'}}
          />
      );
  }   

  return (
      <div style={{marginBottom: 10, display: 'flex', justifyContent: 'center', flexDirection: 'column', alignItems: 'center'}}>
          <Text size={16} weight="medium" style={{textAlign: 'center'}}>Scan een tracecode:</Text>
          <BarcodeReader />
          <p>{data}</p>
      </div>  
  );
}

actual camera scanner logs of scanned data What the data should be to parse it

Takkie253
  • 156
  • 8

0 Answers0