TerryMooreII · December 27, 2015 09:49
diff --git a/barcodesanner.js b/barcodesanner.js
 <!DOCTYPE html>
 <html><head>
    <title>Barcode recognition with JavaScript</title>
    <script type="text/javascript" src="get_barcode_from_image.js"></script>
  <style type="text/css"></style></head>
 <video id="video" width="320" height="240" autoplay></video>
 <button id="snap">Snap Photo</button>
 <canvas id="canvas" width="320" height="240"></canvas>
 <button onclick="alert(getBarcodeFromImage('canvas'))">Scan</button>

 <script>
 /*
 *    Copyright (c) 2010 Tobias Schneider
 *    This script is freely distributable under the terms of the MIT license.
 */
 
 (function(){
    var UPC_SET = {
        "3211": '0',
        "2221": '1',
        "2122": '2',
        "1411": '3',
        "1132": '4',
        "1231": '5',
        "1114": '6',
        "1312": '7',
        "1213": '8',
        "3112": '9'
    };
    
    getBarcodeFromImage = function(imgOrId){
        var doc = document,
            img = "object" == typeof imgOrId ? imgOrId : doc.getElementById(imgOrId),
            canvas = doc.createElement("canvas"),
            width = img.width,
            height = img.height,
            ctx = canvas.getContext("2d"),
            spoints = [1, 9, 2, 8, 3, 7, 4, 6, 5],
            numLines = spoints.length,
            slineStep = height / (numLines + 1),
            round = Math.round;
        canvas.width = width;
        canvas.height = height;
        ctx.drawImage(img, 0, 0);
        while(numLines--){
            console.log(spoints[numLines]);
            var pxLine = ctx.getImageData(0, slineStep * spoints[numLines], width, 2).data,
                sum = [],
                min = 0,
                max = 0;
            for(var row = 0; row < 2; row++){
                for(var col = 0; col < width; col++){
                    var i = ((row * width) + col) * 4,
                        g = ((pxLine[i] * 3) + (pxLine[i + 1] * 4) + (pxLine[i + 2] * 2)) / 9,
                        s = sum[col];
                    pxLine[i] = pxLine[i + 1] = pxLine[i + 2] = g;
                    sum[col] = g + (undefined == s ? 0 : s);
                }
            }
            for(var i = 0; i < width; i++){
                var s = sum[i] = sum[i] / 2;
                if(s < min){ min = s; }
                if(s > max){ max = s; }
            }
            var pivot = min + ((max - min) / 2),
                bmp = [];
            for(var col = 0; col < width; col++){
                var matches = 0;
                for(var row = 0; row < 2; row++){
                    if(pxLine[((row * width) + col) * 4] > pivot){ matches++; }
                }
                bmp.push(matches > 1);
            }
            var curr = bmp[0],
                count = 1,
                lines = [];
            for(var col = 0; col < width; col++){
                if(bmp[col] == curr){ count++; }
                else{
                    lines.push(count);
                    count = 1;
                    curr = bmp[col];
                }
            }
            var code = '',
                bar = ~~((lines[1] + lines[2] + lines[3]) / 3),
                u = UPC_SET;
            for(var i = 1, l = lines.length; i < l; i++){
                if(code.length < 6){ var group = lines.slice(i * 4, (i * 4) + 4); }
                else{ var group = lines.slice((i * 4 ) + 5, (i * 4) + 9); }
                var digits = [
                    round(group[0] / bar),
                    round(group[1] / bar),
                    round(group[2] / bar),
                    round(group[3] / bar)
                ];
                code += u[digits.join('')] || u[digits.reverse().join('')] || 'X';
                if(12 == code.length){ return code; break; }
            }
            if(-1 == code.indexOf('X')){ return code || false; }
        }
        return false;
    }
 })();
 // Put event listeners into place
 window.addEventListener("DOMContentLoaded", function() {
 	// Grab elements, create settings, etc.
 	var canvas = document.getElementById("canvas"),
 		context = canvas.getContext("2d"),
 		video = document.getElementById("video"),
 		videoObj = { "video": true },
 		errBack = function(error) {
 			console.log("Video capture error: ", error.code); 
 		};

 	// Put video listeners into place
 	if(navigator.getUserMedia) { // Standard
 		navigator.getUserMedia(videoObj, function(stream) {
 			video.src = stream;
 			video.play();
 		}, errBack);
 	} else if(navigator.webkitGetUserMedia) { // WebKit-prefixed
 		navigator.webkitGetUserMedia(videoObj, function(stream){
 			video.src = window.webkitURL.createObjectURL(stream);
 			video.play();
 		}, errBack);
 	}
  
  
  // Trigger photo take
 document.getElementById("snap").addEventListener("click", function() {
 	context.drawImage(video, 0, 0, 320, 240);
 });
  
  
  var code = [];
  var run =  setInterval(function(){
    context.drawImage(video, 0, 0, 320, 240);
    console.log(getBarcodeFromImage('canvas'));
    var displayCode = getBarcodeFromImage('canvas');
    var c = code.slice('');
    for (var i=0; i < c.length; i++){
      if (c[i] !== 'X')
        code[i] = c[i];
    }
     if (code.length === 12){
     
      console.log('UPC: ' + code.join(''));
    }  
 }, 100)
   //clearInterval(run);
   
 }, false);


 </script>

 </body></html>
	<!DOCTYPE html>
	<html><head>
	<title>Barcode recognition with JavaScript</title>
	<script type="text/javascript" src="get_barcode_from_image.js"></script>
	<style type="text/css"></style></head>
	<video id="video" width="320" height="240" autoplay></video>
	<button id="snap">Snap Photo</button>
	<canvas id="canvas" width="320" height="240"></canvas>
	<button onclick="alert(getBarcodeFromImage('canvas'))">Scan</button>

	<script>
	/*
	* Copyright (c) 2010 Tobias Schneider
	* This script is freely distributable under the terms of the MIT license.
	*/

	(function(){
	var UPC_SET = {
	"3211": '0',
	"2221": '1',
	"2122": '2',
	"1411": '3',
	"1132": '4',
	"1231": '5',
	"1114": '6',
	"1312": '7',
	"1213": '8',
	"3112": '9'
	};

	getBarcodeFromImage = function(imgOrId){
	var doc = document,
	img = "object" == typeof imgOrId ? imgOrId : doc.getElementById(imgOrId),
	canvas = doc.createElement("canvas"),
	width = img.width,
	height = img.height,
	ctx = canvas.getContext("2d"),
	spoints = [1, 9, 2, 8, 3, 7, 4, 6, 5],
	numLines = spoints.length,
	slineStep = height / (numLines + 1),
	round = Math.round;
	canvas.width = width;
	canvas.height = height;
	ctx.drawImage(img, 0, 0);
	while(numLines--){
	console.log(spoints[numLines]);
	var pxLine = ctx.getImageData(0, slineStep * spoints[numLines], width, 2).data,
	sum = [],
	min = 0,
	max = 0;
	for(var row = 0; row < 2; row++){
	for(var col = 0; col < width; col++){
	var i = ((row * width) + col) * 4,
	g = ((pxLine[i] * 3) + (pxLine[i + 1] * 4) + (pxLine[i + 2] * 2)) / 9,
	s = sum[col];
	pxLine[i] = pxLine[i + 1] = pxLine[i + 2] = g;
	sum[col] = g + (undefined == s ? 0 : s);
	}
	}
	for(var i = 0; i < width; i++){
	var s = sum[i] = sum[i] / 2;
	if(s < min){ min = s; }
	if(s > max){ max = s; }
	}
	var pivot = min + ((max - min) / 2),
	bmp = [];
	for(var col = 0; col < width; col++){
	var matches = 0;
	for(var row = 0; row < 2; row++){
	if(pxLine[((row * width) + col) * 4] > pivot){ matches++; }
	}
	bmp.push(matches > 1);
	}
	var curr = bmp[0],
	count = 1,
	lines = [];
	for(var col = 0; col < width; col++){
	if(bmp[col] == curr){ count++; }
	else{
	lines.push(count);
	count = 1;
	curr = bmp[col];
	}
	}
	var code = '',
	bar = ~~((lines[1] + lines[2] + lines[3]) / 3),
	u = UPC_SET;
	for(var i = 1, l = lines.length; i < l; i++){
	if(code.length < 6){ var group = lines.slice(i * 4, (i * 4) + 4); }
	else{ var group = lines.slice((i * 4 ) + 5, (i * 4) + 9); }
	var digits = [
	round(group[0] / bar),
	round(group[1] / bar),
	round(group[2] / bar),
	round(group[3] / bar)
	];
	code += u[digits.join('')] \|\| u[digits.reverse().join('')] \|\| 'X';
	if(12 == code.length){ return code; break; }
	}
	if(-1 == code.indexOf('X')){ return code \|\| false; }
	}
	return false;
	}
	})();
	// Put event listeners into place
	window.addEventListener("DOMContentLoaded", function() {
	// Grab elements, create settings, etc.
	var canvas = document.getElementById("canvas"),
	context = canvas.getContext("2d"),
	video = document.getElementById("video"),
	videoObj = { "video": true },
	errBack = function(error) {
	console.log("Video capture error: ", error.code);
	};

	// Put video listeners into place
	if(navigator.getUserMedia) { // Standard
	navigator.getUserMedia(videoObj, function(stream) {
	video.src = stream;
	video.play();
	}, errBack);
	} else if(navigator.webkitGetUserMedia) { // WebKit-prefixed
	navigator.webkitGetUserMedia(videoObj, function(stream){
	video.src = window.webkitURL.createObjectURL(stream);
	video.play();
	}, errBack);
	}


	// Trigger photo take
	document.getElementById("snap").addEventListener("click", function() {
	context.drawImage(video, 0, 0, 320, 240);
	});


	var code = [];
	var run = setInterval(function(){
	context.drawImage(video, 0, 0, 320, 240);
	console.log(getBarcodeFromImage('canvas'));
	var displayCode = getBarcodeFromImage('canvas');
	var c = code.slice('');
	for (var i=0; i < c.length; i++){
	if (c[i] !== 'X')
	code[i] = c[i];
	}
	if (code.length === 12){

	console.log('UPC: ' + code.join(''));
	}
	}, 100)
	//clearInterval(run);

	}, false);


	</script>

	</body></html>