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

2c53966a0119dc87486c906e34391b28?s=47 Daichi
April 15, 2020

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

2c53966a0119dc87486c906e34391b28?s=128

Daichi

April 15, 2020
Tweet

Transcript

  1. 2020.04.15 @ PWA Night vol.15
 株式会社TAM 菅家大地
 ブラウザの新しいAPIで
 遊んでみる


  2. 株式会社TAM フロントエンドエンジニア
 菅家 大地 / Daichi Kanke 元デザイナーのフロントエンドエンジニア
 福島→宮城→東京→宮城
 PWA

    Night / 仙台フロントエンドUG /v-sendai
 Vue.js / Nuxt.js / PWA / Monaca 
 daichi.kanke @kan_dai
  3. https://employment.en-japan.com/engineerhub/entry/2019/10/24/103000

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

  6. • Shape Detection API ◦ Barcode Detection(バーコードスキャン) ◦ Face Detection(顔検出)

    ◦ Text Detection(テキスト認識) • Media Session API (おまけ) 試したやつ
  7. Shape Detection APIを試す場合は chrome://flags から「Experimental Web Platform features」を Enabled に設定(Mac,

    Windows, Linux, Chrome OS, Android)
  8. Barcode Detection API


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

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

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

  12. /js/app.js

  13. /js/app.js

  14. None
  15. JavaScriptでデバイスの
 カメラにアクセス
 
 QRコードが含まれているか解析
 (Barcode Detection API)
 video要素を 渡すだけでOK!

  16. Face Detection API


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

  18. None
  19. /js/app.js

  20. Text Detection API


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

  22. None
  23. /js/app.js

  24. Media Session API


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

  26. /js/app.js

  27. /js/app.js

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

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

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