React中摄像头扫描GS1条码无法识别分组分隔符的问题

问题概述 #

Web应用集成了硬件扫描器和摄像头扫描功能，GS1解析器已实现，硬件扫描器能正常识别GS1/Code128所需的分组分隔符（Group Separator，ASCII 0x1D），但摄像头扫描时，该分隔符丢失导致解析失败。使用的组件为react-qr-barcode-scanner和@thewirv/react-barcode-scanner，尝试字符替换未解决问题。

相关代码 #

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

现象 #

• 摄像头扫描输出的日志数据中无分组分隔符
• 硬件扫描器输出的目标数据包含正确分隔符，可被parseBarcode正常解析

解决方案 #

1. 检查组件的原始数据输出配置

很多摄像头扫描组件会默认过滤非打印字符（包括ASCII 0x1D）：

• 查看@thewirv/react-barcode-scanner的底层依赖（如zbar.js），确认是否有配置项开启原始数据输出，确保分隔符不被过滤
• 若组件支持，修改配置保留完整的扫描原始数据

2. 基于GS1规则手动恢复分隔符

GS1条码遵循应用标识符(AI)+数据的结构，AI多为2位或3位数字（如01对应GTIN，10对应批号）。可以通过正则匹配AI，自动插入分隔符：

// 恢复GS1分组分隔符的工具函数
function restoreGS1Separator(rawData) {
  // 匹配2位或3位AI，在其后插入分隔符
  return rawData.replace(/(\d{2,3})(?=\d)/g, '$1\x1D');
}

// 在useEffect中替换原有逻辑
useEffect(() => {
  if(data !== null && data !== "Geen resultaat"){
      const restoredData = restoreGS1Separator(data);
      console.log(parseBarcode(restoredData));
  }
}, [data]);

3. 验证字符编码，针对性替换

先确认扫描得到的字符串中分隔符的真实状态：

useEffect(() => {
  if(data !== null && data !== "Geen resultaat"){
      // 打印每个字符的ASCII码，排查分隔符是否被替换
      [...data].forEach((char, idx) => {
          console.log(`位置${idx}: ${char} (ASCII: ${char.charCodeAt(0)})`);
      });
  }
}, [data]);

如果发现分隔符被替换成了空格、空字符串等，直接针对性替换恢复：

// 示例：若分隔符被替换为空格
const restoredData = data.replace(/ /g, '\x1D');

4. 更换底层扫描库

如果当前组件无法满足需求，可直接使用支持原始数据捕获的库（如zbar-wasm、quagga.js），自定义扫描逻辑，确保完整获取条码中的所有字符。

内容的提问来源于stack exchange，提问作者Takkie253