Scan Barcode in HTML5/JavaScript

Question

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>
<html>
<head>
<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>

<style>
#container {
    margin: 0px auto;
    width: 500px;
    height: 375px;
    border: 10px #333 solid;
}
#videoElement {
    width: 500px;
    height: 375px;
    background-color: #666;
}
</style>
</head>

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

    </video>
</div>
<script>
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?");
}
</script>
</body>
</html>

I think I saw this question half an hour ago too but can't find it any more. Did you redo your question? — Patrick Hofman
– Patrick Hofman, Commented Feb 14, 2014 at 20:25

Diodeus - James MacFarlane · Accepted Answer · 2014-02-14 20:28:13Z

1

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.

answered Feb 14, 2014 at 20:28

Diodeus - James MacFarlane

115k33 gold badges164 silver badges180 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

muttley91 Over a year ago

We'll probably be looking at a smartphone of some sort. Let's say an iPhone for now. It just has to be an HTML5 app (native app is obviously a much different case) of some sort, so I'm looking at how it can be done.

Diodeus - James MacFarlane Over a year ago

It sounds like you want to decode a barcode from an image taken by a camera. Unless you know how to decode a barcode from an image, you're out of luck. Image processing is a speciality of its own and is usually outside of the domain of what's available in JavaScript.

muttley91 Over a year ago

Yeah I was able to do it in a native application for iPhone. I was just asked to use HTML5. I'll have to propose the native solution. Thanks.

Diodeus - James MacFarlane Over a year ago

Your native app probably has a handy library for the image processing, which you are unlikely to find for JavaScript.

muttley91 Over a year ago

Yeah there's a library. I guess I was looking for whether or not the same thing exists in JS.

Collectives™ on Stack Overflow

Scan Barcode in HTML5/JavaScript

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related