Up next in 10
Build a Angular QRCode Reader & Scanner From Webcam & File Using ngx-scanner-qrcode Library in TS
Jan 30, 2025
Get the full source code of application here: https://codingshiksha.com/angular/build-a-angular-qrcode-scanner-from-webcam-file-using-ngx-scanner-qrcode-library-in-ts/ 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:02
in this video I will show you a angular
0:04
module which is used to scan QR codes
0:07
from web
0:10
camera and also you can scan it from an
0:13
image as well so let's suppose I'm
0:15
scanning here if you
0:18
see so you just need a image here where
0:22
you can
0:25
actually the so it will scan it and it
0:28
will display the ACT ual result right
0:31
here if you see this is actually the
0:33
result here which is
0:34
google.com and you can
0:37
even put a image as well so if you have
0:41
image of the QR code then also it will
0:44
do the same thing it will scan it and it
0:45
will display the result here so it has
0:48
both the things either you can scan it
0:51
through your web camera or you
0:53
can if you have the image of the QR code
0:56
then it scans it it reads the content
0:58
and then it's display is it
1:01
so you can copy to clipboard so it has
1:03
the result here you will see that so it
1:06
has all these nice little sounds as well
1:08
the web camera sound so it automatically
1:11
detects the QR code scans it and
1:13
displays it so the actual module
1:16
here if you go to npmjs.com
1:20
this is actually the module
1:23
ngx scanner QR
1:28
code so this this is actually angular
1:32
specific package for scanning your QR
1:35
code and it's almost having 6,000 weekly
1:38
download so I have written a step
1:40
by-step blog post on my
1:42
website and you can go to the full
1:45
example code if you want to my website
1:48
we are given this full source code the
1:50
very first thing we need to do after you
1:52
install this package just go to you this
1:55
app. module. typescript file and first
1:58
of all you need to add this import
2:00
statement for registering this module
2:02
globally so we simply write import and
2:05
then we write
2:07
ngx
2:09
scanner QR
2:12
code module and it will be coming from
2:15
this package ngx scanner QR code so you
2:19
just globally requireed this by using
2:22
this import statement and then you come
2:23
to the Imports array and just add this
2:27
module that you imported that that's all
2:30
the configuration code which is required
2:32
here and now you can close this file
2:33
Here and Now for using it I written a
2:36
complete example right here inside your
2:39
app. component. HTML file we have this
2:43
simple form here where it asks for the
2:45
camera permission you need to Grant
2:49
access so to
2:51
whichever machine you are using it
3:01
so as you reload the page it will ask
3:03
for the camera permission you need to
3:04
Grant it so once you grant the
3:07
permission you will see this camera
3:11
appearing can select from this drop
3:25
down so you can see can select the
3:29
camera or you can submit the image
3:35
here so the actual directive which is
3:37
responsible for this is this one we have
3:40
first of all the select here on change
3:44
Play device here this is actually the
3:46
function
3:47
and we are looping through all the
3:49
camera devices that the user has using
3:52
this ng4
3:54
director and we are displaying all these
3:57
cameras one by one and right in the
4:00
select field whenever you select a
4:02
camera this choice is passed here so we
4:06
have three options here depending upon
4:08
the operating system Windows Mac and
4:11
ioso and this is actually
4:15
the directive which is responsible for
4:18
scanning your QR
4:21
code so let me explain you little bit
4:24
more so this is written ngx scanner QR
4:28
code this is this is the opening tag and
4:30
the closing tag so in between this you
4:32
will display the QR code scanning so
4:36
here you will give it a action which I
4:38
will say scanner and then you will pass
4:41
your config object right here which you
4:44
define inside your typescript code and
4:46
it also has a call back function event
4:49
so whenever you scan the QR code this
4:52
function will execute passing the event
4:54
and the action
5:00
so these three things are
5:04
there which are required by this uh
5:13
component and based upon if the is
5:17
loading we are showing the loading
5:18
message and then we have the buttons for
5:22
starting and restarting the camera here
5:26
so all these buttons are there
5:31
and same goes for image scanning as well
5:34
if you have the image file again we pass
5:36
it on
5:38
event we using the same ngx scanner QR
5:42
code component so you can pass it if you
5:45
have a image by clicking this button so
5:48
this image picker will open now you will
5:50
submit the QR code image and then it
5:52
will scan it and display the result so
5:55
now we come to the typescript code here
5:57
and at the very top we actually import
5:59
all the these modules which are coming
6:01
from ngx scanner QR code so all these
6:04
methods for scanning the QR code from
6:06
web camera or from image we are
6:09
importing it and then we are setting the
6:11
properties for the web camera such as
6:13
the
6:14
width and right here we are targeting
6:18
faction declaring
6:24
variables and this is basically the
6:27
method which is responsible load file
6:30
it loads the QR code it then scans it
6:33
and displays the result right here and
6:35
same goes if you are submitting a image
6:38
file then it uses this function which is
6:40
load files to scan we pass the image
6:43
file plus the configuration settings
6:46
then we subscribe to this method and
6:48
then we get the required result and we
6:52
store it so in this way you can make
6:55
this awesome application of scanning
6:57
your QR code through web camera or
6:59
through submitting a image file as well
7:02
so this is actually a angular specific
7:04
module ngx scanner QR code you can
7:07
directly install it and start using it
7:10
and you can refer to my blog post where
7:12
I have written a step by-step blog post
7:14
and also the full source code is also
7:16
given so thank you very much guys for
7:19
watching this video and also check out
7:22
my website as well free mediat tools.com
7:24
uh which contains thousands of tools
7:28
regarding audio video and limits
7:30
and I will be seeing you guys in the
7:32
next video