【JavaScript】instascan.jsを使って、QRコードリーダーを作ってみた。

ブラウザでQRデコードをしたいとき、HTML5とJavaScriptで実装できる。
ビデオタグに埋め込めるので、ビューもある程度制御できる。

HTML

<video id="preview" ></video>

JavaScript

JSライブラリはこちらからいただきました。

github.com

<script>
  var videoTag = document.getElementById('preview');
  // mirror: trueにしておくことで、ビューが反転しない。
  var scanner = new Instascan.Scanner({ video: videoTag , mirror: true});
  const input_text = document.getElementById("input");
  
  scanner.addListener('scan', function (value) {
    input_text.value = value;
  });
  

  Instascan.Camera.getCameras()
  .then(function (cameras) {
      
      if (cameras.length > 0) {
        // cameras[0]は前面カメラ、cameras[1]は背面カメラ
        scanner.start(cameras[0]);
      }
      else {
        alert('カメラが見つかりません！');
      }
  })
  .catch(function(err) {
    alert(err);
  });
 
  
</script>

以下サンプルサイト

8drill.site