barcode javascript phase 2

 get decderWorker here decoderworker

html 

<!DOCTYPE html>
<meta charset=utf-8>
<html lang="en">
<head>
<title>BarcodeReader</title>
</head>
<body>
<div id="container">
<video autoplay id="vid" width="480" height="320"></video><!--style="display:none;"-->
<canvas id="canvas" width="640" height="480" style="border:1px solid #d3d3d3;"></canvas><br>
<button onclick="snapshot()">Take Picture</button> <!--<button onclick="alert(getBarcodeFromImage('canvas'))">Scan</button>-->

<img width="320" height="240" src="about:blank" alt="" id="picture">
<p id="result"><p>
</div>
<input class="centered" type="button" onclick='$("#bcTarget3").barcode({code:"1234567890", crc:false}, "int25",{barWidth:2, barHeight:30});' value="&nbsp;&nbsp;&nbsp;int25 without crc&nbsp;&nbsp;&nbsp;">
<br />
<div id="bcTarget3">bcTarget3</div>
<br />
<input class="centered" type="button" onclick='$("#bcTarget2").barcode("1234567", "int25",{barWidth:2, barHeight:30});' value="&nbsp;&nbsp;&nbsp;int25&nbsp;&nbsp;&nbsp;">
<br />
<div id="bcTarget2">bcTarget2</div>
<br />
<p>id 2013100200001</p>
<input class="centered" type="button" onclick='$("#bcTarget").barcode("2013100200001", "ean13",{barWidth:2, barHeight:30});' value="&nbsp;&nbsp;&nbsp;ean13&nbsp;&nbsp;&nbsp;">
<br />
<div id="bcTarget">bcTarget</div>
<br />

<script type="text/javascript" src="http://barcode-coder.com/js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="http://barcode-coder.com/js/jquery-barcode-last.min.js"></script>
<script type="text/javascript">

</script>
<script type="text/javascript">

    var video = document.querySelector("#vid");
    var canvas = document.querySelector('#canvas');
    var ctx = canvas.getContext('2d');
    var localMediaStream = null;
    var Result = document.querySelector("#result");
    var onCameraFail = function (e) {
        console.log('Camera did not work.', e);
    };

    function snapshot() {
        if (localMediaStream) {
            ctx.drawImage(video,0,0,canvas.width,canvas.height);
      DecodeBar();
        }
    }

    navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
    window.URL = window.URL || window.webkitURL;
    navigator.getUserMedia({video:true}, function (stream) {
        video.src = window.URL.createObjectURL(stream);
        localMediaStream = stream;
    }, onCameraFail);

var resultArray = [];
    var workerCount = 0;
function receiveMessage(e) {
if(e.data.success === "log") {
console.log(e.data.result);
return;
}
workerCount--;
if(e.data.success){
var tempArray = e.data.result;
for(var i = 0; i < tempArray.length; i++) {
if(resultArray.indexOf(tempArray[i]) == -1) {
resultArray.push(tempArray[i]);
}
}
Result.innerHTML=resultArray.join("<br />");
}else{
if(resultArray.length === 0 && workerCount === 0) {
Result.innerHTML="Decoding failed.";
}
}
}
var DecodeWorker = new Worker("decoderWorker.js");
var RightWorker = new Worker("decoderWorker.js");
var LeftWorker = new Worker("decoderWorker.js");
var FlipWorker = new Worker("decoderWorker.js");
DecodeWorker.onmessage = receiveMessage;
RightWorker.onmessage = receiveMessage;
LeftWorker.onmessage = receiveMessage;
FlipWorker.onmessage = receiveMessage;
 
 function DecodeBar(){
resultArray = [];
workerCount = 4;
Result.innerHTML="";
DecodeWorker.postMessage({pixels: ctx.getImageData(0,0,canvas.width,canvas.height).data, cmd: "normal"});
RightWorker.postMessage({pixels: ctx.getImageData(0,0,canvas.width,canvas.height).data, cmd: "right"});
LeftWorker.postMessage({pixels: ctx.getImageData(0,0,canvas.width,canvas.height).data, cmd: "left"});
FlipWorker.postMessage({pixels: ctx.getImageData(0,0,canvas.width,canvas.height).data, cmd: "flip"});
}
</script>
</body>
</html>