mebjas / html5-qrcode

A cross platform HTML5 QR code reader. See end to end implementation at: https://scanapp.org
https://qrcode.minhazav.dev
Apache License 2.0
4.87k stars 960 forks source link

[Feature Request] Allow using other QR code reading libraries #170

Closed Techn1c4l closed 3 years ago

Techn1c4l commented 3 years ago

I had some trouble detecting QR codes with large data. It takes too long to read. I believe this is mainly problem with the LazarSoft QR reading library. I've tested the jsQR library and had much better results. While LazarSoft reader takes about 3-5 seconds to read, jsQR makes it almost instantly. Unfortunately, there is no way we can use any other library with this scanner.

However, there is a workaround. I wrote a shim that supplies the jsQR class instead of LazarSoft reader.

class Html5QrCodeShim
{
    constructor()
    {
        this.callback = () => {}; //(Data) => { return Data };  
    }

    decode()
    {
        let Element = document.getElementById('qr-canvas');
        let ImageData = Element.getContext('2d').getImageData(0, 0, Element.width, Element.height);

        try
        {
            const Code = jsQR(ImageData.data, ImageData.width, ImageData.height);

            if(Code)
            {
                this.callback(Code.data);
            }
        }

        catch(Error) { }
    }
}

function getLazarSoftScanner()
{
    return new Html5QrCodeShim();
}

Note that use must not include qrcode.js or qrcode.min.js in your project in order this shim to work. jsQR library must be also included.

This is not an ideal solution as I believe we should be able to supply our custom callback which takes raw imageData and returns either decoded data or and exception. Please consider implementing this feature.

mebjas commented 3 years ago

Thanks for pointing out the problem and a potential solution. So far I have been building this up as a coupled user experience on top of LazarSoft reader. Recently I have been thinking to migrate to zxing javascript port. Your design idea seems a good choice to move forward when making that port so that, those interested can inject another kind of javascript reader.

mebjas commented 3 years ago

Some updates, the source code is now migrated to typescript. The code health is still far from perfect but its a bit easier now to add your own library for reader.

Added a shim layer which can be used to replace the library quickly. Maybe some documentation around this will help.

Some references:

Techn1c4l commented 3 years ago

A bit late, but thanks for implementing this feature.