Scan barcode in HTML5 / JavaScript

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

Here is a link I found initially that looks as if it could do the job if I could use the Intel XDK. Let me know what I can add to this question, to be more clear, I just need to point in the right direction, because I do not know where to start or how to actually scan, as soon as I turned to the camera. Here is the code that I use to access and display the device’s 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>
+3
source share
1 answer

In most cases, barcode scanners act like a keyboard - they "type" the result. You capture it either when listening to keypress events, or when listening to changes in the input field.

, -, .

+1

All Articles