search

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

Cannot set back camera even with correct deviceId #335

Open jozef-rzadkosz opened 2 years ago

jozef-rzadkosz commented 2 years ago

I cannot set back camera, when I am trying to pick camera from Html Scanner constructor function I am always getting front camera, there's no way to pick back camera. I have tested it with Android and iOS devices.

I was trying to get deviceId from method and even copy static value for back camera and still same results.

To Reproduce See this example https://codepen.io/freestyle09/pen/xxLrBJJ

Expected behavior Back camera should work in Html5QrCodeScanner and Html5QrCode

Desktop (please complete the following information):

Smartphone (please complete the following information):

Additional context Demo example from official website is working but reconstruction example from documentation not.

Dengyu-1129 commented 2 years ago

Excuse me, have you solved the problem?

leotaozeng commented 2 years ago

Here's one solution if you don't need a drop-down list. It works for me!

const html5QrcodeScanner = new Html5QrcodeScanner("reader", {
  fps: 10,
  qrbox: { width: 250, height: 250 },
  videoConstraints: { facingMode: { exact: "environment" } },
});

MediaTrackConstraints.facingMode

jozef-rzadkosz commented 2 years ago

Excuse me, have you solved the problem?

Nope, the problem is still there

Dengyu-1129 commented 2 years ago

Here's one solution if you don't need a drop-down list. It works for me!

const html5QrcodeScanner = new Html5QrcodeScanner("reader", {
  fps: 10,
  qrbox: { width: 250, height: 250 },
  videoConstraints: { facingMode: { exact: "environment" } },
});

MediaTrackConstraints.facingMode

have you use this? 2021-11-05 13-52-21 的屏幕截图

leotaozeng commented 2 years ago

Here's one solution if you don't need a drop-down list. It works for me!

const html5QrcodeScanner = new Html5QrcodeScanner("reader", {
  fps: 10,
  qrbox: { width: 250, height: 250 },
  videoConstraints: { facingMode: { exact: "environment" } },
});

MediaTrackConstraints.facingMode

have you use this? 2021-11-05 13-52-21 的屏幕截图

Nope and here's the live URL: https://qrcode-scanning.netlify.app/

jozef-rzadkosz commented 2 years ago

Yeah and when I am using exact on PCs I am getting errors and I don't know why but the example from official website works

leotaozeng commented 2 years ago

Yeah and when I am using exact on PCs I am getting errors and I don't know why but the example from official website works

exact: "environment"

It only works on mobile phones from what I understand

mebjas commented 2 years ago

If I understand correctly, the expectation is to select back camera on Html5QrcodeScanner right? This is not supported at the moment. Please track this issue https://github.com/mebjas/html5-qrcode/issues/139 for the implementation.

This is how you can set it using Html5Qrcode class - https://github.com/mebjas/html5-qrcode#scanning-without-cameraid

Let me know if there is any other issue.

Tux1991 commented 1 year ago

Hi, if i understand correctly you want to prefer the back camera, else the front camera? If you still have the problem, here you are a solution which i used to prefer the back camera, else you will use the front camera automatically.

<head>
<script type="text/javascript" src="html5-qrcode.min.js"></script>
<link rel="stylesheet" type="text/css" href="bootstrap.min.css">
</head>
<body>

//the width of the camera 
<div style="width:200px; " id="reader"></div>

const html5QrCode = new Html5Qrcode("reader");

// if you scanned , it will be write in clear text in your input field which in my case 'result'
const qrCodeSuccessCallback = (decodedText, decodedResult) => {
    document.getElementById('result').value = decodedText;
};
const config = { fps: 200, qrbox: 100 };

// prefer the back camera else the front one 
html5QrCode.start({ facingMode: "environment" }, config, qrCodeSuccessCallback);
</script>
</body>
boshington commented 2 months ago

For anyone who is still having this issue, there is a different potential cause when using Html5Qrcode class. Using .getCameras() returns a promise and if this does not resolve by the time you are calling .start(), you will default to using whichever camera is default.

This works for me as I have a known platform where the back camera is always at index 1. Use a similar approach if you know you have facingMode available. (Unavailable on my device)

async function prep() {
  let devices = await Html5Qrcode.getCameras();
  let cameraId = devices[1].id;
  const scanner = new Html5Qrcode("reader");
  const config = { fps: 10, qrbox: { width: 500, height: 500 } };

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

  scanner.start(cameraId, config, qrCodeSuccessCallback);
}