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
10 ай бұрын
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
8 күн бұрын
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?
@shekherkaushik.18
4 ай бұрын
thankyou so much it is very helpful 😇
@kovereduard637
4 ай бұрын
does it work for you?
@shekherkaushik.18
4 ай бұрын
@@kovereduard637 yes, i used it in production and currently its working good 👍
@kovereduard637
4 ай бұрын
@@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
4 ай бұрын
@@shekherkaushik.18 also did the camera part work?
@shekherkaushik.18
4 ай бұрын
@@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: kzitem.info/news/bejne/0KSwsKujenWKdJg
@jobygeorge3395
4 ай бұрын
Thanks Man.
@parkj4442
11 ай бұрын
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.
@user-uh5nb1wr6y
Жыл бұрын
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 ]
@hamadkhan3248
Ай бұрын
thanks
@yashpataliya7695
4 ай бұрын
thanks for the code but i want when i click on the turnon button then only camera start not before
@user-hs2un6ks1e
6 ай бұрын
How to fix :Uncaught TypeError: Cannot read properties of null (reading 'videoWidth')
@walidsabbidine7335
3 ай бұрын
it works on mobile devices?
@honfey
10 ай бұрын
Hi, can it scan barcode as well?
@fahiyangtech
11 ай бұрын
Can with qrcode and barcode 128?
@sriharibolisetti3095
5 ай бұрын
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
5 ай бұрын
You need create div element with id = reader
@raksmeyincomputing
6 ай бұрын
Cool
@cosmasdaniella2079
7 ай бұрын
This is a cool tutorial but for some reason I keep gettign this error "Uncaught HTML Element with id=reader not found".
@revanthkumarsake7035
6 ай бұрын
I am also faced same issue, I make sapareated QR code file , its resolved
@lifeofstephen-yt
11 ай бұрын
Why do you sound like you are being kidnapped lol
@muradjadoon619
Жыл бұрын
share your github repo link
@jhonuribe171
Жыл бұрын
When I reload the page, the camera appears twice and I want to change the style
@onedimension
9 ай бұрын
how u fixed this?@@jhonuribe171
@learning_trespasser
9 ай бұрын
@@jhonuribe171 did you solve it, I am also facing same problem
@sriharibolisetti3095
5 ай бұрын
is this working for react 18.17.0
@ochnico7658
5 ай бұрын
npm i html5-qrcode --legacy-peer-deps
@sriharibolisetti3095
5 ай бұрын
@@ochnico7658 and also 18.2.0 right?
@user-ev9ob2bv4z
2 ай бұрын
console.log(scanResult) in useEffect no value
@Kratosgod217
11 ай бұрын
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
9 ай бұрын
please do install the needy dependency for it ...
@sylviojerry3038
5 ай бұрын
hey bro, I got the same problem, please tell me if you found how to solve that
Пікірлер: 47