ブラウザの 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. 終わり！