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

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

Javascriptでカメラ映像からjsQRを使用してQRコード読む(QRコードをスキャンする)

カメラ映像からQRコードスキャンの実行中



jsQRをダウンロードする

https://github.com/cozmo/jsQR
から右上の「Code」ボタンを押し、「Download ZIP」ボタンを押して、jsQR-master.zipをダウンロードし解凍します。。
ファイルを解凍した「dist」フォルダのみが必要なので、WEBサーバー上に配置等します。

ソースコード

<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=0.1, maximum-scale=4,user-scalable=yes">
<!-- jsQR.jsの読み込み -->
<script src="./dist/jsQR.js"></script>
<script>
  var camera_image,tmp_canvas,tmp_canvas_ctx,qr,cw=240,ch=180;
  window.addEventListener("load",function(){
    camera_image = document.getElementById('camera_image');
    qr = document.getElementById("qr");
    //カメラ使用の許可ダイアログが表示される
    navigator.mediaDevices.getUserMedia(
      //マイクはオフ,   カメラの設定     背面カメラを使用する
      {"audio":false,"video":{"facingMode":"environment","width":{"ideal":cw},"height":{"ideal":ch}}}
    ).then( //許可された場合
      function(stream){
        tmp_canvas = document.createElement('canvas');
        tmp_canvas.setAttribute("width",cw);
        tmp_canvas.setAttribute("height",ch);
        tmp_canvas_ctx = tmp_canvas.getContext("2d");
        camera_image.srcObject = stream;
        setInterval(IntervalScan,1000);
      }
    ).catch( //許可されなかった場合
      function(err){qr.innerHTML=qr.innerHTML+err+'\n';}
    );
  });
  function IntervalScan(){
    tmp_canvas_ctx.drawImage(camera_image, 0,0,cw,ch);
    const imageData = tmp_canvas_ctx.getImageData(0,0,cw,ch);
    const scanResult = jsQR(imageData.data,cw,ch);
    if(scanResult){
      //QRコードをスキャンした結果を出力
      qr.innerHTML=qr.innerHTML+scanResult.data+'\n';
    }
  }
</script>
</head>
<body>
  <video id="camera_image" autoplay muted playsinline></video><br>
  <textarea id="qr" rows="8" cols="40"></textarea>
</body>
</html>




Mam's WebSite