zxing-js / library

Multi-format 1D/2D barcode image processing library, usable in JavaScript ecosystem.
https://zxing-js.github.io/library/
Apache License 2.0
2.51k stars 547 forks source link

Not reading 2d CODE_128 barcodes from camera #394

Closed lormar71 closed 7 months ago

lormar71 commented 3 years ago

Hi. I am trying to develop a web application that reads barcodes by using camera. With two-dimensional codes of type DATA_MATRIX I have no problem. But when my script tries to scan one-dimensional barcodes of type UCC-128 / CODE_128 [such as: (91)91792429(37)5760] it fails to decode it. I am using the following code reader: codeReader = new ZXing.BrowserMultiFormatReader(); Why does this happen?

Thank you!

Best regards, Lorenzo

ymzuiku commented 3 years ago

I have same issue

odahcam commented 3 years ago

Plase provide an example of your code or a demo so I can reproduce your issue.

lormar71 commented 3 years ago

Here is my code:

$scope.camera = {};
$scope.camera.chkitem = chkitem;
$scope.camera.result = null;

let selectedDeviceId;

/*
const hints = new Map();
hints.set(ZXing.DecodeHintType.POSSIBLE_FORMATS, [
                                                    ZXing.BarcodeFormat.DATA_MATRIX,
                                                    ZXing.BarcodeFormat.CODE_128
                                                 ]);
const codeReader = new ZXing.BrowserMultiFormatReader(hints);
*/

const codeReader = new ZXing.BrowserMultiFormatReader();

$scope.camera.running = false;

codeReader.listVideoInputDevices().then((videoInputDevices) => {

    const sourceSelect = document.getElementById('sourceSelect');
    selectedDeviceId = videoInputDevices[0].deviceId;

    if (videoInputDevices.length >= 1) {

        videoInputDevices.forEach((element) => {
            const sourceOption = document.createElement('option');
            sourceOption.text = element.label;
            sourceOption.value = element.deviceId;
            sourceSelect.appendChild(sourceOption);
        })

        sourceSelect.onchange = () => {
            selectedDeviceId = sourceSelect.value;
        };

        const sourceSelectPanel = document.getElementById('sourceSelectPanel');
        sourceSelectPanel.style.display = 'block';
    }

});

// Start
$scope.camera.start = function() {

    if(!$scope.camera.running) {

        $scope.camera.running = true;

        codeReader.decodeFromVideoDevice(selectedDeviceId, 'video', (result, err) => {

            if (result) {

                $scope.camera.result = result.text;
                document.getElementById('result').textContent = $scope.camera.result;

                $timeout(function () {
                    $scope.camera.chkitem.measured_value = $scope.camera.result;
                    $scope.modal.checkThisItem($scope.camera.chkitem);
                    $scope.camera.reset();
                    $scope.camera.close();
                }, 250);

            }

            if (err && !(err instanceof ZXing.NotFoundException)) {
                $scope.camera.result = null;
                document.getElementById('result').textContent = err;
                $scope.camera.chkitem.measured_value = null;
                $scope.modal.checkThisItem($scope.camera.chkitem);
            }

        });

    }

};

// Reset
$scope.camera.reset = function() {
    codeReader.reset();
    $scope.camera.running = false;
    $scope.camera.result = null;
    document.getElementById('result').textContent = '';
};

I need to acquire both DATA_MATRIX and CODE_128 barcodes.

I have also tried to narrow it down to only these two types of barcodes (see commented lines with Hints), but nothing changes. DATA_MATRIX are encoded correclty, CODE_128 are not acquired (nothing is returned).

Thanks, Lorenzo

odahcam commented 3 years ago

Understood, are you encoding your own codes? Could you provide some examples?

lormar71 commented 3 years ago

Here is an example of barcode that my software should be able to read: barcode (1)

lormar71 commented 3 years ago

The format of this barcode is "CODE_128" (type: "TEXT"). And it is correclty decoded by the ZXing Android app "Barcode scanner".

NicoP-S commented 2 years ago

I have a similar problem. a valid code_128 barcode which is decoded by the app fast can't be decoded in zxing-js port. @odahcam have you any idea why this is not working? I tried to compare the Code128Reader.ts with the original zxing (java) reader but cant't find any difference.

mark99i commented 2 years ago

I have same issue

jumafuse commented 1 year ago

Same issue here

jumafuse commented 1 year ago

An update on this problem would be appreciated, a bounty can be offered.

teckel12 commented 1 year ago

I believe I know what the problem is (if you're using a mobile phone to scan). Phones almost always have multiple cameras these days. And the code is just picking the first camera device (which for me was a camera with manual focus only and no torch):

videoInputDevices[0].deviceId

Instead, you should be selecting the most approprate camera for barcode scanning (which includes auto focus and torch). I forked a Vue library and added new features to select the correct camera for barcode scanning, and allow the user to turn on the torch (flash) as well as control the zoom, manual focus, and landscape mode. All of these features are designed to result in a much higher scanning ability. For example, with my library, I can easily scan the barcode shown above.

Here's a link to a demo of my Vue library (which uses zxing-js library for scanning). Visit the link from your phone (Android/Chrome supports all features, iOS/Safari will have a reduct functionally as they don't allow the user to get info on camera devices nor control the camera.

https://pcyvsp-5173.csb.app/