QR code scanner compatible with cakephp 4

I’m having trouble finding the right qr code scanner library for my cakephp 4 project. I would really appreciate it to hear from the community on those who have experience in using scanners for qr code to help me make a good decision in my project. My project flow is i would scan the qr code and add the riders to the que. I’ve already generated the qr code for every rider. I would want to implement it in my website and use camera from phone or webcam live. I would be very grateful for any advice in my post. Thank you so much

You want to implement a QR code scanner into your website? Is this even a thing that can be done? I thought people just pointed their camera at a code and it automatically opens a URL.

I don’t know if i can do it myself, it seems impossible for me also. My adviser wanted me to make the user experience at ease. This is what i plan to make https://scanapp.org/ just like a scanner on a website to scan my generated qr code. Im not much very experienced in node js. which it uses npm command. I’m not really sure how should i start.

First, just because someone else has built a web application that does something doesn’t mean that it’s the sort of thing anyone can build as part of a school project. (I’m assuming this is a school project based on your use of the word advisor.) Maybe it is, maybe it isn’t, I really can’t say in this case.

Second, that page says right on it that it’s built using GitHub - mebjas/html5-qrcode: A cross platform HTML5 QR code reader. See end to end implementation at: https://scanapp.org. Can your application make use of that?

Hellow Good day. Yes you are absolutely correct that this is a school project. I somehow managed to make the QR scanner and used the github html5 library that you send. I just downloaded the min.js in the Library to make the code works. But now im facing a dead end. My code can now read the qr when scanned but i want it to automatically change the code inside the dropdown table of the two jointed table here is the code for add.php inside my altavistaque template:

        <?= $this->Html->script('html5-qrcode.min.js') ?>
        <div style="text-align: center;">
            <div id="reader" width="600px;"></div>
            <div id="show" style="display: none;">
                <h4>Scanned Results</h4>
                <p style="color: blue;" id="result"></p>
            </div>
        </div>

        <?= $this->Form->create($altavistaque) ?>
        <fieldset>
            <legend><?= __('Add to the Queue') ?></legend>
            <!-- Add an input field to capture the rider_id -->
        <?= $this->Form->hidden('rider_id', ['id' => 'rider_id']) ?>

        <?= $this->Form->button(__('Submit')) ?>
        <?= $this->Form->end() ?>

        <script>
        const html5Qrcode = new Html5Qrcode('reader');
        const qrCodeSuccessCallback = (decodedText, decodedResult) => {
            if (decodedText) {
                document.getElementById('show').style.display = 'block';
                document.getElementById('result').textContent = decodedText;

                // Set the scanned rider ID as the value of the hidden input field
                document.getElementById('rider_id').value = decodedText;

                html5Qrcode.stop();
            }
        };

        const config = { fps: 10, qrbox: { width: 250, height: 250 } };
        html5Qrcode.start({ facingMode: "environment" }, config, qrCodeSuccessCallback);
        </script>

the one i wanna change is the echo form. but whatever i tried it still doesn’t change automatically when i scan. i tried having associations on one to many relation since i have 3 stations and one riders table. im kinda stuck… thank you for having time to comment a reply and give a link to help me. i have a number in the qr code for the rider. if this helps this is the code for my qr in the riderscontroller.

public function view($id = null)
{
$rider = $this->Riders->get($id, [
‘contain’ => ,
]);
$this->Authorization->authorize($rider); //Authorization needed to perform action

        // Fetch the rider's data based on the rider's ID
        $rider = $this->Riders->get($id);
        
        // Combine the first name and last name to create rider info
        $riderInfo = "\n" . 'Rider Code: ' . $rider->id . "\n"
        . 'Rider Name: ' . $rider->first_name . ' ' . $rider->last_name. "\n"
        . 'Brand: ' . $rider->brand . "\n"
        . 'Model: ' . $rider->model . "\n"
        . 'Plate #: ' . $rider->plate;

            // Create QR code
            $qrCode = QrCode::create($riderInfo)
                ->setEncoding(new Encoding('UTF-8'))
                ->setErrorCorrectionLevel(ErrorCorrectionLevel::High)
                ->setSize(300)
                ->setMargin(10)
                ->setRoundBlockSizeMode(RoundBlockSizeMode::Margin)
                ->setForegroundColor(new Color(0, 0, 0))
                ->setBackgroundColor(new Color(255, 255, 255));

            $writer = new PngWriter();

            $result = $writer->write($qrCode);

            header ("Content-Type: " . $result->getMimeType());

            $result->getString();

    $this->set(compact('rider', 'result'));
}

First, this is a completely new question, so you’d be best to post it as such, with a pertinent subject line, instead of as a comment on an existing question. You’re more likely to get help that way.

Second, your code formatting is off, which makes it harder to read and respond to the question.

Third, it’s not at all clear to me what you mean by “the one i wanna change is the echo form”. You’re echoing lots of form related things in the code you’ve shown. So, when you repost as a new question, consider how to better express exactly what you’re expecting to happen.

thank you. i understood and i will follow your advice. thank you again for giving time to comment on my post.