Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Using npm webpack with html5-qrcode

See original GitHub issue

Your demos are awesome but i’m struggling to get html5-qrcode working in my javascript.

Here is the most basic example i’m using after installing your library via npm.

require('html5-qrcode');

Html5Qrcode.getCameras().then(devices => {
    
    if (devices && devices.length) {
        let  cameraId = devices[0].id;

        const html5QrCode = new Html5Qrcode("reader");

        html5QrCode.start(
            cameraId,
            {
                fps: 10,
                qrbox: 250
            },
            qrCodeMessage => {

                console.log('QR Code detected');

            },
            errorMessage => {

                console.log('QR Code no longer in front of camera.');

            })
            .catch(err => {

                console.log('Unable to start scanning:');

            });

    }

}).catch(err => {

    console.log('error');

});

I’m loading the compiled javascript at the end of my page.

But I’m getting this error…

Uncaught TypeError: Cannot read property 'getCameras' of undefined

I’ve also tried using…

import Html5Qrcode from 'html5-qrcode';

But in the javascript file in my IDE, the function getCameras() says Cannot find declaration to go to

It is tricky to see the npm package code because it’s been minified and there is no src folder included in the npm package. Normally it most npm packages the src files are used and then the code is compiled later.

Am I missing a trick? can you please advise as I really want to start using this in my web app.

Many thanks