ブラウザの新しい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で
 遊んでみる

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
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
15. JavaScriptでデバイスの
 カメラにアクセス
 
 QRコードが含まれているか解析
 (Barcode Detection API)
 video要素を 渡すだけでOK！
16. Face Detection API

17. Face Detaction APIデモ https://kandai.github.io/face-detection-demo/
19. /js/app.js
20. Text Detection API

21. Text Detaction APIデモ https://kandai.github.io/text-detection-demo/
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. 
 ご静聴ありがとうございました