How to connect qr code scanner machine with my website laravel and react

@martinbean so all this things depend on the device's instruction manual?

@martinbean I am sorry bro, this is the instructions manual can u check it for me. Please!

@hasanhatem No. You need to read the manual.

@Snapey I am so sorry bro, I'm a little confused. Because it's first time using this device.

There is a lot of libraries and packages working with (webcam) its give you the QR string direct in your code (ex: to any variable you want), without any form and input.

Can i do that with the QR device, or i should have form input??

And should I use webcam with library, or this device can do what i want?

I wanna use this device to scan user QR code and when the user scan the code i will start the quiz questions directly without password.

So the user will click on Start Quiz Button on Touch screen, after that he should scan the QR Code, after the system recognize him, the quiz will start directly.

I can do all that with the any package using webcam but it will not give you a good performance. That's the reason i wanna use Scanner Device.

@hasanhatem just set your javascript to listen for keyboard input

https://stackoverflow.com/questions/21633537/javascript-how-to-read-a-hand-held-barcode-scanner-best

@Snapey Today i will get the device and i will try handle it. I will back to you with the result. Thank you very much for the helping

Tomorrow evening i will back to let you know the result

@Snapey Hello bro, i listen to the qr code scanner. I got the data from the qr code. with ('keypress') event. but it's like an array it's loop in string and console it letter by letter. it's ok i can combine this letters together but how to know when the string finish to set it in state or fetch data from api depend on that string.

is there any way to know?

this is my code:

document.addEventListener('keypress', (event) => {
        var name = event.key;
        var code = event.code;
        console.log(`Key pressed ${name} \r\n Key code value: ${code}`);
    }, false);

@hasanhatem two thoughts

1. add a timeout function when the stream stops, send it to your API

2. contact the vendor. ask them if there is a way to program the scanner to send additional character at the end of the scan such as enter key

@Snapey I solve the problem. So when I tested the device i found every string i get it from the qr code the device add ENTER to the end of the string. So i thing this is a good way to handle this issue

useEffect(() => {
        if (!isScaned) {
            const detectKeyboard = (e) => {
                var name = e.key;

                if (name !== 'Enter') {
                    tempString += name;
                }
                if (name === 'Enter' && qrCode !== tempString) {
                    setQrCode(tempString);
                    setIsScaned(true);
                    console.log('sd');
                }
            }

            document.addEventListener('keypress', detectKeyboard, false);

            return () => {
                document.removeEventListener('keypress', detectKeyboard, false);
            }
        }

    }, [isScaned]);

@Snapey Thank you