Im a beginer in js and jquery that's why i need your help . I would like to build a barcode reader in js thanks to the camera on my phone . For the moment i do this :

  <video id="video" width="640" height="480" autoplay></video>
    <button id="snap">Snap Photo</button>
    <canvas id="canvas" width="640" height="480"></canvas>
     <script type="text/javascript">
     // Grab elements, create settings, etc.
     var video = document.getElementById('video');

     // Get access to the camera!
     if(navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
       // Not adding `{ audio: true }` since we only want video now
     navigator.mediaDevices.getUserMedia({ video: true }).then(function(stream) {
      video.src = window.URL.createObjectURL(stream);
      video.play();
  });
  // Elements for taking the snapshot
  var canvas = document.getElementById('canvas');
  var context = canvas.getContext('2d');
  var video = document.getElementById('video');

  // Trigger photo take
  document.getElementById("scan").addEventListener("click", function() {
	context.drawImage(video, 0, 0, 640, 480);
  });
}

Im a beginer in js and jquery that's why i need your help . I would like to build a barcode reader in js thanks to the camera on my phone . For the moment i do this :

  <video id="video" width="640" height="480" autoplay></video>
    <button id="snap">Snap Photo</button>
    <canvas id="canvas" width="640" height="480"></canvas>
     <script type="text/javascript">
     // Grab elements, create settings, etc.
     var video = document.getElementById('video');

     // Get access to the camera!
     if(navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
       // Not adding `{ audio: true }` since we only want video now
     navigator.mediaDevices.getUserMedia({ video: true }).then(function(stream) {
      video.src = window.URL.createObjectURL(stream);
      video.play();
  });
  // Elements for taking the snapshot
  var canvas = document.getElementById('canvas');
  var context = canvas.getContext('2d');
  var video = document.getElementById('video');

  // Trigger photo take
  document.getElementById("scan").addEventListener("click", function() {
	context.drawImage(video, 0, 0, 640, 480);
  });
}

but it doesn't work so im pretty lost x) thank you in advance to your help ! (sorry for my english :D)

• javascript
• jquery
• html
• web-applications
• camera

• I think it is useful to you https://atandrastoth.co.uk/main/pages/plugins/codereader/ – Arshad Shaikh Commented Jun 8, 2017 at 7:58
• Thank you I will look at this ! – Jaime Commented Jun 8, 2017 at 8:02

2 Answers 2

Why not using some libs, eg.

• QuaggaJS
• Some other reader

You could make use of the zbar C/C++ library and transpile it to WebAssembly (which is supported by all major browsers) using Emscripten.

Emscripten is an LLVM/Clang-based piler that piles C and C++ source code to WebAssembly, primarily for execution in web browsers.

Here's an example app:

• https://github./maslick/koder

• https://koder-prod.web.app