QR Code Reader / Scanner in React (Html5-QRCode.js)

[@EvenceMohauLanga-m1d]

import React, { useEffect, useState } from 'react';
import { Html5QrcodeScanner } from 'html5-qrcode';
import './App.css';
function App() {
const [scanResult, setScanResult] = useState(null);
const [manualSerialNumber, setManualSerialNumber] = useState('');
useEffect(() => {
const scanner = new Html5QrcodeScanner('reader', {
qrbox: {
width: 250,
height: 250,
},
fps: 5,
});
let isScanning = true;
scanner.render(success, error);
function success(result) {
if (isScanning) {
scanner.clear();
setScanResult(result);
isScanning = false; // Set isScanning to false to stop further scanning
}
}
function error(err) {
console.warn(err);
}
}, []);
function handleManualSerialNumberChange(event) {
setManualSerialNumber(event.target.value);
}
return (

QR Scanning Code
{scanResult ? (

Success: {scanResult}
Serial Number: {scanResult.slice(-16)}

) : (


Or enter the serial number manually:


{manualSerialNumber && (
Serial Number: {manualSerialNumber.slice(-16)}
)}


)}

);
}
export default App;
Hi...this code doesn't scan using a live camera but only when i upload the picture.....what might be the problem?

[@Elizabeth-xl9iv]

import React, { useEffect, useState } from 'react';
import { Html5QrcodeScanner } from 'html5-qrcode';
function App() {
const [scanResult, setScanResult] = useState(null);
const [manualSerialNumber, setManualSerialNumber] = useState('');
useEffect(() => {
let scanner;
async function initializeScanner() {
try {
scanner = new Html5QrcodeScanner('reader', {
qrbox: {
width: 250,
height: 250,
},
fps: 5,
});
scanner.render(success, error);
} catch (error) {
console.error('Error initializing scanner:', error);
}
}
function success(result) {
setScanResult(result);
}
function error(err) {
console.warn(err);
}
initializeScanner();
return () => {
if (scanner) {
scanner.clear();
}
};
}, []);
function handleManualSerialNumberChange(event) {
setManualSerialNumber(event.target.value);
}
return (
QR Scanning Code
{scanResult ? (
Success: {scanResult}
Serial Number: {scanResult.slice(-16)}
) : (

Or enter the serial number manually:

{manualSerialNumber && (
Serial Number: {manualSerialNumber.slice(-16)}
)}

)}
);
}
export default App;
u can use this code .

[@ila6545]

Good tutorial.I am loading this in webview for android app.But the cam is not opened for QR code.It triggers error.Also the qr code image path is not loaded.
Any idea?

[@teclyt_solutions3839]

very good tutorial helped me alot, thankyou

[@shekherkaushik.18]

thankyou so much it is very helpful 😇

[@kovereduard637]

does it work for you?

[@shekherkaushik.18]

@@kovereduard637 yes, i used it in production and currently its working good 👍

[@kovereduard637]

@@shekherkaushik.18 did you adjust the code or the one from the video is working? could you please provide me the code that worked for you?

[@kovereduard637]

@@shekherkaushik.18 also did the camera part work?

[@shekherkaushik.18]

@@kovereduard637 yes actually applied some changes but i cant provide the modified code cause i am using it in my company's project....... sorry for that

[@juryhc]

Very good video tutorial, I have a question:
is it possible to modify the interface and labels of the qr reader?

[@OpenJavaScript]

It seems there isn't a simple solution for doing that at the moment beyond styling the UI that is injected with CSS.
However, if you are willing to write a bit more code, for now you could wait for the particular element you want to exist (e.g. change a label for) using the MutationObserver and then modify it. It is a bit of a workaround in terms of intercepting elements rather than modifying them within the library but it seems like the best solution for now.
In case you are unfamiliar with it, here s a basic introduction: ruclips.net/video/onzJwmACYAc/видео.html

[@parkj4442]

hello. Thanks for the good solution.
Is it possible to communicate with the server by binding data to QR code?
Is it possible to scan the QR code and display a modal window rather than a results page?
I've been thinking about solving this problem for several days.

[@kakudaisukedev4890]

Thank you. Very useful !

[@nanaana9757]

