muttley91 muttley91 - 1 year ago 152
Javascript Question

Scan Barcode in HTML5/JavaScript

I'm looking for a way to scan for a barcode and return a response based on whether it received the barcode or not. The only results I can find point to the Intel XDK. I can't use that for this particular project, so it is possible to do it without it? How do I scan for a barcode with HTML5/JavaScript?

Here is the link I found originally, which looks like it could do the job if I was able to use the Intel XDK. Let me know what I can add to this question to be more clear, I just need to be pointed in the right direction as I don't know where to begin or how to actually scan once I've accessed the camera. Here's the code I'm using to access and show the device camera:

<!DOCTYPE html>
<meta charset="utf-8">
<meta content="stuff, to, help, search, engines, not" name="keywords">
<meta content="What this page is about." name="description">
<meta content="Display Webcam Stream" name="title">
<title>Display Webcam Stream</title>

#container {
margin: 0px auto;
width: 500px;
height: 375px;
border: 10px #333 solid;
#videoElement {
width: 500px;
height: 375px;
background-color: #666;

<div id="container">
<video autoplay="true" id="videoElement" controls="true">

var video = document.querySelector("#videoElement");

navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia || navigator.oGetUserMedia;

if (navigator.getUserMedia)
navigator.getUserMedia({video: true}, handleVideo, videoError);

function handleVideo(stream)
video.src = window.URL.createObjectURL(stream);

function videoError(e)
alert("I don't understand. Why did you not allow it?");

Answer Source

Most of the time barcode scanners act like a keyboard - they "type" the result. You capture it by either listening to keypress events, or by listening to changes in an input field.

More information on the particular technology used to capture the barcode would be required to answer this question in more detail.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download