Javascriptでカメラ映像からJANコードをスキャン
Javascriptでカメラ映像からquaggaJSを使用してJANコードを読む(バーコードを読み取る)
カメラ映像からJANコードスキャンの実行中
quaggaJSをダウンロードする
https://serratus.github.io/quaggaJS/の左側にある「Download ZIP File」からダウンロードし、解凍します。
ファイルを解凍した「dist\quagga.min.js」ファイルのみが必要なので、WEBサーバー等に配置します。
ソースコード
<script src="./js/quagga.min.js"></script> <script> var DetectedCount=0,DetectedCode=""; window.addEventListener('load',function(event){ Quagga.init({ inputStream:{ type : "LiveStream", target: document.querySelector('#CameraViewElement'), //カメラ映像表示のDIVエレメント constraints:{ width:320,height:240, facingMode:"environment", //なるべく背面カメラを使用する }, area:{top:"10%",right:"0%",left:"0%",bottom:"10%"}, singleChannel:false, //trueだと赤色のみ読み取り }, frequency:10,//1秒間に10回読む locator:{ //カメラを離す x-small small medium large x-large近づける patchSize: "medium", halfSample: false //trueだと縦横半分にリサイズした画像で解析 }, locate: true, numOfWorkers: 0, decoder : { //code_128_reader,ean_reader,ean_8_reader,code_39_reader,code_39_vin_reader, //codabar_reader,upc_reader,upc_e_reader,i2of5_reader,2of5_reader,code_93_reader から指定 readers: ["ean_reader","ean_8_reader"], multiple: false, //同時に複数のバーコードを解析しない }, },function(err){ if(err){ console.log(err); return; } Quagga.start(); }); Quagga.onDetected(function (result) { //読み取り誤差が大きいため、複数連続で同じ読み取りだった場合に成功とする if(DetectedCode==result.codeResult.code){ DetectedCount++; }else{ DetectedCount=0; DetectedCode=result.codeResult.code; } if(DetectedCount>3){ console.log(result.codeResult.code); let jan=document.getElementById("jan"); jan.innerHTML=jan.innerHTML+'\n'+result.codeResult.code; jan.scrollTop=jan.scrollHeight; DetectedCode=''; DetectedCount=0; } }); Quagga.onProcessed(function(result){ var drawingCtx = Quagga.canvas.ctx.overlay,drawingCanvas = Quagga.canvas.dom.overlay; if(result){ if(result.boxes){ drawingCtx.clearRect(0,0, parseInt(drawingCanvas.getAttribute("width")), parseInt(drawingCanvas.getAttribute("height")) ); result.boxes.filter(function(box){ return box !== result.box; }).forEach(function(box){ Quagga.ImageDebug.drawPath(box,{x:0,y:1},drawingCtx,{color:"green",lineWidth:2}); }); } if(result.box) { Quagga.ImageDebug.drawPath(result.box,{x:0, y:1},drawingCtx,{color:"#00F",lineWidth:2}); } if(result.codeResult && result.codeResult.code){ Quagga.ImageDebug.drawPath(result.line,{x:'x',y:'y'},drawingCtx,{color:'red',lineWidth:3}); } } }); }); </script> <style> div#CameraViewElement{ position:relative; width:320px; height:240px; } div#CameraViewElement>.imageBuffer{ position:absolute; top:0; left:0; } /* オーバーレイ */ div#CameraViewElement>.drawingBuffer{ position: absolute; top:0; left:0; } </style> <div id="CameraViewElement" style=""></div> <textarea id="jan" rows="8" cols="40"></textarea>