Sign upLogin

zxing-js/library

View on GitHub
Star
docs/examples/qr-video/index.html

Summary

Maintainability
Test Coverage
<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="author" content="ZXing for JS">

  <title>ZXing TypeScript | Decoding from video</title>

  <link rel="stylesheet" rel="preload" as="style" onload="this.rel='stylesheet';this.onload=null" href="https://fonts.googleapis.com/css?family=Roboto:300,300italic,700,700italic">
  <link rel="stylesheet" rel="preload" as="style" onload="this.rel='stylesheet';this.onload=null" href="https://unpkg.com/normalize.css@8.0.0/normalize.css">
  <link rel="stylesheet" rel="preload" as="style" onload="this.rel='stylesheet';this.onload=null" href="https://unpkg.com/milligram@1.3.0/dist/milligram.min.css">
</head>

<body>

  <main class="wrapper" style="padding-top:2em">

    <section class="container" id="demo-content">
      <h1 class="title">Scan QR Code from Video File</h1>

      <p>
        <a class="button-small button-outline" href="../../index.html">HOME 🏡</a>
      </p>

      <p>
        This example shows how to scan a QR code with ZXing javascript library from a video file. The example decodes
        from an url and shows the video while decoding, however is also possbile to decode without showing the video.
      </p>

      <div>
        <a class="button" id="startButton">Start</a>
        <a class="button" id="resetButton">Reset</a>
      </div>

      <small>
        QR code video from
        <a href="https://cirocosta.github.io/qcode-decoder/">https://cirocosta.github.io/qcode-decoder/</a>.</small>
      <div>
        <video id="video" width="200" height="300" style="border: 1px solid gray" muted="muted"></video>
      </div>

      <label>Result:</label>
      <pre><code id="result"></code></pre>

      <p>
        See the <a href="https://github.com/zxing-js/library/tree/master/docs/examples/qr-video/">source code</a> for
        this example.
      </p>

    </section>

    <footer class="footer">
      <section class="container">
        <p>
          ZXing TypeScript Demo. Licensed under the <a target="_blank"
            href="https://github.com/zxing-js/library#license" title="MIT">MIT</a>.
        </p>
      </section>
    </footer>

  </main>

  <script type="text/javascript" src="https://unpkg.com/@zxing/library@latest"></script>
  <script type="text/javascript">
    window.addEventListener('load', function () {
      const codeReader = new ZXing.BrowserQRCodeReader()
      console.log('ZXing code reader initialized')

      const resultContainer = document.getElementById('result')

      document.getElementById('startButton').addEventListener('click', async () => {
        const video = document.getElementById('video')
        video.setAttribute('src', '../../resources/qrcode-video.mp4')
        try {
          const result = await codeReader.decodeFromVideo(video)
          console.log(result)
          resultContainer.textContent = result.text
        } catch (err) {
          console.error(err)
          resultContainer.textContent = err
        }
      })

      document.getElementById('resetButton').addEventListener('click', () => {
        codeReader.reset()
        resultContainer.textContent = ''
        console.log('Reset.')
      })

    })
  </script>

</body>

</html>