Camera cannot focus properly

[amerfathullah]

Describe the bug
Camera cannot focus properly on Samsung device on Firefox browser. It's working fine on Chrome and other devices. For my test, since the size of QR code is small on the object, I set the qrbox small too qrbox=250.

Expected behavior
Camera should properly focus on the QR code.

Screenshots

Smartphone:

• Device: Samsung Galaxy Note5
• OS: Android 7.0
• Browser Firefox
• Version 92.1.1

[amerfathullah]

fixed by setting focusMode: "continuous" in video constraints

[ROBERT-MCDOWELL]

could you provide the piece of code where you integrated this extra code?

[amerfathullah]

I just do it like this

this.html5QrCode.applyVideoConstraints({ focusMode: "continuous", advanced: [ {zoom: isAndroid ? 1.5 : 2.0 } ]})

can refer below on how to use it
https://developer.mozilla.org/en-US/docs/Web/API/MediaStreamTrack/applyConstraints
https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia
https://developer.mozilla.org/en-US/docs/Web/API/MediaTrackConstraints

[ROBERT-MCDOWELL]

ok thanks, but be aware that call videoconstraints manually override all other settings when you create the qrcode object like framerate, aspect ratio etc... (according to the html5-qrcode help) on the README page)

[antonyf]

I just do it like this

this.html5QrCode.applyVideoConstraints({ focusMode: "continuous", advanced: [ {zoom: isAndroid ? 1.5 : 2.0 } ]})

can refer below on how to use it https://developer.mozilla.org/en-US/docs/Web/API/MediaStreamTrack/applyConstraints https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia https://developer.mozilla.org/en-US/docs/Web/API/MediaTrackConstraints

where did you add this code?

[nicocirio]

where did you add this code?

Hi @antonyf . I applied it 2 sec after the code reader started, as it seems the camera must be running to be able to apply the video constraints (focusMode and zoom). I am not sure if this is the best way to make it work, but ir worked for my usecase (mobile device running Android)...

 html5QrCode.start({ facingMode: "environment" }, config, onScanSuccess);

      // wait 2 seconds to guarantee the camera has already started to apply the focus mode and zoom...
      setTimeout(function () {
        html5QrCode.applyVideoConstraints({
          focusMode: "continuous",
          advanced: [{ zoom: 2.0 }],
        });
      }, 2000);

I share the whole code for you to get an idea of the context were I applied it (a Phoenix web app). I have many barcode readers rendered, that is why my code has a dinamic_id...

app.js

Hooks.scanner = {
  mounted() {
    const view = this;

    var head_dinamic_id = "qr-reader";
    var tail_dinamic_id = this.el.id.substring(8);
    var dinamic_id = head_dinamic_id.concat(tail_dinamic_id);
    var html5QrCode = new Html5Qrcode(dinamic_id);

    this.el.addEventListener("click", startScanner);

    function startScanner() {
      const config = {
        fps: 100,
        qrbox: 200,
        aspectRatio: 1,
        formatsToSupport: [Html5QrcodeSupportedFormats.EAN_13],
      };
     
      html5QrCode.start({ facingMode: "environment" }, config, onScanSuccess);

      // wait 2 seconds to guarantee the camera has already started to apply the focus mode and zoom...
      setTimeout(function () {
        html5QrCode.applyVideoConstraints({
          focusMode: "continuous",
          advanced: [{ zoom: 2.0 }],
        });
      }, 2000);
    }

    function onScanSuccess(decodedText, _decodedResult) {
      html5QrCode.stop();
      html5QrCode.clear();
      view.pushEvent("scan_result", { result: decodedText });
    }
  },
};

[antonyf]

This is great Nicolas,, thanks a stack.. I will try to apply it today still.. -- Regards Antony Falencikowski PH: +27 72 0102711 ( SA ) PH: +264 81 6688091 ( NAM ) Monday, 09 May 2022, 04:42PM +02:00 from Nicolás Cirio ***@***.*** :

…

>where did you add this code? Hi @antonyf . I applied it 2 sec after the code reader started, as it seems the camera must be running to be able to apply the video constraints (focusMode and zoom). I am not sure if this is the best way to make it work, but ir worked for my usecase... html5QrCode.start({ facingMode: "environment" }, config, onScanSuccess); // wait 2 seconds to guarantee the camera has already started to apply the focus mode and zoom... setTimeout(function () { html5QrCode.applyVideoConstraints({ focusMode: "continuous", advanced: [{ zoom: 2.0 }], }); }, 2000); I share the whole code for you to get an idea of the context were I applied it (a Phoenix web app). I have many barcode readers rendered, that is why my code has a dinamic_id... app.js Hooks.scanner = { mounted() { const view = this; var head_dinamic_id = "qr-reader"; var tail_dinamic_id = this.el.id.substring(8); var dinamic_id = head_dinamic_id.concat(tail_dinamic_id); var html5QrCode = new Html5Qrcode(dinamic_id); this.el.addEventListener("click", startScanner); function startScanner() { const config = { fps: 100, qrbox: 200, aspectRatio: 1, formatsToSupport: [Html5QrcodeSupportedFormats.EAN_13], }; html5QrCode.start({ facingMode: "environment" }, config, onScanSuccess); // wait 2 seconds to guarantee the camera has already started to apply the focus mode and zoom... setTimeout(function () { html5QrCode.applyVideoConstraints({ focusMode: "continuous", advanced: [{ zoom: 2.0 }], }); }, 2000); } function onScanSuccess(decodedText, _decodedResult) { html5QrCode.stop(); html5QrCode.clear(); view.pushEvent("scan_result", { result: decodedText }); } }, }; — Reply to this email directly, view it on GitHub , or unsubscribe . You are receiving this because you were mentioned. Message ID: @ github . com>

[clzola]

@nicocirio do you have maybe an iphone around you test does it work for you on android. I have copied your code, set 3s delay just to be sure. Also I have put alert box before applying constraints just to see if function is executed, however I still cannot get camera to focus properly. Also since I have put zoom to be 2.0, I guess I should notice zoom after video constraints are applied, however nothing happens...

I guess best solution would be just to have zoom applied, that way picture would be bigger and phone would not need to be so closed to the code...