Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

Daichi

October 16, 2019
Tweet

More Decks by Daichi

Other Decks in Technology

Transcript

  1. 2019.10.16 @ PWA Night vol.9

    株式会社TAM 菅家大地

    Webの技術だけで作る

    QRコードリーダー


    View Slide

  2. 株式会社TAM フロントエンドエンジニア

    菅家 大地 / Daichi Kanke
    元デザイナーのフロントエンドエンジニア

    福島→宮城→東京→宮城(New!)

    PWA Night / 仙台フロントエンドUG /v-sendai

    Vue.js / Nuxt.js / PWA / Monaca 

    daichi.kanke
    @kan_dai

    View Slide

  3. 作ったもの紹介


    View Slide

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

    View Slide

  5. やってること
    JavaScriptで

    デバイスの

    カメラにアクセス


    Canvasを

    使って画像にする

    画像の中にQRコードが

    含まれているか解析

    (ライブラリ)


    View Slide

  6. https://developer.mozilla.org/ja/docs/Web/API/MediaDevices/getUserMedia

    View Slide

  7. View Slide

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

    View Slide

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

    View Slide

  10. View Slide

  11. iOSではSafari以外のブラウザでは使用できない
    ● ホーム画面に追加した状態のPWAアプリでも使用できない
    ● AndroidはChrome・Firefox・PWAもOK
    ● 使えないブラウザに対してはHTML Media Capture を使ってフォール
    バックを行うなどができる

    View Slide

  12. HTML Media Capture ?
    input type=”file” から
    直接端末のカメラを
    起動できるようになる

    View Slide

  13. Canvasを使って画像にする

    View Slide

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

    View Slide

  15. QRコード取得処理 (0.2秒おきに実行)

    View Slide

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

    View Slide

  17. 実際の案件での活用事例
    掲載施設に

    チェックインできる

    会員サイト

    施設情報のページから

    シームレスに

    QRリーダーを起動


    View Slide

  18. まとめ
    ● QRコードリーダーはWeb技術だけで作れる
    ● HTML / CSS / JSでカスタマイズできる
    ● Web技術でできることがドンドン広がっている

    View Slide


  19. ご静聴ありがとうございました


    View Slide