Adding a QR code scanner to a web app

1. Install the zxing-js JavaScript library, @zxing/library.

   <script
     src="https://cdn.jsdelivr.net/npm/@zxing/library@0.19.1/umd/index.min.js"
     integrity="sha256-xYN+SFijd1FzurCe425gUlRceIDJ10UuL0ZHcMbmQs4="
     crossorigin="anonymous"
   ></script>

2. Add a button to activate QR code scanner and a <video> tag.

   <button id="startButton">Scan QR code</button>
   <video
     id="video"
     width="300"
     height="200"
     style="border: 1px solid gray"
   ></video>

3. When button is clicked, create call the decodeFromInputVideoDevice function:

   const codeReader = new ZXing.BrowserQRCodeReader()
   
   const startButton = document.getElementById('startButton')
   startButton.addEventListener('click', async () => {
     const result = await codeReader.decodeFromInputVideoDevice(
       undefined,
       'video'
     )
     console.log(result)
   })

For other examples, see the zxing-js demos.

Other ways to import zxing-js

ESM

const BrowserQRCodeReader = await import(
  'https://cdn.jsdelivr.net/npm/@zxing/library@0.19.1/+esm'
)