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

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

本題（1つ目）へ

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

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

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

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

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

こんなJavaScriptの処理

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

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

気になる情報も

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

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

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

利用する場合

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/

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

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

カメラつながりな話で

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

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

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

終わり！