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>
);
}