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

ブラウザの新しいAPIで遊んでみる

Daichi
April 15, 2020

 ブラウザの新しいAPIで遊んでみる

Daichi

April 15, 2020
Tweet

More Decks by Daichi

Other Decks in Technology

Transcript

  1. 2020.04.15 @ PWA Night vol.15

    株式会社TAM 菅家大地

    ブラウザの新しいAPIで

    遊んでみる


    View Slide

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

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

    福島→宮城→東京→宮城

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

    Vue.js / Nuxt.js / PWA / Monaca 

    daichi.kanke
    @kan_dai

    View Slide

  3. https://employment.en-japan.com/engineerhub/entry/2019/10/24/103000

    View Slide

  4. View Slide

  5. https://twitter.com/takepepe/status/1223524934623756293
    https://twitter.com/Leonardo_engr/status/1223471348292313088

    View Slide

  6. ● Shape Detection API
    ○ Barcode Detection(バーコードスキャン)
    ○ Face Detection(顔検出)
    ○ Text Detection(テキスト認識)
    ● Media Session API (おまけ)
    試したやつ

    View Slide

  7. Shape Detection APIを試す場合は chrome://flags から「Experimental Web Platform features」を Enabled
    に設定(Mac, Windows, Linux, Chrome OS, Android)

    View Slide

  8. Barcode Detection API


    View Slide

  9. 以前作ったやつ(QR読み込むライブラリを使っていた)
    https://speakerdeck.com/kandai/webji-shu-dakedezauo-ruqrkodorida

    View Slide

  10. Barcode Detaction APIに置き換えたデモ
    https://dev-simple-qr.netlify.app/

    View Slide

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

    View Slide

  12. /js/app.js

    View Slide

  13. /js/app.js

    View Slide

  14. View Slide

  15. JavaScriptでデバイスの

    カメラにアクセス


    QRコードが含まれているか解析

    (Barcode Detection API)

    video要素を
    渡すだけでOK!

    View Slide

  16. Face Detection API


    View Slide

  17. Face Detaction APIデモ
    https://kandai.github.io/face-detection-demo/

    View Slide

  18. View Slide

  19. /js/app.js

    View Slide

  20. Text Detection API


    View Slide

  21. Text Detaction APIデモ
    https://kandai.github.io/text-detection-demo/

    View Slide

  22. View Slide

  23. /js/app.js

    View Slide

  24. Media Session API


    View Slide

  25. https://music-player-demo.netlify.com/
    Music Player (demo)
    Androidじゃないとうまく動かないかも…

    View Slide

  26. /js/app.js

    View Slide

  27. /js/app.js

    View Slide

  28. https://caniuse.com/#search=media%20session

    View Slide

  29. ● https://github.com/KanDai/simple-qr-reader/tree/develop
    ● https://github.com/KanDai/face-detection-demo
    ● https://github.com/KanDai/text-detection-demo
    ● https://github.com/KanDai/music-player
    サンプルコード

    View Slide


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


    View Slide