virtualiment

Instascan.jsを使ってWebサイトからカメラでQRコードを読み取ってSlackに通知するための手順

公開日：2018/07/05 更新日：2018/07/05
javascript
Instascan.jsを使ってWebサイトからカメラでQRコードを読み取ってSlackに通知するための手順のサムネイル

はじめに

最近は色々なライブラリが公開されて使えるようになり、QRコードの読み取りも簡単にできるようになりました。ここではWebサイトから自身のPCのカメラを使ってそのカメラにかざされたQRコードを読み取って、読み取った内容をSlackに通知するところまでの手順をメモします。 具体的には、自分のパソコンのローカル環境にWordPressを構築し、そのWordPressで必要なJavascriptを読み込むだけで実現できます。非常に簡単で驚きました。今回はInstascan.jsというJavascriptライブラリを使用しました。

できるようになること

自身のPCのカメラにQRコードをかざすと、カメラがその内容を読み取ってブラウザのコンソールツールにQRコードの内容を表示します。 なお、以下のGIF画像では、SlackにもQRコードの内容を指定したチャネルに通知しています。

qrcode_test_1024.gif

前提と想定

WordPressである必要は全くないですが、今回はWordPressで構築したWebサイトを使いました。

OS Windows10
QRコードを読み取るためのWebサイト ローカルで動いているデフォルトのままのWordPress
QRコード読み取りに使用するJavascriptライブラリ Instascan.js （schmich/instascan: HTML5 QR code scanner using your webcam - GitHub）
ただし、ここで使用したInstascan.jsというライブラリは、いずれ非推奨となるgetUserMedia()を使用しています。当面は動作しますが、将来的にはこちらのライブラリが更新されるのを待つか、もしくは違うライブラリへの切り替えが必要となると思います。私の場合は完全に趣味の範囲の使用のため手っ取り早いInstascan.jsを使用しました。実際、非常に簡単に使うことができました。

Instascan.jsのダウンロード

WebブラウザのカメラからQRコードを読み取り、そのQRコードに含まれる情報を取得してくれるJavascriptのライブラリがInstascan.js（schmich/instascan: HTML5 QR code scanner using your webcam - GitHub）です。

公式サイトの指示通りにinstascan.min.jsを以下のリリースページからダウンロードします。 Releases · schmich/instascan · GitHub

あとはinstascan.min.jsを自分のWebサイトのJavascriptのコードを置いているフォルダに置きます。

そして自身のWebサイトのヘッダー部分の直前でinstascan.min.jsを読み込みます。例えばWordPressサイトだと以下のように<?php wp_head(); >の後になると思います。

<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="profile" href="https://gmpg.org/xfn/11">

<?php wp_head(); ?>
<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/assets/js/instascan.min.js"></script>
</head>

あとはInstascan.jsの公式サイトに掲載されているサンプルコードをやタグの直前に設置します。

<body>
    <video id="preview"></video>
    <script type="text/javascript">
      let scanner = new Instascan.Scanner({ video: document.getElementById('preview') });
      scanner.addListener('scan', function (content) {
        console.log(content);
      });
      Instascan.Camera.getCameras().then(function (cameras) {
        if (cameras.length > 0) {
          scanner.start(cameras[0]);
        } else {
          console.error('No cameras found.');
        }
      }).catch(function (e) {
        console.error(e);
      });
    </script>
   </body>

上記のうち、以下の

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

がWebカメラが捉えている映像を表示するエリアになります。

これだけでQRコードの読み取りが可能になります。試しに、上記のコードを設置したページにアクセスしてみると、以下のようにカメラの使用許可要求が出ると思います。もし以前にビデオチャットを使用した時に許可した場合は、この要求は出ません。

ask-permit.png

なお、内蔵カメラ（Integrated Camera）以外のカメラを接続済でそちらを使用したい場合は、以下のようにプルダウンメニューから選択します。

choose-camera.png

