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

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


Javascriptでカメラ映像からjsQRを使用してQRコード読む(QRコードをスキャンする)
Chrome,Android Chrome,iPhone(Safari)に対応

カメラ映像から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.2, maximum-scale=4,user-scalable=yes">
<!-- jsQR.jsの読み込み -->
<script src="./dist/jsQR.js"></script>
<script>
  var video,tmp,tmp_ctx,qr,prev,prev_ctx,w,h,m,x1,y1;
  window.addEventListener("load",function(){
    video=document.createElement('video');
    video.setAttribute("autoplay","");
    video.setAttribute("muted","");
    video.setAttribute("playsinline","");
    video.onloadedmetadata = function(e){video.play();};
    prev=document.getElementById("preview");
    prev_ctx=prev.getContext("2d");
    tmp = document.createElement('canvas');
    tmp_ctx = tmp.getContext("2d");

    qr = document.getElementById("qr");
    //カメラ使用の許可ダイアログが表示される
    navigator.mediaDevices.getUserMedia(
      //マイクはオフ, カメラの設定   できれば背面カメラ    できれば640×480
      {"audio":false,"video":{"facingMode":"environment","width":{"ideal":640},"height":{"ideal":480}}}
    ).then( //許可された場合
      function(stream){
        video.srcObject = stream;
        //0.5秒後にスキャンする
        setTimeout(Scan,500);
      }
    ).catch( //許可されなかった場合
      function(err){qr.innerHTML=qr.innerHTML+err+'\n';}
    );
  });
  function Scan(){
    //選択された幅高さ
    w=video.videoWidth;
    h=video.videoHeight;
    //画面上の表示サイズ
    prev.style.width=(w/2)+"px";
    prev.style.height=(h/2)+"px";
    //内部のサイズ
    prev.setAttribute("width",w);
    prev.setAttribute("height",h);
    if(w>h){m=h*0.5;}else{m=w*0.5;}
    x1=(w-m)/2;
    y1=(h-m)/2;
    prev_ctx.drawImage(video,0,0,w,h);
    prev_ctx.beginPath();
    prev_ctx.strokeStyle="rgb(255,0,0)";
    prev_ctx.lineWidth=2;
    prev_ctx.rect(x1,y1,m,m);
    prev_ctx.stroke();
    tmp.setAttribute("width",m);
    tmp.setAttribute("height",m);
    tmp_ctx.drawImage(prev,x1,y1,m,m,0,0,m,m);
    let imageData = tmp_ctx.getImageData(0,0,m,m);
    let scanResult = jsQR(imageData.data,m,m);
    if(scanResult){
      //QRコードをスキャンした結果を出力
      qr.value=qr.value+scanResult.data+'\n';
      qr.scrollTop = qr.scrollHeight;
    }
    setTimeout(Scan,200);
  }
</script>
</head>
<body>
  <p>ピントを合わせて、QRコードをカメラ映像の赤枠内にあわせると読み取ります</p>
  <div><canvas id="preview"></canvas></div>
  <textarea id="qr" rows="8" cols="40"></textarea>
</body>
</html>




Mam's WebSite