無精・短気・傲慢

perlの事 いろいろ

ブラウザでQRコードを読み取る

ブラウザでQRコードを読み取る

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

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

ソース

サンプル

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="robots" content="none">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
<title>jsQRによるブラウザのQRコード読み込み</title>
<style>
body {
  max-width: 800px;
  margin: auto;
  padding: 1rem;
  font-size: 14px;
  text-align: center;
}
</style>
</head>
<body>
<h1>jsQRによるブラウザの<br>QRコード読み込みサンプル</h1>
<p>QRコードをカメラで読み込むとアクセスできます。</p>
<div id="loading">ブラウザのカメラの使用を許可してください。</div>
<div id="message">QRコードを読み込んで下さい。</div>
<canvas id="canvas" hidden></canvas>
<script src="https://cdn.jsdelivr.net/npm/jsqr@1.4.0/dist/jsQR.min.js"></script>
<script>
const video = document.createElement('video');
const canvasElement = document.getElementById('canvas');
const canvas = canvasElement.getContext('2d');
const loading = document.getElementById('loading');
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.textContent = 'ロード中...';
  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) {
        isReadQR = true;
        document.getElementById('message').innerHTML = code.data;
    }
  }
  if(!isReadQR){
    requestAnimationFrame(tick);
  }else{
    setTimeout(function() {
          location.href = code.data;
      },1000);
  }
}
</script>
</body>
</html>