javascriptでカメラ映像からJANコードをスキャン

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>




Mam's WebSite