無精・短気・傲慢

perlの事いろいろ

ブラウザでQRコードを書いたり読んだり

ブラウザだけでQRコードを読んだり書いたり出来ます。

QRコードを作成し表示する

jquery-qrcode.jsを使いQRコードを作成し表示する。

<script src="js/jquery-qrcode-0.18.0.min.js"></script>

<div id="qrcode"></div>
<script>
$('#qrcode').qrcode({width: 64, height: 64, text: "information"});
</script>

QRコードを読む

jsQR.jsを使いスマートホン等のカメラでQRコードを読み込む。

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

       <canvas id="canvas" hidden></canvas>
       <script>
           const video = document.createElement('video');
           const canvasElement = document.getElementById('canvas');
           const canvas = canvasElement.getContext('2d');
           const loading = document.getElementById('loading');
           let isReadQR = false;
       
           //QRコードを読む
           function qrRead() {
               isReadQR = false;
               navigator.mediaDevices.getUserMedia({ video: { facingMode: 'environment' } })
               .then((stream) => {
                   video.srcObject = stream;
                   video.setAttribute('playsinline', true);
                   video.play();
                   requestAnimationFrame(tick);
               });
           }
           
           function tick() {
             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;
               }
             }
             if(!isReadQR){
               requestAnimationFrame(tick);  //読み込めていない時は繰り返す
             }
           }
       </script>

qrcode.html

<html lang="ja">
   <head>
       <meta charset="UTF-8">
       <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
       <title>QRコード読んだり書いたり</title>
       <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
       <script src="js/jquery-qrcode-0.18.0.min.js"></script>
       <script src="https://cdn.jsdelivr.net/npm/jsqr@1.4.0/dist/jsQR.min.js"></script>
       <style>
       body {
         max-width: 800px;
         margin: auto;
         padding: 1rem;
         font-size: 14px;
         text-align: center;
       }
       </style>
   </head>
   <body>
       <textarea id=qrinput name=qrinput rows=5 cols=40></textarea>
       <br>
       <button id="qrON">QRコードを読む</button>
       <br><br>
       <div id="qrcode"></div>
       <div id="loading">ブラウザのカメラの使用を許可してください。</div>
       <br>
       <canvas id="canvas" hidden></canvas>
       <script>
           const video = document.createElement('video');
           const canvasElement = document.getElementById('canvas');
           const canvas = canvasElement.getContext('2d');
           const loading = document.getElementById('loading');
           let isReadQR = false;
       
           //QRコードを書く
           $('#qrcode').qrcode({width: 64, height: 64, text: "information"});
           $('#qrinput').on('blur',function(){     //フォーカスが外れた時に入力内容でQRコードを書く
               $('#qrcode').html('');
               $('#qrcode').qrcode({width: 64, height: 64, text: $('#qrinput').val()});
           });
           $('#qrON').on('click',function(){       //ボタンクリックにてQRコードリーダーを起動する
               qrRead();
           });
           //QRコードを読む
           function qrRead() {
               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;
                   $('#qrinput').val(code.data);       //読み込んだQRコードをtextareaにセットする
                   $('#qrinput').focus();
                   $('#qrinput').blur();
               }
             }
             if(!isReadQR){
               requestAnimationFrame(tick);
             }
           }
       </script>
   </body>
</html>