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

当日の配信動画
https://www.youtube.com/watch?v=CS2tzUpYvQA

スライド内のリンク

Webでできる体験を考える会
https://twitter.com/takepepe/status/1223524934623756293

Unlocking new capabilities for PWA
https://twitter.com/Leonardo_engr/status/1223471348292313088

Webの技術だけで作るQRコードリーダー(スライド)
https://speakerdeck.com/kandai/webji-shu-dakedezauo-ruqrkodorida

Barcode Detaction API デモ
https://dev-simple-qr.netlify.app/

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

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

Media Session API デモ
https://music-player-demo.netlify.com/

各種サンプルコード
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

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