仕事でAndroid端末を触っている際、QRコードを読む必要に迫られる事があります。
そのたびにPlay Storeからアプリをダウンロードしていたのですが、正直面倒くさいなあと思っていました。

ふと、そんなことを思い出し「javascript QRコード 読み取り」で検索したところ、アプリをインストールしないでもQRコードの読み取りができるとのことでした。 便利な世の中ですね。もっと早く調べればよかった。😂

今回はその中でも以下の記事をなぞってQRコードリーダーを作ってみたいと思います。
https://qiita.com/diggy-mo/items/5caf1fcf157fc29e9451

上記の記事ではvueを使ってるようですが、私としてはQRコードが読めれば良いだけなので、余計なコードは省き、必要な処理だけ抜き出します。

<html>
  <head>
    <script src="./jsQR.js"></script>
  </head>
  <body>
    <div id="result">
      <video></video>
    </div>
    <script>
      const constraints = { audio: false, video: { facingMode: 'environment', width: 500, height: 500 }};
  
      navigator.mediaDevices.getUserMedia(constraints).then((stream) => {
        const video = document.querySelector('video');
        video.srcObject = stream;
        video.play();
  
        const w = constraints.video.width, h = constraints.video.height;
        const canvas = document.createElement('canvas');
        canvas.width = w;
        canvas.height = h;
        const context = canvas.getContext('2d');
  
        const timer = setInterval(() => {
          context.drawImage(video, 0, 0, w, h);
          const imageData = context.getImageData(0, 0, w, h);
          const code = jsQR(imageData.data, imageData.width, imageData.height);
          if (code) {
            clearInterval(timer);
            document.querySelector('#result').textContent = code.data;
          }
        }, 500);
      }).catch((e) => {
        console.log('load error', e);
      });
    </script>
  </body>
</html>

たったこれだけでとりあえずQRコードが読めることが分かりました。すごい。
httpsじゃないとmediaDevicesにアクセスできなかったりしますが、それ以外は特にハマらずに出来ちゃいました。

以下にサンプル置いておきますね。

https://content.yosiopp.net/app/qr/