qr-scanner icon indicating copy to clipboard operation
qr-scanner copied to clipboard

Always getting camera not found on mobile

Open christopheSeeka opened this issue 2 years ago • 4 comments

I really don't understand what can be the issue, it's all good on desktop but on mobile I always get camera not found even though i can list all the cameras available...

Here is my code, working well on desktop:

let _this = this
let videoElm = document.getElementById("qrScan")
        this.qrScanner = new QrScanner(  
          videoElm,
          function(result){
            console.log('decoded qr code:', result);
            _this.nftREF = result.data
            _this.qrScanner.stop()
            _this.scanning = false
            _this.generateQR()
          },
          {
            highlightScanRegion: true,
            highlightCodeOutline: true,
          },
        );

      let hasCam = await QrScanner.hasCamera();
      console.log("QrScanner.hasCamera()")
      console.log(hasCam) // give true in console

      if(hasCam){
        _this.cameras = await QrScanner.listCameras();
        console.log("QrScanner.listCameras()")
        console.log(_this.cameras) // show all cam id in console
        _this.currentCam = 0
        await _this.qrScanner.setCamera(_this.cameras[_this.currentCam].id)
        console.log("_this.qrScanner after setCamera to 0")
        console.log(this.qrScanner)
        console.log("start")
        try{
          await _this.qrScanner.start()
          _this.hasCamera = true;
        }catch(error){
          console.log("error in camera start()");
                console.log(error);
                _this.hasCamera = false;
        }

        console.log("started")

Here the console on chrome mobile, knowing that I'm in https and the camera access is authorized: https://i.ibb.co/2P1p3zp/CONSOLE.jpg

I do have the same issue on another app where i use this lib too and it was working before. Checked the demo code where it work but can't figure what is done differently.

Thank you in advance for the help.

christopheSeeka avatar Nov 23 '22 04:11 christopheSeeka

What i don't get, compare to the demo, it never ask me permission, when i check it is not part of current permissions (allowed or denied)

christopheSeeka avatar Nov 23 '22 06:11 christopheSeeka

It actually seem that it work locally, when im on localhost but once i put on the server, then its not working, nether on mobile or desktop, any idea what it could be? i'm using it in a vue3 app.

christopheSeeka avatar Nov 23 '22 06:11 christopheSeeka

Well, it was the content security policy on my nginx middleware that was restricting use of camera... my bad :)

christopheSeeka avatar Nov 23 '22 08:11 christopheSeeka

Please close this issue @christopheSeeka

wesamjabali avatar Dec 26 '22 10:12 wesamjabali