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

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

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

1. QRコードを生成する

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

使用ライブラリ

使用方法

HTML


js


 

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

2. QRコードを読み込む

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

使用ライブラリ

使用方法

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

HTML


js


 

3. バックエンドの作成

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

使用ライブラリ

4. 仕上げ

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