Up next in 10
Build a React.js QRCode Scanner Using Webcam & Image in Browser Using jsqr Library in JSX
86 views
Jun 3, 2025
Get the full source code of application here: https://codingshiksha.com/react/build-a-react-js-qrcode-scanner-using-webcam-image-in-browser-using-jsqr-library-in-jsx/ Watch My Visual Studio Code IDE Setup Video For Fonts,Themes & Extensions https://youtu.be/Bon8Pm1gbX8 Hi Join the official discord server to resolve doubts here: https://discord.gg/cRnjhk6nzW Visit my Online Free Media Tool Website https://freemediatools.com/ Buy Premium Scripts and Apps Here: https://procodestore.com/
View Video Transcript
0:00
uh hello guys welcome to this video So
0:03
in this video I'll show you uh this
0:05
ReactJS QR code uh scanner or reader I
0:09
developed inside the browser and also I
0:13
deployed this website on my uh
0:17
freemediatools.com So you can check out
0:19
this So here you actually select your QR
0:22
code Actually you can scan it by
0:25
selecting a PNG image and then it will
0:28
scan it and show the result to you with
0:32
this button here copy to clipboard So
0:33
you can copy the result here It scans it
0:37
displays the
0:38
result We also have the second option to
0:41
actually use the webcam As soon as you
0:44
do this you will see your webcam
0:46
will start and you simply click the
0:49
button start scanning and it will
0:52
actually scan your QR code and it will
0:55
display the result here at the bottom
0:57
side if you see Okay And you can copy to
1:01
clipboard You
1:02
simply put the QR code here using your
1:06
web camera Simply click start
1:08
scanning button right here at the bottom
1:11
side and it will actually scan it and
1:14
then display the result here So for this
1:17
we are using a ReactJS
1:20
library If I show
1:25
you we are using this package JSQR which
1:30
is a
1:33
library QR code reading library It's
1:36
almost got
1:38
377,000 installs The command is
1:42
simple You simply install this package
1:45
And now I will show you in this video
1:47
how to build this application from
1:49
scratch So this is the entire source
1:52
code
1:54
here Almost 294 lines of code So I will
1:58
just show you from scratch and try to
2:01
explain you each concept So the very
2:04
first thing we will do uh just uh make a
2:07
simple functional
2:11
component and the very first step now we
2:14
need to
2:18
do for this we are also using tailwind
2:21
CSS So I already included the CDN of
2:25
Tailwind here If you see simply include
2:28
the CDL and uh reset
2:32
your so now right here the very first
2:35
step will
2:37
be to write a very basic H1 tag here
2:42
which will say QR code scanner So we
2:44
just included some Tailwind CSS classes
2:46
So if you refresh your application you
2:48
will see this heading
2:51
appearing So I just need to start this
2:55
application So what I will
2:57
do npm
3:00
rundev So this will actually start your
3:02
application at localhost 5173 You will
3:06
see this heading QR code
3:08
scanner And now we need to
3:12
do first of all we need to declare some
3:15
variable state variables So I will just
3:17
declare a one variable
3:21
here scan
3:23
mode and for this I will be using the
3:26
use state
3:28
hook Initial value will be upload So we
3:32
will allow user two things two modes
3:34
either they can upload image or they can
3:38
scan the QR code through webcam So
3:40
initial value here will be
3:42
upload and
3:44
uh then after
3:48
that after this heading we will just
3:50
provide a button to the user so that
3:54
they can toggle
3:56
it either they
4:02
can so just wait let me just paste and
4:05
explain to you So we will have this
4:08
section right here built using Tailwind
4:11
CSS So we attach these classes We have
4:13
two buttons either we can upload or scan
4:16
the QR code by
4:18
image or we can use the web camera for
4:21
this So we actually uh have two buttons
4:24
right here Uh we actually binded this
4:27
function which is switch scan mode and
4:30
here we pass upload If the user clicks
4:33
the webcam button then we call the same
4:36
function but pass webcam Now we just
4:39
need to define this function which will
4:41
be
4:45
switch the scan mode So here the mode
4:50
will be passed here and inside this we
4:52
simply set the scan mode to whatever
4:55
mode is passed So if you refresh your
4:58
application so you will actually see two
5:00
sections appearing either they can
5:03
upload image or they can use web camera
5:06
So here we can simply toggle it Now we
5:09
need to show the appropriate sections
5:11
for this So by default image is selected
5:14
So now we just need to allow the user to
5:16
simply select a image file to scan the
5:19
QR code So the next step here will be
5:23
inside your
5:24
JSX you
5:33
simply outside this we simply say we'll
5:37
compare it the variable here scan mode
5:40
with triple equal to for the condition
5:43
So here we are simply checking that if
5:45
the scan mode value is upload in that
5:48
case we need to actually show this
5:52
JSX So this will be a simple section
5:56
where we allow the user
6:00
to
6:05
select a image file from their computer
6:08
which actually have the QR code So this
6:11
is actually the tailwind CSS So this
6:13
video is not about Tailwind So I just
6:16
included all the classes here all the
6:18
HTML So basically we have a input type
6:21
file here We accepting only images and
6:25
uh we actually binded this function on
6:28
change So whenever you select any image
6:31
this function will execute handle file
6:34
upload So now we need to define this
6:37
function handle file upload So as soon
6:41
the user
6:47
selects so this e parameter will
6:49
automatically get passed
6:54
So but before that we also need to
6:57
import the package for scanning the QR
6:59
code So for this we are using this
7:01
package JS QR So in this easy way you
7:07
can import this package using the import
7:09
statement Then we need to declare some
7:11
state
7:13
variables Scan result This will actually
7:16
store the scan result after you scan the
7:20
QR code Then we also actually need to
7:23
store the error message So for this we
7:26
actually declare this use state variable
7:30
Then we
7:32
actually declare a variable for storing
7:36
the canvas initial value will be null
7:40
and same for the file input ref as well
7:43
So we actually attach this reference if
7:46
you check the HTML we actually attach
7:49
this reference here file input ref
7:51
initial value will be null right here if
7:53
you see here And for this we also need
7:56
to use use ref hook coming from
8:00
ReactJS So after doing this now we need
8:03
to define our function So as soon as you
8:06
if you refresh it you will see this uh
8:09
select file button When you click this
8:11
button you will be able to select a QR
8:14
code image Now as soon as you select
8:17
this this function will execute And now
8:19
we need to get the reference of the file
8:21
easily We can do this using e.target
8:23
target dot files to get access to the
8:26
file that the user has selected and then
8:29
we need to set the error message to
8:33
nothing This is our hook
8:36
function and here we will simply read
8:39
the file here For reading the file we
8:41
simply use the file reader
8:44
API which is available in the browser
8:48
And then there is a function called as
8:55
onload So this is a very basic code guys
8:58
Whenever we select images from computer
9:02
now to you actually read those images
9:04
this is a very basic code We are using
9:06
the file reader API This onload function
9:09
is there and when the image is loaded
9:12
now we are calling this custom function
9:14
that we make which is process image and
9:17
inside this function we are passing this
9:19
input image which is selected as an
9:22
argument and then we are getting the
9:24
base 64 code using this and now to
9:27
invoke this function we need to call
9:29
reader as read as data url file So this
9:34
is a very basic function to actually
9:36
read the files Now we need to make this
9:38
function which is process image which
9:41
will actually scan the QR
9:48
code So this is the main
9:51
function which is responsible for
9:54
reading the QR code
9:58
So inside this function we first of all
10:01
make use of the canvas for getting the
10:04
canvas
10:06
reference We can get the reference of
10:08
the canvas by using this canvas ref And
10:12
for this we do need to display the
10:15
canvas So right inside your
10:18
JSX you actually display the canvas For
10:22
displaying the canvas you simply put the
10:24
canvas
10:26
tag and you first of all attach the
10:28
reference which is your canvas reference
10:32
We will be using this reference So we
10:34
are simply attaching it using this
10:36
reference and by default this will not
10:39
be shown to the user So class
10:43
name sorry this is reference this will
10:48
be your
10:53
canvas and by default it will not be
10:56
shown so it will be
11:00
hidden And now we will be using this
11:03
canvas reference right here in this
11:05
function And after this we will
11:07
calculate the width of the canvas to
11:11
whatever is the width of the image Same
11:13
goes with the height as well Then we
11:15
need to get the context 2D context and
11:17
draw the
11:19
image And the next step will be to get
11:22
the image data which will be the base 64
11:25
code here So we are using this function
11:27
context or get image data and canvas
11:30
with canvas height And the next
11:33
step we actually use this uh
11:42
uh after getting the image data we
11:44
actually use this package JS QR and this
11:50
package
11:52
actually we need to pass the image data
11:55
image data dot data image data dot
12:00
width width of the image and image data
12:03
doheight So this will actually read and
12:06
process your QR code and then it will
12:08
return the actual code So if the code is
12:11
returned to us then we will display this
12:13
So we will simply set the scan
12:17
result to whatever code is returning to
12:20
us code data and then we'll set the
12:24
error message to nothing as well If the
12:26
code is not returned in the else block
12:29
we will simply say set
12:33
error message No QR code found in the
12:35
image Set scanned result to nothing So
12:38
this is all that we need for the
12:40
JavaScript Now we just need to go to the
12:42
JSX to update the user interface So just
12:46
after this canvas we will display the
12:49
actual error
12:53
message If the error message exist in
12:56
that case you will display the error
12:59
message using some Tailwind
13:01
classes And uh now if you want to
13:05
display your scan result you will first
13:07
of all compare it and display this like
13:11
this Very simple So we are displaying
13:14
the variable scan result or error
13:17
message if any sort of error take place
13:20
So if you try to refresh your browser
13:22
guys uh now simply select any QR code
13:27
image and now you will see QR code data
13:30
which is http as google.com So we
13:33
actually scan the successfully the image
13:36
simply selected the QR code image and
13:39
you will see QR code data which is
13:41
returning which is a simple URL
13:44
httpsgoogle.com and uh this is so easy
13:48
guys to do using this package and
13:51
uh now we will move to the second part
13:54
here which will be scanning through web
13:57
camera So if I show you the second
14:00
way So now for this we do need to
14:03
declare some state variables for this So
14:05
first of all we will declare a video
14:08
reference variable This will be null
14:11
Then we stream ref and then we will be
14:14
having a variable for
14:18
checking if the file is scanning or not
14:21
Initial value will be false
14:24
So now we come to the JSX right
14:29
here and right here we simply have a
14:33
condition that if the scan mode triple
14:36
equal to
14:39
webcam in that case we will show
14:42
actually a video element So this is I
14:45
pasted all the JSX here alongside with
14:49
the Tailwind classes So we have a video
14:50
element right here If you see we are
14:52
showing the video stream of the user
14:56
auto play in line controls muted Then we
14:59
have a button right
15:01
here So this button will be responsible
15:04
for
15:06
uh start scanning or stop scanning So
15:10
this is actually a
15:17
button So let me just paste it Sorry
15:26
this JavaScript code we will write in
15:28
the JavaScript section So right here
15:31
what we are doing right here if you see
15:33
if the scan mode is equal to webcam then
15:35
we are showing the video stream of the
15:37
user the web stream alongside we have a
15:40
button as well start scanning So once we
15:42
press this button we need to execute
15:45
this function which is start webcam scan
15:51
So now what we need to do right
15:59
here
16:04
So if I let me close my this website So
16:10
if you go to the website uh if I open
16:13
the application you would see if I show
16:16
to the section use webcam nothing
16:18
happens because we need to define that
16:21
function because we binded this function
16:24
which is this one start webcam scan So
16:28
we just need to define this function
16:31
So start webcam
16:37
scan So inside this function we need to
16:40
start our uh web
16:43
camera So just make this function async
16:47
because we need to start our web camera
16:49
For doing this we all this code will be
16:51
returned at try catch
16:54
block So inside this we first of all set
16:57
the error message to
16:59
nothing and
17:01
uh after that we basically get the
17:04
reference to the web camera So for this
17:07
we use the simple code navigator media
17:10
devices get user media and we will get
17:13
the video of the user of the environment
17:15
facing mode will be environment and
17:21
uh then we attach this is simple code
17:24
stream ref current to stream video force
17:28
object to stream video reference current
17:31
play So the video will start
17:34
playing and
17:37
If you just refresh your application go
17:41
to use web camera So now you will
17:45
see the web camera will start but the
17:48
video is not showing For doing this we
17:50
need to declare a
17:52
variable or request animation frame This
17:56
function we need to call and pass this
18:02
scan We need to pass this which is
18:05
scan video
18:18
frame So I think scan video
18:26
frame So now we need to declare this
18:30
uh function which will be this is the
18:34
function that we need to define right
18:36
here scan video frame We are passing it
18:38
to request animation frame So this
18:41
function will be responsible for
18:43
scanning the video video
18:49
frame So inside this function uh we
18:52
actually get read the video of the
18:57
user by video ref
19:00
current and also getting canvas
19:04
reference and here we will wait for the
19:07
video to load For doing this we we will
19:09
add this if condition If the video's
19:12
ready state is equal to enough data then
19:14
we request animation
19:16
frame like this
19:23
Then we basically after this we actually
19:27
put the canvas width and the height to
19:29
the video width and height Then we use
19:31
the 2D context of the canvas to draw the
19:34
image the draw the
19:39
video So we get the image data once
19:41
again and then again use this package to
19:44
read the image data
19:49
Once we get the result we actually scan
19:53
this or display this on the
19:57
browser and then we stop the web camera
20:00
scan To stopping this we can actually
20:03
add a function to actually stop the web
20:06
camera So we can actually add this
20:11
function here We simply remove the video
20:15
stream
20:18
So this is I think if you
20:26
refresh so your scanning will start guys
20:29
if you just put
20:35
your so it will actually scan your QR
20:37
code Now for display the
20:40
result we now need to dis uh update the
20:43
JSX So right
20:46
here we go to the JSX You can basically
20:50
find all the source code guys in the
20:52
description of this
20:57
video So we come to the
21:00
JSX right here
21:10
So we put a copy to clipboard button as
21:14
well alongside with this So if you
21:23
see so we are displaying this result
21:26
here just checking for the variable and
21:28
displaying this if you see And then we
21:31
also have a copy to clipboard button as
21:33
well So if you refresh
21:57
now so all the source code guys will be
22:00
given in the description So I think
22:02
there was just a typo mistake Let me
22:04
correct
22:24
that You can even test this application
22:27
And I have deployed this on my website
22:28
as well
22:31
Freemediatools.com can see
22:41
that So you can see that guys this is a
22:45
complete uh QR code uh web camera
22:48
scanner using web camera and image We
22:51
have used this inside reacts So thank
22:54
you very much for watching this video
22:56
and also check out my website
22:58
freemediatools.com which contains
23:00
thousands of tools regarding audio video
23:02
and image