notes.dt.in.th

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'
)