如何使用相机在js中构建条码阅读器？

Question

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)

Answer 1

Why not using some libs, eg.

• QuaggaJS
• Some other reader

Answer 2

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 compiler that compiles C and C++ source code to WebAssembly, primarily for execution in web browsers.

Here's an example app I have just published:

• https://github.com/maslick/koder

• https://qr.maslick.tech