ブラウザの API でカメラを使った検出処理 / IoTLT vol.82

Transcript

1. ブラウザの API でカメラを使った検出処理 2021年12月21日 (火) IoT縛りの勉強会! IoTLT vol.82 @オンライン 豊田陽介（ ） @youtoy
2. 自己紹介 ビジュアルプログラミング IoTLT共同主催、その他にも 豊田陽介（ ） 普段は、某通信会社勤務 @youtoy ・IT系イベント主催、登壇や運営なども ・子ども向けの活動いろいろ（IT系以外も） ・ Microsoft MVP（2021/10 から） プライベートでの活動 ・ガジェット好き ・アドベントカレンダーで記事を多数アップ その他 自宅にたくさん
3. 本題（1つ目）へ
4. Barcode Detection API ブラウザで QRコードや 1次元バーコード等が読めるAPI 参照元： https://chromestatus.com/feature/4757990523535360 　　　　 https://developer.mozilla.org/en-US/docs/Web/API/Barcode_Detection_API
5. いろいろなバーコードに対応 こんなに色々あるのか... 参照元： https://developer.mozilla.org/en-US/docs/Web/API/Barcode_Detection_API
6. 最初に情報を見かけたのは
7. こちらのQiitaの記事 参照元： https://qiita.com/kan_dai/items/3486880236a2fcd9b527
8. そして実際に試してみたことも
9. こんなJavaScriptの処理
10. 余談 （ブラウザのAPIじゃないけど）
11. JavaScriptライブラリ（jsQR）を使って 本来の用途と違う使い方を （あまりオススメできない...）
12. 気になる情報も
13. バーコード以外も検出できる仕組み？
14. Face Detection API 参照元： https://chromestatus.com/feature/5678216012365824
15. Text Detection API 参照元： https://chromestatus.com/feature/5644087665360896
16. 利用する場合
17. 3つのうち2つはフラグの有効化が必要 This API is part of the new capabilities project. Barcode detection has launched in Chrome 83. Face and text detection are available behind a flag. This post will be updated as the Shape Detection API evolves. 参照元： https://web.dev/shape-detection/
18. フラグの有効化 参照元： https://web.dev/shape-detection/ 「about://flags」にアクセスして、 「#enable-experimental-web-platform-features」 　を有効に
19. 試して記事にしてみたい （まだ未着手）
20. カメラつながりな話で
21. その他に見かけて気になったやつ 参照元： https://chromestatus.com/feature/5570717087170560 Pan/Tilt support for Camera【getUserMedia()】
22. 試して記事にしてみたりなど
23. その他に気になっているやつ 参照元 ：https://chromestatus.com/feature/5732397976911872 WebXR Plane Detection API（オリジントライアル）
24. 終わり！