Get started with quagga CDN

MIT licensed

Real-time computer vision: Quagga JS identifies objects via webcam.

Tags:
  • quagga
  • quaggajs
  • barcode
  • ean
  • code128
  • code39
  • codabar
  • i2of5
  • upc
  • getusermedia
  • imageprocessing

Stable version

Copied!

How to start using quagga CDN


<!DOCTYPE html>
<html>
<head>
  <title>Get started with quagga CDN - cdnhub.io</title>
  <script src="https://cdn.cdnhub.io/quagga/0.12.1/quagga.min.js"></script>
  <style>
    #scanner { width: 100%; height: 100vh; }
  </style>
</head>
<body>
  <div id="scanner"></div>
  <script>
    const scanner = new Quagga.VideoclipDetector({locate: true});
    const scannerElement = document.getElementById('scanner');

    navigator.mediaDevices.getUserMedia({ video: { facingMode: "environment" } })
      .then(stream => {
        scanner.initDetector(stream);
        scanner.addListener('detected', (result) => {
          console.log('Detected barcode:', result.codeResult.code);
          scanner.stop();
        });
        scanner.start();
        scannerElement.innerHTML = 'Scan a barcode';
      })
      .catch(err => {
        console.error('Error accessing media devices.', err);
      });
  </script>
</body>
</html>
Copied!
Copied!

All versions