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

Transcript

1. ブラウザの API でカメラを使った検出処理
   2021年12月21日 (火)
   IoT縛りの勉強会! IoTLT vol.82 @オンライン
   豊田陽介（ ）
   @youtoy
   

   View Slide

2. 自己紹介
   ビジュアルプログラミング
   IoTLT共同主催、その他にも
   豊田陽介（ ）
   普段は、某通信会社勤務
   @youtoy
   ・IT系イベント主催、登壇や運営なども
   ・子ども向けの活動いろいろ（IT系以外も）
   ・ Microsoft MVP（2021/10 から）
   プライベートでの活動
   ・ガジェット好き
   ・アドベントカレンダーで記事を多数アップ
   その他
   自宅にたくさん
   

   View Slide

3. 本題（1つ目）へ
   

   View Slide

4. Barcode Detection API
   ブラウザで QRコードや 1次元バーコード等が読めるAPI
   参照元： https://chromestatus.com/feature/4757990523535360
   　　　　
   https://developer.mozilla.org/en-US/docs/Web/API/Barcode_Detection_API
   

   View Slide

5. いろいろなバーコードに対応
   こんなに色々あるのか...
   参照元：
   https://developer.mozilla.org/en-US/docs/Web/API/Barcode_Detection_API
   

   View Slide

6. 最初に情報を見かけたのは
   

   View Slide

7. こちらのQiitaの記事
   参照元：
   https://qiita.com/kan_dai/items/3486880236a2fcd9b527
   

   View Slide

8. そして実際に試してみたことも
   

   View Slide

9. こんなJavaScriptの処理
   

   View Slide

10. 余談
    （ブラウザのAPIじゃないけど）
    

    View Slide

11. JavaScriptライブラリ（jsQR）を使って
    本来の用途と違う使い方を
    （あまりオススメできない...）
    

    View Slide

12. 気になる情報も
    

    View Slide

13. バーコード以外も検出できる仕組み？
    

    View Slide

14. Face Detection API
    参照元：
    https://chromestatus.com/feature/5678216012365824
    

    View Slide

15. Text Detection API
    参照元：
    https://chromestatus.com/feature/5644087665360896
    

    View Slide

16. 利用する場合
    

    View Slide

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/
    

    View Slide

18. フラグの有効化
    参照元： https://web.dev/shape-detection/
    「about://flags」にアクセスして、
    「#enable-experimental-web-platform-features」
    　を有効に
    

    View Slide

19. 試して記事にしてみたい
    （まだ未着手）
    

    View Slide

20. カメラつながりな話で
    

    View Slide

21. その他に見かけて気になったやつ
    参照元：
    https://chromestatus.com/feature/5570717087170560
    Pan/Tilt support for Camera【getUserMedia()】
    

    View Slide

22. 試して記事にしてみたりなど
    

    View Slide

23. その他に気になっているやつ
    参照元
    ：https://chromestatus.com/feature/5732397976911872
    WebXR Plane Detection API（オリジントライアル）
    

    View Slide

24. 終わり！
    

    View Slide