How to Create a QR Code Reader or Scanner with API Using HTML, CSS, and JavaScript

Hi there dive into the exciting world of  QR code technology from accessing device   cameras and capture the image to  read the data or upload the file   to read data using JavaScript with API  integration we will guide you through   every step to create a seamless  and impressive scanning experience This is the sixth project on the series  of JavaScript API we aim to post videos   every week kindly subscribe like and  share this video with your friends let's have a quick demo right here  here on the screen we can see the QR   code scanner or reader with two options  first option as upload second option as   scan with camera and Below we can see  the text as upload or scan QR code to   read once user click on upload it will open  the file directory here we can see the QR   codes if you want to learn how to generate  and download this QR codes for your own I have created and uploaded this project  tutorial video last week I have added the   link in the description please do check it out we  need to select any QR file and click on open and   we can see the text changes to scanning QR code  once it's done we can see the data welcome to my   Channel with copy and close option I will close  this now I will click on second option to scan   with camera it will change the text to to loading  camera please wait and top will get the permission   popup from the browser once we click on allow  we'll access the camera and ready for the scan I have a QR code on my mobile I will show to the  camera it will read and display the captured image   as well as the data too the captured data  as please subscribe to my channel for more   videos that's all for the demo before beginning  this video I would like to introduce myself as   Sharathchandar K if you find this tutorial  useful please subscribe to our Channel   and watch this video to motivate me  let's level up our Tech game together Here on my desktop I have already created a  project folder name called QR code scanner or   reader let me open this into a visual  studio code I will drag this directly   into a visual studio code Visual Studio  code will automatically loads all the   files inside it inside the directory  I have already created the index.html,   style.css and script.js in the index.html I have  already added the HTML boiler plate with the help   of exclamation Mark and then I will add the title  to QR code scanner or reader by Sharathchandar K and I will link other two files here  style.css and script.js along with   that I have added the font awesome CDN to  use the font awesome icons here inside the   body I'm going to add the container so  for that in Visual Studio code we have   a embed abbreviation to create a div with  class value I will use dot container in   the below embed abbreviation we can see the  div class container if I Hit enter it will   automatically created the div tag with the  class attribute with the value of container inside that I'm going to add the H2 value of QR  code scanner or reader and then next to this I'm   going to add the QR code view with same Embed  abbreviation QR code view inside that I'm going   to create the input type with file because we  are going to upload the file and read the QR   with accept as images and then we are going to  display that image so I will add the image so   I will add that video element also because we are  going to scan the QR code from other device using   this video and then I will add icon group to  it inside that icon group I will add I element   with the class value of fa solid fa upload and  then second icon as with same I element of class   with fa solid fa camera retro and then below to  this I'm going to add the P tag and then I will   mention the text here upload or scan QR code to  read next div as we are going to create QR text   details after read the QR code we need to display  the details right I will add one more div inside   that I'm going to add that text area to display  the value with disabled and then I'm going to add   the button group here with the help of div button  and inside that I am going to add the two buttons   with button * 2 if I hit enter it will create  here two buttons one is copy and next one is close so I will add the same class value to this  with copy and close I have added all the HTML   element here let us see our HTML file in action  in Visual Studio code we have a extension called  go live once we hit this it will automatically  run our project into the default browser here   we can able to see the H2 with the value of QR  code scanner or reader with file upload we can   see the camera icon here the upload icon is missed  because I have misspelled this I will save if I go   here it will automatically run the project that  is how that live server will work here we can   able to see the icon of upload and then camera  and then text area and copy and close button so we need to style this so for that I need to  jump to the style.css so here in the style.css   I have already added the import URL of font  family Poppins with basic Styles and now we   need to add the styles to the body with the  help of element selector name called body I   will set the background color with blue  color and then I will set the Min height   to 100vh display to flex I'm going to  set all the elements into the center of   the body so I will set the Align items to be  Center and then justify content to be Center if I save now we can able to see the background  color and the elements it's placed into the center   of the body so the next thing I need to add the  styles to The Container previously we have added   the styles to the element selector now we need  to add the styes to the class selector with the   help of Dot and then value of container so I will  set the background color to white padding inner   spacing to be 2rem and then border radius to 5px  margin to 1rem and then I will add the Min width   to 500px I will set the Box Shadow to this with  the help of box Shadow rgba color with red to 0   green to 0 blue to 0 and then alpha should be  0.35 and then I will set the 0px 5px and 15px if I save now we can able to see the  container with box Shadow effect now   I will add the styles to this H2 with the  help of dot container again with the child   element of h2 I will set the text align  to Center then margin bottom to 1rem if   I save now we can see the heading is  center of the screen and now we need   to add the file upload so for that here in  input tag we can set the attribute of hidden if I save now we can't able to see the  file upload here and then next thing I   will add the styles to this QR code view  with the help of class selector with dot   we set padding to 25px and then margin bottom  to 15px border should be 2px Dashed with light   black color we need to set the text align  to be Center and color to be light blue   color then border radius 5px align item  Center then justify content to be Center If i save now we can able to see the dashed  border to that QR code view now I will set   the styles to this icons with again QR  code View and then I here we can find   that I inside that QR code view the Childs  of element I will set the font size 55px   padding inner spacing 3rem and cursor to  pointer if I save now we can able to see   the icons with the larger size same as I  will set the styles to this paragraph tag   with the help of element selector P will  set font size to 1.2rem margin top to 15px if I save now we can able to see the styles to  this here we have the extra space to this so I   will inspect this if I go to the browser now  this extra space is and video and then image   we need to hide this for the first time so with  the help of dot QR code view element selector of   image dot QR code view with element selector  of video for this I will set display to none if I save now we can't able to see the view here  so we need to style this and we need to display   to hide this also for that we have already added  the QR code text details here with the help of   class value of text area with element selector I  will set the width to 100% height to 150px margin   bottom to 10px padding inner spacing top and  bottom to be 10px right and left to be 15px I   will remove the outline To None will set the font  size to 16px we need to disable this resize to be   none and will set the Border radius to 5px we'll  set the Border 1px solid and then black color If i save here we can able to see the text area  now we need to add the styles to this button so   before that we need to align this button into the  left and right side so with the help of button of   class selector of btn we need to use the display  flex this will set the elements into the center   of the list with the help of align item Center  and then justify content should be space between If i save now we can able to see the buttons it  will be get the space between to the each element   so we need to add the styles to this button with  QR text details with the element selector of   button I will set the width of 45% and then height  of 45px background should be blue color border   radius to 5px we'll remove the border with the  help of Border none outline to be none we'll set   the text color with color of white we'll set the  cursor to point we'll set the font size to 16px if I save so now we can able to see the Styles  here this text area should be outside the QR   code view so I will cut this and I will paste  it outside if I save now we can able to see   the views once we click this upload the  file explorer should be open and we need   to read the content and we need to display  it here and for the second option once we   click this this should be open our device  camera and need to read the data's and need   to be displayed here so for the onload  this should be hide right so again with   same class of this with QR text details this  should be reused code to set the display none if I save we cant able to see that so  now we need to add the functionality to   this with the help of JavaScript so I will  jump to the script.js here we are going to   declare the Declaration with the help of  const I will set the first declaration as   file input equal to document the document  object represent your web page if you want   to access any element in an HTML page you  always start with accessing the document   object document. query selector of input  I will do the console. log to file input if I save if I go to the inspect element here  we can see the file input with file type and   then accept of image should be hidden this is  how the Dom Tre will work so I will declare   all other declarations here as I mentioned  I will declare all other declarations if   you want you can pause the videos and you can  declare your own so the first declaration is   file input and then image and then video and  then QR code view with the class selector of   Dot and then icon group and then text area this  is the display message of this particular p tag   and then QR details should be the text area  here while clicking this we need to upload   the file right so for that here we'll add the  file input dot add even listener of change with   function of e inside that we create one let  declaration with file equal to e dot Target   do files of zero and then here I will add the  console.log to check what the file is this so if I save if I go and click it will not  fire because we need to call this file input   anyway we have hidden that file right how we  can do that so here in the file input I will   copy this I will go and add the on click of  this icon even listener off on click file   input dot click and then function bracket  if I save if I go to the browser if I click   now we can able to see the file explorer  is opening how simple is this right how   many times we are clicking it will be open  here we can able to see already the QR code   is generated here if you want to learn how  to generate and download by your own I have   created and uploaded the project tutorial of  QR code generator with download option with   API using JavaScript I have added the link  in the description please do check it out I will open this QR output here if I go to the  console. log of element here we can able to see   the file with QR output. PNG if I click again I  will open some other file here here we can able   to see the name the first one I have selected  is QR output.png the second one is QR old.png   so once we uploaded we need to read that QR  and we need to return the data so how we can   do that with the help of JavaScript API so in the  script.js sometimes this file should be empty so I   will add if condition if not of file then return  return and then we'll create one more function   here with the function keyword of fetch QR code  response function is a block of code designed to   perform a particular task we need to call this  function inside this on change and then I will   pass the file here and then I will receive the  file here and this file need to read and will get   the response from here as I said with the help of  API right if we search QR code scanner API we'll   get that first link as QR code generator here we  have a two options one is for QR code generator   this is what we generated in the last project if  you are interested please do check it out this   is the API to create the QR code with hello  world if I copy if I go to the browser here   it will generate the QR code with the data  of hello world so we need to read the data how we can do that this is a second API if I  copy this if I go and paste it in the browser   here it will return the data of hello world so  here we can able to see this the type is QR code   and then sequence is zero and then data is hello  world and then error should be null this is what   the written response will get so we need to  achieve this from that JavaScript so already   we have received the file here we need to send  the file to this like file URL so I will add   one more let here for form data equal to new  form data here to send the image to this and   then form data dot append of file this is the  key and then value of file and then we need to   use the Fetch with URL off I will copy this HTTP  till here I will paste it here I will make this   https here as they mention api. QR server.com  and then this is the version1 here we are going   to read the QR code and next we need to pass that  file so here in the fetch we have the option to   send the header and body so for now we'll set the  method equal to to post because we are passing the   values with here with the help of body the body  contains form data what we have already generated   above we need to create the then response here  with then response equal to this response should   be dot Json second then as we receive the data  I will add the console dot log here with data if I save if I go to the QR code scanner here I  will upload the file I will add this QR code I   go to the console.log we get the array return  response with the value of sequence and then   data should be Sharathchandar K I will upload  again I will upload this QR code it will return   the response as soon as possible here this symbol  inside that we can able to see the data of Welcome   to my channel if I go to the network tab here  we can able to see the read QR code with headers   and then payload should be file of binary here  we can able to see the view source file output   of the file name then content type as image/png  and this is what the preview we have already seen   in that console.log once we received the data we  need to show into the text area right how we can   do that so here inside this data we'll get the  array of zero so inside the array of zero only   we have the values of this sequence what we have  seen here and then symbol dot symbol inside the   symbol again we have this array of zero and  then we need to get only this data dot data if I save if I go to the browser now I will  upload the file again I will upload this QR   code here we'll get the welcome to my channel  I will upload it again with QR code new will   the response of Sharathchandar K I will upload  this and here if I hit this now we'll get that   null because that QR code has corrupted so once  it's corrupt we need to show the error message   to the user now we'll append this into the text  area first we need to show that text details so   with we have already declared the Declarations QR  text details dot style dot display equal to block if I save if I go and upload the file here  now we can able to see the QR code details   it should be visible here and we need to  open the text to here right for this we   have already added the text area do inner  text to so these things we need to append   so here instead of console. log I will append  this into that let result equal to this value   and then once this result is empty then we  need to return result then we'll return else   we'll set this display message to here of  that paragraph tag with inner HTML to Inner   text equal to could not scan QR code and  then this result should be displayed here if I save if I go and upload the file here we  can upload this QR code as first we can able to   see the welcome to my channel I will upload that  error file here we can see that Could not Scan   QR code and this should be empty this text area  equal to null for the first time if I save if I   go and upload this I will upload the first here  will get the data here and then I will upload the   second one now we can't able to see that and here  could not scan QR code once it's uploaded we need   to show the image here so for this image dot style  dot display to block and then we'll set the image.   source equal to URL dot create object URL of file  because this file we have already passed here so if I save if I go to the browser I will  upload that first QR code here we can able   to see the image as well as the text then  this area should be right so for this this   is a icon group for the icon group we have  already added the Declaration icon group dot   style dot display equal to none if I save  if I click if I upload now we can able to   see this here we need to set this image into  the center of the screen right now as for this   now QR code view as in the block so instead of  this QR Cod view. style. display equal to flex   because we have already added the styles to  this so if I go here we can able to see the   justify content and then align items with  this we need to add the display flex to if I save if I upload the image if I click now we  can able to see the image on center of the QR code   View and then we can able to see the welcome to my  channel text message also and we need to add the   copy and then close button so for that we need to  create two more function with the help of function   keyword function first one as copy QR code text  and then second function as close QR Code Reader   then for this copy we'll get that let text equal  to text area dot text content so and then we need   to copy this into the clipboard with the help  of Navigator . clipboard . right text of that   text we need to call this function so inside this  index.html for this copy I will set this on click   event here with the help of copy QR code and then  second Button as onclick event here with the help   of close QR code reader for this close QR Code  Reader we need to set this image dot style dot   display to be none and then we'll set the video  dot style also to be none and then QR text details   . style. display equal to none and then we'll set  the text area dot inner text also null and then   we'll remove the file input dot value equal to  null and then here we need to set this message all   the times for example if I have upload the error  file then this should be an error message right   so we need to set this this message to for the  generic One display message dot inner text equal   to this message and then we need to enable this  icon group dot style dot display equal to block if I save if I go to the browser I will upload the  file to this one it will upload and will get the   value now I will it on copy and again go here if  I paste here now we can get that Sharathchandar   k a copy code from here if I click on close we  can able to see this now the next thing is we   need to read the values from an camera once we  click this we'll get that file directory right   as same as once we click this the video should be  enabled from the device so for that we can create   one more function of Scan QR image and then inside  that we need to do the functionality for that so   for scanning the QR code we have a library the  library name called install scan with the help   of this install scan JS we can able to access  the device camera and we can read the QR code   and it will return the response of QR code data  so how we can use this for this we have this CDN   so I will copy and paste it for the CDN of insta  min.js inside the script.js I will declare the   Let scanner equal to new install scan. scanner  this install scan is an object from that Library   so if I go to the console.log insta scan so here  we have the camera and then scanner insta scan   dot scanner this is the function we need to pass  that video element and it will be set the video   content to that particular element so with the  help of this scanner we'll use the function I   will use the video and then video of video tag  I have already declared here for this video   and then we need to capture the image and we  need to display the image as same as how we   have upload so for that we have a option  here capture the image also the parameter   of capture image as true and then if once  the scanner present then only we need to   do that operations so inside that we need to  set this error message with same as display   message. inner text equal to will show the  loading message to loading camera please wait if I save if I go and click nothing is happened  because we need to call this function I will   copy this I will jump to the index.html  here with the help of on click event and   I will call the function I save if I go to the  browser if I click now we can able to see the   loading camera please wait and then we need to  find all the cameras and then we need to Define   that so for that here we can check this insta  scan dot camera dot get cameras with then off   cameras we'll get all the cameras here once we  set the video to block and then we need to set   this icon group to be hidden right so with  icon group. style dot display to none then if I go if I refresh if I click on camera now  we'll get that loading camera please wait and then   we can able to see the camera and I have displayed  the paper here here the video size is too high we   need to set the height to this and we need to stop  the camera also once we loaded the camera we need   to stop this right so every time we can't able to  refresh so for that we need to add the stop icon   for this for that I will jump to the index.html  in the index.html next to the header I will set   the I with class of fa regular fa Circle stop  then I need to set the ID to this with stop scan if I save now we can able to see the icons next  to this I will copy this ID and I will declare   the Declaration to this of stop scan equal to  document dot this is an ID get element by ID   with the help of ID value I need to add the styles  to this in the style.css with the help of # this   will help to set the styles to that ID with  that value of stop scan I will set the position   to relative and then top to 2px and then left to  5px and then we'll set the color to prism and then   we'll set the cursor to pointer if I save and  now we can able to see the stop symbol here we   need to set the height and width for image  and video with the element selector of Max   width 380px for the first time this icon should  be none right so I will set the display To None if I save now this should be not visible  once user click this camera and after the   camera loads this should be disabled so here  after this icon group I will set that stop   scan dot style dot display to inline and  then we need to set the stop scan dot on   click equal to function because once we click  this this should be stop the camera right so   here already we have added this scanner and  we'll set the stop because in the top we are   already starting the camera with scanner dot  start and here we can stop that scanner. stop if I save if I go to the browser if I  click on camera and it will load the   camera and we have set the min height  here it will automatically set the I to   this particular width size and once we click  this this should be stopped so this should   be set back to the previous one and this also  should be hidden so for this we have already   created the function of close QR Code Reader  inside this we have already removed all the   values and then we can add one more values here  with stop scan dot style do display To None I save if I go to the browser if I click on  upload it will load the camera and it will   displayed here and we can scan the values  here we'll do that later once we stop it   will automatically stop again then we can start  here it will be notify what we are doing with   the camera and once it stop we can't able to  see the camera access from the browser here we   have given the permission so for example I will  reset the permission I will reload here now if I   click now again the popup will rise from the  browser if I block we can't able to get that   so here we can see the error so camera cannot  access video stream user can't come to know   right what is happening in the background once  it's happened we need to set the error here so   here in the insta scan. cam here we need to  set the catch of. catch once it's happen the   error will catch the error from here so I will add  the console. log here to check what is the error if I save if I go to the browser if I click now  we can able to see the console. log of not allowed   error so once we get this we need to show the  error message to the user so how we can do this   so already we have the display message dot inner  text equal to we can set the error and we can   show to the user as request camera failed reset  permission then if I save if I go to the browser   if I click now we'll get the error and here it  can be shown the error message to the user and   here user need to reset the permission if I go to  the reset and it will reset and then browser will   automatically as the reload to this if you click  reload if I click again now we'll get that popup   permission message once we click allow it will  load the camera and it will be displayed here   once we stop it will be stop so now we need to  add the scanner details to this how we can do that   once we scanned we need to do that functionality  to here so here once we load the camera and then   we need to add the event listener to that scanner  that scanner dot add event listener for the even   listener of scan and then function we need to  set this text as well as the image so inside   that I will add the console. log and I will  check for the text I will check for the image if I save if I go to the browser if I click  on camera scanner dot add event listener is   not a function because this is scanner. add event  listener instead of add event listener we need to   set this only for listener so we'll scanner dot  add listener now if I save if I go to the browser   if I click on can so it will load the camera here  I will show the QR code from my mobile now we can   able to see the text here hello world this is sha  if I stop if I clear and I will undo the image if   I save if I click my mobile is screened off so  I will show you now we can to see the image as   well as the text we need to set the image here  so here we can able to see the image right so   here in this capture image instead of true I will  sat set this things to false if I save if I go and   scan it again now the camera is accessing now we  can able to see the video but the image is null   once we set these things to true then we'll get  that image source also then that same image we   can append here so instead of false I will set  these things to True again and inside this add   listener I will set that QR text details dot  style dot display equal to block and then QR   code code view do style. display equal to flex  I will remove the scanning video here to set the   display to none and then if the scanner is running  then we'll stop that scanner because otherwise it   will be accessing from the background I will set  that image. Source here and we need to display the   image right here I will set the image dot style  dot display equal to block and then we need to set   the image dot Source here equal to directly we'll  set that image file because we are getting that QR   code value directly as a data and then we need  to remove that scanner stop also dot style dot   display equal to none and then finally we need  to set the text area dot inner text to be text if I save if I go to the browser if I click on  scan now it will loading the camera and it will   get the scanner open and here we can see the  image is captured the text of this hello world   this is sha how simple is this right we can close  and we can able to upload so here we need to add   the small animation I will add the animation of  fade in one second this fade in as an key frame   at Key frame I will change the identifier to fade  in I will set the 0% and then 100% I will set the   opacity to zero and then transform scale to zero  and then same thing I will copy instead of zero I   will change to one for each if I save now we can  able to see the animation effect on the browser   here so if I refresh if I click on image upload  we'll get that effect of animation and we'll   show the image here that value finally we have  completed this QR code scanner or reader with   API using HTML CSS and JavaScript I hope this  video will be helpful for you please like and   share this video and also subscribe to my channel  Sharathchandar K to watch more videos like this   one if you are interested in JavaScript projects  like this I have created and added a playlist Link   in the description please do check it out thank  you so much for watching until next time keep   coding and keep learning see you in the next next  video Happy coding bye for now have a nice day

Channel: Sharathchandar K

Views: 575

Keywords: qr code generator, javascript qr code generator, qr code generator tutorial, best qr code generator, social media qr code, qr code generator using ai, qr code scanner or reader html css javascript, javascript, qr code reader javascript, read qr code from using javascript, qr code generator javascript, qr code scanner, qr code scanner javascript, javascript qr code scanner, qr code reader, qr code reader using javascript, qr code tips, qrcode, how to use qr code, youtube qr code

Id: O5TMsVxDtXY

Length: 36min 1sec (2161 seconds)

Published: Sat May 11 2024