Hi, is it possible to use an external camera? Like cam scanner, web cam or something else

[@leandroalonso9895]

Use Iriun WebCam. Installed on both the phone and the PC.

[@MiyaIzumi-q5n]

Is there any way to upload image as an identification card with a qr-code in it and scan it ? I tried it right now it doesn't recognize the qr-code in it

[@OpenJavaScript]

Technically, this should be possible as long as the QR code is visible next to whatever else is on the ID card (as long as it's not another code).
A possible option for increasing the chances of it scanning successfully is to increase the 'fps' value (frames per second) for detecting a code in the options object. This will mean it attempts to read the code more often but can start affecting perforance is you set it too high (a value up to 1000 is possible according to the docs).
If there is some other code on the card and you want to limit it, you can add this property to the options object to limit detection to QR codes only:
formatsToSupport: [ Html5QrcodeSupportedFormats.QR_CODE ]

[@walidsabbidine7335]

it works on mobile devices?

[@yashpataliya7695]

thanks for the code
but i want when i click on the turnon button then only camera start not before

[@TanaTorn-n8j]

How to fix :Uncaught TypeError: Cannot read properties of null (reading 'videoWidth')

[@jobygeorge3395]

Thanks Man.

[@honfey]

Hi, can it scan barcode as well?

[@hamadkhan3248]

thanks

[@cosmasdaniella2079]

This is a cool tutorial but for some reason I keep gettign this error "Uncaught HTML Element with id=reader not found".

[@revanthkumarsake7035]

I am also faced same issue, I make sapareated QR code file , its resolved

[@fahiyangtech]

Can with qrcode and barcode 128?

[@lifeofstephen-yt]

Why do you sound like you are being kidnapped lol

[@raksmeyincomputing]

Cool

[@muradjadoon619]

share your github repo link

[@jhonuribe171]

When I reload the page, the camera appears twice and I want to change the style

[@onedimension]

how u fixed this?@@jhonuribe171

[@learning_trespasser]

@@jhonuribe171 did you solve it, I am also facing same problem

[@sriharibolisetti3095]

is this working
for react 18.17.0

[@ochnico7658]

npm i html5-qrcode --legacy-peer-deps

[@sriharibolisetti3095]

@@ochnico7658 and also 18.2.0 right?

[@sriharibolisetti3095]

HTML Element with id=reader not found
at handleError (localhost:4200/static/js/bundle.js:334531:58)
at localhost:4200/static/js/bundle.js:334550:7
at Object.invokeGuardedCallbackDev (localhost:4200/static/js/bundle.js:293939:20)
at invokeGuardedCallback (localhost:4200/static/js/bundle.js:293996:35)
at reportUncaughtErrorInDEV (localhost:4200/static/js/bundle.js:309929:9)
at captureCommitPhaseError (localhost:4200/static/js/bundle.js:313591:9)
at commitPassiveMountEffects_complete (localhost:4200/static/js/bundle.js:311658:13)
at commitPassiveMountEffects_begin (localhost:4200/static/js/bundle.js:311646:11)
at commitPassiveMountEffects (localhost:4200/static/js/bundle.js:311636:7)
at flushPassiveEffectsImpl (localhost:4200/static/js/bundle.js:313519:7)
i'm getting this error

[@gorbachew5598]

You need create div element with id = reader

[@user-ev9ob2bv4z]

console.log(scanResult) in useEffect no value

[@Kratosgod217]

Hello! am i the only one who gets 23 warnings like this one:
WARNING in ./node_modules/html5-qrcode/esm/zxing-html5-qrcode-decoder.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from 'C:\Users\Juani\Desktop\StockScan\client
ode_modules\src\zxing-html5-qrcode-decoder.ts' file: Error: ENOENT: no such file or directory, open 'C:\Users\Juani\Desktop\StockScan\client
ode_modules\src\zxing-html5-qrcode-decoder.ts'
????
Thanks for the video! ill keep trying to make it work

[@agnesdaisy5186]

please do install the needy dependency for it ...

[@sylviojerry3038]

hey bro, I got the same problem, please tell me if you found how to solve that

[@sylviojerry3038]

what do you mean ?@@agnesdaisy5186