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.71k stars 938 forks source link

Got "Error happend while scanning context" #529

Open Hugonee opened 1 year ago

Hugonee commented 1 year ago

Hello, your barcode reader is the most powerful I seen!

I am trying to use it without the UI that you provide, but no matter what I try I got error message: "Error happend while scanning context"

Maybe I am making some basic error, as one user suggested, would be great if someone can make an example with the API that is UI-less. I seen this error was occurring in previous version, so that’s why I thought could be a bug or an issue, if it is not the case I apologize. Thanks in advance.

here is the simple code I am trying to run: html5-qrcode

html5-qrcode_consoleError

ROBERT-MCDOWELL commented 1 year ago

did you try various qr code? should be black on white.

Hugonee commented 1 year ago

did you try various qr code? should be black on white.

Its giving the error continuosly even without pointing to any QR

ROBERT-MCDOWELL commented 1 year ago

you have a camera problem I think

Hugonee commented 1 year ago

you have a camera problem I think

I had tried with different devices iOS and Android Versions (7 to 10) and same error occurs

or what do you mean with "a camera problem" ?

ROBERT-MCDOWELL commented 1 year ago

your code is incomplete.... check twice how to create an html5qrcode object.

Hugonee commented 1 year ago

Thanks for your support!

is there anything else than let html5QrCode = new Html5Qrcode( "reader", { fps: 10, qrbox: 250 } /* verbose= */ true);

in order to create a Html5Qrcode object ?

Maybe I should declare before of the getCameras? (anyway I just use this function to check if there is a camera… think it’s does not matter)… Any more clues?

thanks in advance !!

ROBERT-MCDOWELL commented 1 year ago

yes, more, check the docs and read it, then search on issues list about smartphone etc...

Hugonee commented 1 year ago

I read the docs, reading as careful as I can, there is not a complete example without the JavaScript that got the UI.

Anyway, if you already catch what I am doing badly regarding the creation of the object, I really would appreciate your support showing me. Sometimes (as is the case) a person try and repeat and don’t find the point.

Is quite simple usage API, as far as I seen I can not find any differences from documentation.

Here is some example on creating the basic scheme for the object

` const html5QrCode = new Html5Qrcode("reader"); const qrCodeSuccessCallback = message => { document.location.href=message} const config = { fps: 10, qrbox: 250 }; html5QrCode.start({ facingMode: { exact: "environment"} }, config, qrCodeSuccessCallback);

` I just treat the callback inside… don’t see any difference, I try and try…

thanks again for your time, will be great if you could correct me!

ROBERT-MCDOWELL commented 1 year ago

there is no support here, only developers and users to fix bugs. yours is not a bug but code misunderstanding. I suggest you try first the htmlqrcodescanner code before to post issues and see if it works for you.

Hugonee commented 1 year ago

#

there is no support here, only developers and users to fix bugs. yours is not a bug but code misunderstanding. I suggest you try first the htmlqrcodescanner code before to post issues and see if it works for you.

I know, I tried the code of the “html5-qrcodescanner“ , as you can see I congratulate the author because is the best QR and Barcode by far… There is two versions for the scanner one with UI (html5-qrcodescanner) that works just perfect, the other without UI (html5-qrcode) is the one I am trying to use and with the same code does not work. anyway I think more people could find same problem as me, would be good to have the basic code example for the non UI version, and that is what I would do when I fix it. Would you help me on that? Thank you in advance

ROBERT-MCDOWELL commented 1 year ago

no. You just need to know javascript and typescript a little more... posting an issue here is for bugs. fi you have a suggestion so it's better you close this issue and open a feature request. Again I'm not the author of this repo and asking help here is not the solution.

Hugonee commented 1 year ago

no.

Well is a pity that you didn’t realized it’s not same API (that you speak about) and feel free to explain how GitHub works… it’s better to help the community than to pretend to be a master, Thanks anyway for your time, please do not fill anymore with comments, I would like someone to help me and don’t need to make people boring with “master lessons” senselessness.

thanks!

liushengqi000 commented 1 year ago

emmmm.... i get it.

@Hugonee

