how to active back camera

Viewed 162

html5 qr code scanner not work in back camera in mobile browser That is, when we open the phone in the browser, the front camera is activated

<div class="container">
        <form>
            <div id="reader" style="width:100%">
            </div>
        </form>
        <div id="qr-reader-results"></div>
 </div>


in js file 

const html5QrCode = new Html5Qrcode("reader");

const qrCodeSuccessCallback = (decodedText, decodedResult) => {
/* handle success */
};

const config = { fps: 10, qrbox: { width: 250, height: 250 } };

html5QrCode.start({ facingMode: "environment" }, config, qrCodeSuccessCallback);
1 Answers

There can be an permission issue. Or you can try to list all cameras for debug purposes by using the static method getCameras(). Maybe the back camera is not detected?


// This method will trigger user permissions
Html5Qrcode.getCameras().then(devices => {
  /**
   * devices would be an array of objects of type:
   * { id: "id", label: "label" }
   */
  if (devices && devices.length) {
    var cameraId = devices[0].id;
    // .. use this to start scanning or just log devices to see
    // which cameras are deteceted.
  }
}).catch(err => {
  // handle err
});


For more information check following links:

Related