Как я могу сканировать QR-код с веб-камеры с помощью ZXing in JS?

Question

Мне не удалось настроить библиотеку после примеров README в основном репозитории. Я не хочу использовать ES6, AMD или другие методы, требующие этапов сборки.

Answer 1

Вы можете получить последнюю версию библиотеки из CDN:

<script type="text/javascript" src="https://unpkg.com/@zxing/library@latest"></script>

При этом ZXing будет доступен на веб-странице, так что вы можете использовать такой код для сканирования из веб-камера с использованием метода decodeFromVideoDevice:

<video id="webcam-preview"></video>
<p id="result"></p>
<script>
  const codeReader = new ZXing.BrowserQRCodeReader();

  codeReader.decodeFromVideoDevice(null, 'webcam-preview', (result, err) => {
    if (result) {
      // properly decoded qr code
      console.log('Found QR code!', result)
      document.getElementById('result').textContent = result.text
    }

    if (err) {
      // As long as this error belongs into one of the following categories
      // the code reader is going to continue as excepted. Any other error
      // will stop the decoding loop.
      //
      // Excepted Exceptions:
      //
      //  - NotFoundException
      //  - ChecksumException
      //  - FormatException

      if (err instanceof ZXing.NotFoundException) {
        console.log('No QR code found.')
      }

      if (err instanceof ZXing.ChecksumException) {
        console.log('A code was found, but it\'s read value was not valid.')
      }

      if (err instanceof ZXing.FormatException) {
        console.log('A code was found, but it was in a invalid format.')
      }
    }
  })
</script>

Этот код будет постоянно сканировать видеопоток веб-камеры и пытаться идентифицировать в нем QR-коды.