1.The node inside the "qr-reader" will be removed. use <div id="qr-reader" style="width:450px"></div><div id="qr-reader-results" style="width:350px"></div>

html5-qrcode Code

catch((function(t) {n.logger.logError("Error happend while scanning context", t),u()}
//t=TypeError: Cannot set properties of null (setting 'innerText')
  1. try added "html5QrCode.stop(); " before "html5QrCode.clear();"

html5-qrcode Code

catch((function(t) {n.logger.logError("Error happend while scanning context", t),u()}
//t='Cannot clear while scan is ongoing, close it first.'

3.While verbose = true, it will keep telling you that there is no barcode found or no suitable decoder.(FPS = 1 in your config) Debugger information can be removed by "new Html5Qrcode('qr-reader', false);" html5-qrcode Code

constructor(t, e) {"boolean" == typeof e ? this.verbose = !0 === e : e && this.verbose = !0 === e.verbose}
t.prototype.logError = function(t, e) {(this.verbose || !0 === e) && console.error(t) }
//e will not be output
catch((function(t) {n.logger.logError("Error happend while scanning context", t),u()}
//Error Information t will not be output

I can't understand why it doesn't output the var t but just display "Error happend while scanning context"

4.try

<head> 
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<script src="https://unpkg.com/html5-qrcode" type="text/javascript"></script>
<body>
<div id="qr-reader" style="width:450px"></div><div id="qr-reader-results" style="width:350px"></div>
</body> 
<script>Html5Qrcode.getCameras().then(devices => {
    if (devices && devices.length) {
        var cameraId = devices[0].id;
        const choosenCamera = {
            facingMode: {exact: "environment"}
        };

        const html5QrCode = new Html5Qrcode('qr-reader', false);
        const config = {
            fps: 1,
            qrbox: {
                width: 250,
                height: 250
            }
        };

        html5QrCode.start(choosenCamera, config, (decodedText, decodedResult) => {
            console.log({
                decodedText, decodedResult
            });
            document.getElementById('qr-reader-results').innerText = decodedText;
            html5QrCode.stop();
            html5QrCode.clear();
        }, (errorMessage) => {
            console.log({
                errorMessage
            });
            document.getElementById('qr-reader-results').innerText = errorMessage;
        })
        .catch ((err) => {
            console.dir({
                err
            });
            document.getElementById('qr-reader-results').innerText = err;
            html5QrCode.stop();
            html5QrCode.clear();
        });
    }
 }).catch (err => {
    document.getElementById('qr-reader-results').innerText = err;
    html5QrCode.stop();
    html5QrCode.clear();
 });
 </script>

5.I hope that the next question can provide a text version of the code. I don't want to check the ORC results. use ```formated code``` show it pretty

6.Please forgive my poor English.

trasherdk commented 1 year ago

```html formated code ```

<head> 
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<script src="https://unpkg.com/html5-qrcode" type="text/javascript"></script>
<body>
<div id="qr-reader" style="width:450px"></div><div id="qr-reader-results" style="width:350px"></div>
</body> 
<script>Html5Qrcode.getCameras().then(devices => {
    if (devices && devices.length) {
        var cameraId = devices[0].id;
        const choosenCamera = {
            facingMode: {exact: "environment"}
        };

        const html5QrCode = new Html5Qrcode('qr-reader', false);
        const config = {
            fps: 1,
            qrbox: {
                width: 250,
                height: 250
            }
        };

        html5QrCode.start(choosenCamera, config, (decodedText, decodedResult) => {
            console.log({
                decodedText, decodedResult
            });
            document.getElementById('qr-reader-results').innerText = decodedText;
            html5QrCode.stop();
            html5QrCode.clear();
        }, (errorMessage) => {
            console.log({
                errorMessage
            });
            document.getElementById('qr-reader-results').innerText = errorMessage;
        })
        .catch ((err) => {
            console.dir({
                err
            });
            document.getElementById('qr-reader-results').innerText = err;
            html5QrCode.stop();
            html5QrCode.clear();
        });
    }
 }).catch (err => {
    document.getElementById('qr-reader-results').innerText = err;
    html5QrCode.stop();
    html5QrCode.clear();
 });
 </script>