jsでQRコードを読み取り、簡易出席管理システムを作る

WEB制作
jsでQRコードを読み取り、簡易出席管理システムを作る

今回は、WEBカメラを使ってQRコードを読み込み、その結果を利用して簡易出席管理システムを作成したいと思います。

目次

1. QRコードを生成する

まず初めに、カメラで読み込むためのQRコードを作成していきます。Google Chart APIなどのAPIを活用するもの手ですが、今回は、jsでQRコードの生成を行います。

使用ライブラリ

使用方法

HTML

<div id="qrcode"></div>

js

jquery('#qrcode').qrcode({width: 64, height: 64, text: "userID"});

 

今回は、QRコードの中身をユーザーIDにします。

2. QRコードを読み込む

次にカメラでQRコードを読み込む準備をします。

使用ライブラリ

使用方法

※ WEBカメラを使用するにはSSL接続が必要です。

HTML

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

js

let scanner = new Instascan.Scanner({ video: document.getElementById('video') }); // 映像の出力先を指定
scanner.addListener('scan', function (content) {
alert(content); // 読み込み後の処理
});
Instascan.Camera.getCameras().then(function (cameras) {
if (cameras.length > 0) {
scanner.start(cameras[0]); // 0番目のカメラを指定
} else {
alert('カメラが見つかりませんでした');
}
}).catch(function (e) {
console.error(e);
alert('カメラの起動に失敗しました');
});

 

3. バックエンドの作成

管理画面では、集計結果をグラフィカルにするために安定のChart.jsを使用しました。

使用ライブラリ

4. 仕上げ

bootstrapなどで装飾したり、CSRF対策などを簡単に行って完成です。カメラの映像をフルスクリーンで表示するとスマホアプリのような見た目になります。