Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

you(@youtoy)

December 21, 2021
Tweet

More Decks by you(@youtoy)

Other Decks in Technology

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