javascript - Select back camera on html5-qrcode.min.js - Stack Overflow

admin管理员组

文章数量:1244411

I use this qr code scanner:

I use this code to scan qr code:

         function onScanSuccess(decodedText, decodedResult) {
  // handle the scanned code as you like, for example:
  document.getElementById('text').value = decodedText;
  console.log(`Code matched = ${decodedText}`, decodedResult);
}

function onScanFailure(error) {
  // handle scan failure, usually better to ignore and keep scanning.
  // for example:
  console.warn(`Code scan error = ${error}`);
}

let html5QrcodeScanner = new Html5QrcodeScanner(
    "reader", { fps: 10, qrbox: 250 }, /* verbose= */ false);
html5QrcodeScanner.render(onScanSuccess, onScanFailure);

It is possible to set default camera to back smartfone camera. I want to run scanner with setted back camera on startup. Thanks, for some help.

I use this qr code scanner: https://github./mebjas/html5-qrcode

I use this code to scan qr code:

         function onScanSuccess(decodedText, decodedResult) {
  // handle the scanned code as you like, for example:
  document.getElementById('text').value = decodedText;
  console.log(`Code matched = ${decodedText}`, decodedResult);
}

function onScanFailure(error) {
  // handle scan failure, usually better to ignore and keep scanning.
  // for example:
  console.warn(`Code scan error = ${error}`);
}

let html5QrcodeScanner = new Html5QrcodeScanner(
    "reader", { fps: 10, qrbox: 250 }, /* verbose= */ false);
html5QrcodeScanner.render(onScanSuccess, onScanFailure);

It is possible to set default camera to back smartfone camera. I want to run scanner with setted back camera on startup. Thanks, for some help.

• javascript
• html
• qr-code

Share Improve this question Follow asked Aug 17, 2021 at 6:45 MariuszMariusz 6511 gold badge11 silver badge66 bronze badges 4

• you'll probably need to use navigator.mediaDevices.enumerateDevices – Bravo Commented Aug 17, 2021 at 6:48
• How to use that ? – Mariusz Commented Aug 17, 2021 at 7:04
• Does this answer your question? Accessing device camera using javascript – Dhana D. Commented Aug 17, 2021 at 7:20
• Did you notice it was a link to documentation, and in that documentation there are examples and other very helpful links to all the information you could ever want to research – Bravo Commented Aug 17, 2021 at 7:35

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 6

I acplish it using this bit of code when I launch the scanner:

facingMode: { exact: "environment"}

Maybe this will help point you in the right direction. Below is the way the setting is used when I launch the scanner:

    /** load scanner using back camera **/
    html5QrCode.start({ facingMode: { exact: "environment"} }, config, qrCodeSuccessCallback);

const scanner = new Html5QrcodeScanner('reader', {
                qrbox: {
                    width: 200,
                    height: 200,
                },
                fps: 5,
                videoConstraints: {
                    facingMode: { exact: "environment" },
                },
            },
            false)
        scanner.render(success, error);

There is no config for this. But I did manage to find the id of the select element.

And here's a dirty workaround to remove all "front" cameras and leave the back ones. So that the user will always default to a back facing camera.

//remove front cameras
setInterval(() => {
    const selectElement = document.getElementById('html5-qrcode-select-camera');
    if (selectElement) {
        document.querySelectorAll("#html5-qrcode-select-camera option").forEach(option => {
            if (option.textContent.includes("front")) {
                option.remove();
            }
        });
        selectElement.selectedIndex = 0; 
        clearInterval(this);
    }
}, 1000);

本文标签： javascriptSelect back camera on html5qrcodeminjsStack Overflow