カメラが起動し、カメラにQRコードをかざすと、以下の画像のようにインスペクターツールのコンソールに読み取り結果が表示されます。以下は、test messageというQRコードを読み取った結果になります。任意の文字列を含むQRコードの作成方法については後述しています。

qrcode-display-console-1024x925.png

なお、このインスペクターツールは、FirefoxやGoogle Chromeなどほとんどのブラウザに標準で搭載されています。Firefoxの場合は以下のようにWebページ上で右クリックして「要素の調査」をクリックして起動できます。他のブラウザも同様に右クリックに同じような名前のメニューがあります。

start-inspector.png

インスペクターツールの中にいくつかタブがありますが、コンソールは以下のようにインスペクタという名前の多分隣にあります。

console-1024x310.png

読み取ったQRコードの内容をSlackに通知する

あとは読み取った内容をSlackに通知するためのコードを追加すれば目的の動作になります。以下のコードが最終形です。

<script type="text/javascript">
      let scanner = new Instascan.Scanner({ video: document.getElementById('preview'), refractoryPeriod: 2000 });
      scanner.addListener('scan', function (content) {
        console.log(content); // インスペクターツールのconsoleに表示

                // postSlack関数でSlackに投稿
        postSlack(content).done(function(result) {
            // console.log("ok" + JSON.stringify(result));
        }).fail(function(result) {
            // console.log("error" + JSON.stringify(result));
        });

      });

     function postSlack(mes){
         var url = 'https://slack.com/api/chat.postMessage';
         var data = {
                  token: 'xoxb-23985325l2p945j;er;m;mth', // トークン
                      channel: '#qrcode', // チャネル名
                          username: 'qr-bot', // ボット名
                  text: timestamp() + "-" + mes // 投稿内容
             };

              return jQuery.ajax({
                    type: 'GET',
                    url: url,
                    data: data
            });
    }
        
    function timestamp(){
         var d = new Date();
         var year  = d.getFullYear();
         var month = d.getMonth() + 1;
         var day  = d.getDate();
         var hour = ( '0' + d.getHours() ).slice(-2);
         var min  = ( '0' + d.getMinutes() ).slice(-2);
         var sec   = ( '0' + d.getSeconds() ).slice(-2);
        return( year + '-' + month + '-' + day + ' ' + hour + ':' + min + ':' + sec );
    }
      Instascan.Camera.getCameras().then(function (cameras) {
            if (cameras.length > 0) {
            scanner.start(cameras[0]);
            } else {
            console.error('No cameras found.');
            }
      }).catch(function (e) {
        console.error(e);
      });
    </script>

任意の文字列を含むQRコードの作成方法

ちなみに、任意の文字列を含むQRコードを作成するには、QRコードを生成してくるWebサービスを使うのが便利です。QRコード作成サービスは色々ありますが、ここではGoogle Chart APIを使用しました。 なお、Google Chart APIの使い方は以下のサイトにわかりやすく詳しく書かれているためそちらを参照して頂ければと思います。 QRコードをGoogle Chart APIで作成して表示する方法 - AllAbout

使い方は簡単で、以下のようにGoogle Chart APIのURLにQRコードのサイズや含めたい情報をくっつけるだけです。

https://chart.apis.google.com/chart?cht=qr&chs=[QRコードのサイズ]&chl=[QRコードに含める情報]

（例）
https://chart.apis.google.com/chart?cht=qr&chs=150x150&chl=https://virment.com/

まとめ

非常に簡単にWebカメラや内蔵カメラをQRコードスキャナーとして使えるようになりました。QRコード自体がかなり色々な応用ができる上、例えば読み取ったQRコードの情報をJavascriptからSlackに通知したりメール送信したりすることもできます。これを使えば、例えば社員証や学生証などにQRコードを印刷し、それを読み取って認証するようなシステムも簡単に作れそうです。

関連記事

開発アプリ

nanolog.app
nanolog

毎日の小さな出来事をなんでも記録して、ログとして残すためのライフログアプリです。