Initialize the camera from the beginning instead of displaying the 'Request Camera Permissions' button about html5-qrcode

[sododesign]

@hoaipd

I don't use REACT, this is pure VANILLA JS.

You should adapt it to your needs, but it does exactly what you asked for your project.

[hoaipd]

@hoaipd

I don't use REACT, this is pure VANILLA JS.

You should adapt it to your needs, but it does exactly what you asked for your project.

I did it. Thank you for your support

[sododesign]

Please, follow this code @hoaipd

HTML

<div id="qr-reader"></div> <button id="startButton">Start Scan</button> <button id="stopButton" style="display:none;">Stop Scan</button>

JAVASCRIPT

			`document.addEventListener('DOMContentLoaded', function() {
let lastResult;
let html5QrCode = new Html5Qrcode("qr-reader");

function onScanSuccess(decodedText, decodedResult) {
    if (decodedText !== lastResult) {
        lastResult = decodedText;
        window.open('https://optwo.id/?scan=' + decodedText, '_blank');
    }
}

function startScan() {
    Html5Qrcode.getCameras().then(cameras => {
        if (cameras && cameras.length) {
            // Assumendo che l'ultima fotocamera nell'elenco sia quella posteriore
            let cameraId = cameras[cameras.length - 1].id;
            html5QrCode.start(
              cameraId, 
              { fps: 10, qrbox: { width: 300, height: 300 } },
              onScanSuccess,
              errorMessage => {
                  console.log(`QR Code no longer in front of camera.`);
              })
            .catch(err => {
                console.log(`Unable to start scanning, error: ${err}`);
            });
        }
    }).catch(err => {
        console.error("Impossibile accedere alla lista delle telecamere", err);
    });
}

function stopScan() {
    html5QrCode.stop().then(ignore => {
        console.log("Scanning stopped.");
    }).catch(err => {
        console.error("Unable to stop scanning.", err);
    });
}

document.getElementById('startButton').addEventListener('click', function() {
    startScan();
    this.style.display = 'none';
    document.getElementById('stopButton').style.display = 'block';
});

document.getElementById('stopButton').addEventListener('click', function() {
    stopScan();
    this.style.display = 'none';
    document.getElementById('startButton').style.display = 'block';
});

});`

[hoaipd]

Please, follow this code @hoaipd

HTML

<div id="qr-reader"></div> <button id="startButton">Start Scan</button> <button id="stopButton" style="display:none;">Stop Scan</button>

JAVASCRIPT

			`document.addEventListener('DOMContentLoaded', function() {
let lastResult;
let html5QrCode = new Html5Qrcode("qr-reader");

function onScanSuccess(decodedText, decodedResult) {
    if (decodedText !== lastResult) {
        lastResult = decodedText;
        window.open('https://optwo.id/?scan=' + decodedText, '_blank');
    }
}

function startScan() {
    Html5Qrcode.getCameras().then(cameras => {
        if (cameras && cameras.length) {
            // Assumendo che l'ultima fotocamera nell'elenco sia quella posteriore
            let cameraId = cameras[cameras.length - 1].id;
            html5QrCode.start(
              cameraId, 
              { fps: 10, qrbox: { width: 300, height: 300 } },
              onScanSuccess,
              errorMessage => {
                  console.log(`QR Code no longer in front of camera.`);
              })
            .catch(err => {
                console.log(`Unable to start scanning, error: ${err}`);
            });
        }
    }).catch(err => {
        console.error("Impossibile accedere alla lista delle telecamere", err);
    });
}

function stopScan() {
    html5QrCode.stop().then(ignore => {
        console.log("Scanning stopped.");
    }).catch(err => {
        console.error("Unable to stop scanning.", err);
    });
}

document.getElementById('startButton').addEventListener('click', function() {
    startScan();
    this.style.display = 'none';
    document.getElementById('stopButton').style.display = 'block';
});

document.getElementById('stopButton').addEventListener('click', function() {
    stopScan();
    this.style.display = 'none';
    document.getElementById('startButton').style.display = 'block';
});

});`

Does it resolve to the page that displays the website's camera access request, and after clicking accept button, does it display the camera? And I want it's only display camera, don't show button 'Start scan' and 'Stop scan', show camera when accept request access of website. I use ReactJs. Thank you!

[hoaipd]

@sododesign

const html5QrCode = new Html5Qrcode(
"reader", { formatsToSupport: [ Html5QrcodeSupportedFormats.QR_CODE ] });
const qrCodeSuccessCallback = (decodedText, decodedResult) => {
/* handle success */
};
const config = { fps: 10, qrbox: { width: 250, height: 250 } };

// If you want to prefer front camera
html5QrCode.start({ facingMode: "user" }, config, qrCodeSuccessCallback);

if i want to prefer back camera, How do I change the config?