Simple Example (Non framework)

[BrianMayProfound]

Is there a simple example of implementing this library using just HTML and JS? All of the examples I have found are using React, Vue, jQuery, etc. I'm exploring the possibility of using this in my own framework, so I really just want a basic working example to start from.

[ericblade]

Hi! Thanks for asking! The /example directory does contain a few examples of using the library that look like they only use jQuery as a requirement. https://github.com/ericblade/quagga2/tree/master/example I inherited those from the original repo, so I'm not 100% positive that they are working, but i see no reason why they shouldn't.

I had started to put together a CodePen just to see if it was something that could work, and it did, but unfortunately, that was about the time that life started getting way too complex for me to work on all of the many different pieces of this that i want to work on.

This issue #294 lists the codepen link, and I'd love for others to help out if possible.

[mtowniowa]

@ericblade It's not fancy, but I have modified the codepen code a bit to show what is scanned above the viewport element and log result to console using Quagga.onDetected() -

HTML -

<script src="https://cdn.jsdelivr.net/npm/@ericblade/quagga2/dist/quagga.min.js"></script>
<div id="viewport" />
<h1 id="output"></h1>

CSS-

body {
  background: #89909f;
  padding: 3rem 0 0 3rem;
  font-size: 40px;
  height: 100vh;
  margin: 0;
  overflow: hidden;
}

JS-

Quagga.init(
  {
    inputStream: {
      name: "Live",
      type: "LiveStream",
      target: document.querySelector("#viewport") // Or '#yourElement' (optional)
    },
    decoder: {
      readers: ["code_128_reader"]
    }
  },
  function (err) {
    if (err) {
      console.log(err);
      return;
    }
    console.log("Initialization finished. Ready to start");
    Quagga.start();
    
  }
);

Quagga.onDetected(function(result) {
        var code = result.codeResult.code;
        console.log(code);
 document.getElementById('output').innerHTML = result.codeResult.code;
        
});

[ericblade]

I just updated the codepen with that, i totally thought codepen was collaborative and others could overwrite mine. OOPS

[ericblade]

Link is https://codepen.io/ericblade/pen/yLaVoWy