Barcode detector polyfill can not detect code_128 format on Safari.

[MahdiHoseiniTabar]

I used this library to recognize _qrcode and barcode with format _code128. It works for _qrcode but failed to recognize barcode with format _code128 it on Safari.

this is my code:

// BarcodeReader.tsx
import { BarcodeDetectorPolyfill } from "@undecaf/barcode-detector-polyfill";
import { useEffect } from "react";

const BarcodeReader = () => {
      function readBarcode() {
            if (!window["BarcodeDetector"]) {
                window["BarcodeDetector"] = BarcodeDetectorPolyfill;
            }
            navigator
            .mediaDevices
        .getUserMedia({
            video: true,
            audio: false,
        })
        .then((stream) => {
            if ("BarcodeDetector" in window) {
              const videoEl = document.querySelector("video") as HTMLVideoElement;
              videoEl.srcObject = stream;
              videoEl.play();

              const barcodeDetector = new window.BarcodeDetector({
                  formats: ["code_128"],
              });
                   const barcodes = await barcodeDetector.detect(videoEl);
               console.log(barcodes); // print empty array for code_128 but work for qr_code on Safari!
        })
        .catch(console.log);
       }
       useEffect(() => {
        readBarcode();
    }, []);
       return (
          <div>
              <video height={220} width={300} />
          </div>
    );
}
export default BarcodeReader;

Is there a way to detect code_128 barcode on Safari?

[undecaf]

I suspect that the video height and width settings might influence the videoHeight and videoWidth attributes (i.e. the intrinsic resolution) of the video. If that is the case then the resolution might be too low to detect Code-128 but still sufficient to detect QR codes.

Could you therefore please also log videoEl.videoHeight and videoEl.videoWidth to see whether that is true?

Another test for my hypothesis would be to test whether other bar codes such as ean_13 also cannot be detected.

[MahdiHoseiniTabar]

Thanks for your reply. I printed videoEl.videoWidth and videoEl.videoHeight and see 640 x 480 so you are right. I changed MediaTrackConstraints for video and set width: { exact: 1920 }, height: { exact: 1080 } now intrinsic resolution is 1920 x 1080 but steel cannot be detected code_128 :(

I take a picture from code_128 with great camera and the zoomed picture of code_128 be detected.

I tested ean_13 and be detected easily.

Have any solution?

[mfulton26]

Have you tried setting your width and height to the same values? I have found that an even numbered width/height along with an aspect ratio of one improves detection for code_128.

[undecaf]

No activity here for the last four weeks, so closing. Please reopen if necessary.