Web技術だけで作るQRコードリーダー

2019年10月16日に行われたPWA Night vol.9で使用したスライドです。

スライド内のリンク

Simple QR Reader
https://simple-qr.netlify.com/

MediaDevices.getUserMedia() - Web API | MDN
https://developer.mozilla.org/ja/docs/Web/API/MediaDevices/getUserMedia

Can I use
https://caniuse.com/#search=getusermedia

cozmo/jsQR
https://github.com/cozmo/jsQR

KanDai/simple-qr-reader
https://github.com/KanDai/simple-qr-reader

Transcript

1. 2019.10.16 @ PWA Night vol.9
 株式会社TAM 菅家大地
 Webの技術だけで作る
 QRコードリーダー

2. 株式会社TAM フロントエンドエンジニア
 菅家 大地 / Daichi Kanke 元デザイナーのフロントエンドエンジニア
 福島→宮城→東京→宮城(New!)
 PWA Night / 仙台フロントエンドUG /v-sendai
 Vue.js / Nuxt.js / PWA / Monaca 
 daichi.kanke @kan_dai
3. 作ったもの紹介

4. https://simple-qr.netlify.com/ Simple QR Reader
5. やってること JavaScriptで
 デバイスの
 カメラにアクセス
 
 Canvasを
 使って画像にする
 画像の中にQRコードが
 含まれているか解析
 (ライブラリ)

6. https://developer.mozilla.org/ja/docs/Web/API/MediaDevices/getUserMedia
8. リアカメラを 使用する
9. https://caniuse.com/#search=getusermedia
11. iOSではSafari以外のブラウザでは使用できない • ホーム画面に追加した状態のPWAアプリでも使用できない • AndroidはChrome・Firefox・PWAもOK • 使えないブラウザに対してはHTML Media Capture を使ってフォール バックを行うなどができる
12. HTML Media Capture ? input type=”file” から 直接端末のカメラを 起動できるようになる
13. Canvasを使って画像にする
14. https://github.com/cozmo/jsQR
15. QRコード取得処理 (0.2秒おきに実行)
16. https://github.com/KanDai/simple-qr-reader
17. 実際の案件での活用事例 掲載施設に
 チェックインできる
 会員サイト
 施設情報のページから
 シームレスに
 QRリーダーを起動

18. まとめ • QRコードリーダーはWeb技術だけで作れる • HTML / CSS / JSでカスタマイズできる • Web技術でできることがドンドン広がっている
19. 
 ご静聴ありがとうございました