【無料】JavaScriptでQRコードリーダーを作る方法（Webカメラ対応）

JavaScriptでQRコードリーダーを実装【jsQRで簡単導入】

JavaScriptのjsQRライブラリを使って、カメラ映像からリアルタイムにQRコードを読み取る方法を紹介します。
Chrome、Android Chrome、iPhone Safari などの主要ブラウザでスムーズに動作し簡単に実装できます。

カメラを使ってQRコードをスキャンする方法

カメラ使用を許可すると、しばらくして映像が表示されます。
多少離れていてもピントを合わせることで、赤枠内にQRコードを配置すればスムーズに読み取れます。

左右反転表示

JavaScriptでQRコードリーダーを作るためのライブラリとソースコード

QRコードを読み取るためにjsQRライブラリを使用します。
以下の手順で導入できます：

GitHub から右上の「Code」⇒「Download ZIP」をクリックし jsQR-master.zip をダウンロード
ZIPファイルを解凍し、「dist」フォルダをWEBサーバー上に配置（他のファイルは不要）
HTMLファイルに以下のスクリプトタグを追加し、ライブラリを読み込む
<script src="./dist/jsQR.js"></script>

<!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">
<!-- 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", {willReadFrequently:true});
    tmp = document.createElement('canvas');
    tmp_ctx = tmp.getContext("2d", {willReadFrequently:true});

    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>