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

2c53966a0119dc87486c906e34391b28?s=47 Daichi
October 16, 2019

 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

2c53966a0119dc87486c906e34391b28?s=128

Daichi

October 16, 2019
Tweet

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

  7. None
  8. リアカメラを 使用する

  9. https://caniuse.com/#search=getusermedia

  10. None
  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. 
 ご静聴ありがとうございました