Wifimanager alternative with qrcode

Projects General Guidance
1

Is there any ready to use solution alternative to wifimanager but uses qrcode instead of manually inputing the ssid's password? Any idea is appreciated.
Of course I will use ESP32-CAM.

2

WifiManager creates a captive portal and you have to modify the network on your client device to connect to the captive portal and provide suitable parameters, pick a WiFi network etc/

Could you explain how you envision the QRCode to work / be used from a user perspective?

(it is possible to build a web page that opens the camera and use jsQR to detect a QRCode in the video stream and return the associated string. You would have to use WifiManager's ability to present custom HTML)

something like this to get you started

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>QR Code Scanner</title>
    <script src="https://cdn.jsdelivr.net/npm/jsqr@1.4.0/dist/jsQR.min.js"></script>
</head>
<body>
    <h1>QR Code Scanner</h1>
    <video id="preview" style="width:100%; height:auto;"></video>
    <p id="decodedText"></p>
    <button id="submitBtn" style="display:none;">Submit</button>

    <script>
        const video = document.getElementById('preview');
        const decodedText = document.getElementById('decodedText');
        const submitBtn = document.getElementById('submitBtn');

        async function startScanner() {
            try {
                const stream = await navigator.mediaDevices.getUserMedia({
                    video: { facingMode: 'environment', width: { ideal: 1280 }, height: { ideal: 720 } }
                });
                video.srcObject = stream;
                video.setAttribute("playsinline", true);
                await video.play();
                scanQRCode();
            } catch (err) {
                console.error("Error accessing camera: ", err);
            }
        }

        function scanQRCode() {
            const canvas = document.createElement('canvas');
            const context = canvas.getContext('2d');

            function captureFrame() {
                canvas.width = video.videoWidth;
                canvas.height = video.videoHeight;
                context.drawImage(video, 0, 0, canvas.width, canvas.height);
                const imageData = context.getImageData(0, 0, canvas.width, canvas.height);
                const code = jsQR(imageData.data, canvas.width, canvas.height);

                if (code) {
                    decodedText.textContent = `Decoded text: ${code.data}`;
                    submitBtn.style.display = 'block';
                    console.log('Decoded text:', code.data); // For standalone demo
                    video.srcObject.getTracks().forEach(track => track.stop());
                } else {
                    requestAnimationFrame(captureFrame);
                }
            }
            captureFrame();
        }

        submitBtn.addEventListener('click', () => {
            const data = decodedText.textContent.replace('Decoded text: ', '');
            fetch('/submit', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ qrData: data })
            })
            .then(response => response.json())
            .then(data => console.log('Success:', data))
            .catch(error => console.error('Error:', error));
        });

        startScanner();
    </script>
</body>
</html>
1 Like
3

Thank you for the code. I don't want to use a pc but a ESP32-CAM to read the qrcode for wifi password.

4

What's the role of WiFiManager then ? do you have one ESP32 offering a captive portal with WiFiManager and another ESP32-CAM needing to join that captive portal ?

Not for the ESP32-CAM but for the ESP32-S3-EYE, Espressif has a QRCode Recognition Demo

5

This topic was automatically closed 180 days after the last reply. New replies are no longer allowed.