1分でできるjsQRによるブラウザのQRコード読み込みアクセス

jsQRとは
jsQRをインストール
jsQRで読み込んでアクセスするコード

jsQRとは

ブラウザからカメラを起動してQRコードを読み込めるようにするJavaScriptライブラリ。

スマートフォンの場合、最新のOSであればカメラにQRコード読み取り機能があるが、古いOSだとアプリを別途インストールする必要がある。

しかし、QRコード読み取りアプリをインストールさせずにブラウザからカメラを起動してQRコードを読み取らせて画面遷移させたい場合もあるので、この記事ではその方法について書きました。

jsQRをインストール

npmの場合は以下のコマンドでインストールする。

npm i -D jsqr

インストールしたらES6 importかCommonJS requireで読み込んで使用する。

// ES6 import
import jsQR from "jsqr";
 
// CommonJS require
const jsQR = require("jsqr");
 
jsQR(...);

npmを使用せずにcdnから読み込んで使用する場合はHTML内に以下のように記述して読み込む。

<script src="https://cdn.jsdelivr.net/npm/jsqr@1.4.0/dist/jsQR.min.js"></script>
<script>
jsQR(...);
</script>

jsQRで読み込んでアクセスするコード

完成形のjsQRで読み込んでアクセスするコードは以下の通り。

まずnavigator.mediaDevices.getUserMedia()でメディア入力を使用する許可をユーザーに求めます。

そしてカメラが使用可能であればQRを読み込むためのcanvasを描画して、jsQRでURLを取得してlocation.hrefでアクセスするだけです。

const video = document.createElement('video');
const canvasElement = document.getElementById('canvas');
const canvas = canvasElement.getContext('2d');
const loading = document.getElementById('loading');
const output = document.getElementById('output');
let isReadQR = false;
 
navigator.mediaDevices.getUserMedia({ video: { facingMode: 'environment' } })
  .then((stream) => {
    video.srcObject = stream;
    video.setAttribute('playsinline', true);
    video.play();
    requestAnimationFrame(tick);
  });
 
function tick() {
  loading.innerText = 'ロード中...';
  if (video.readyState === video.HAVE_ENOUGH_DATA) {
    loading.hidden = true;
    canvasElement.hidden = false;
    canvasElement.height = video.videoHeight;
    canvasElement.width = video.videoWidth;
    canvas.drawImage(video, 0, 0, canvasElement.width, canvasElement.height);
    var imageData = canvas.getImageData(0, 0, canvasElement.width, canvasElement.height);
    var code = jsQR(imageData.data, imageData.width, imageData.height, {
      inversionAttempts: 'dontInvert',
    });
    if (code && !isReadQR) {
      location.href = code.data;
      isReadQR = true;
    }
  }
  requestAnimationFrame(tick);
}