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

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

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

Cd931bc05e7cee46b9a950a63e47ba4c?s=128

you(@youtoy)

December 21, 2021
Tweet

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. 終わり!