Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
ブラウザの API でカメラを使った検出処理 / IoTLT vol.82
Search
you(@youtoy)
PRO
December 21, 2021
Technology
0
270
ブラウザの API でカメラを使った検出処理 / IoTLT vol.82
you(@youtoy)
PRO
December 21, 2021
Tweet
Share
More Decks by you(@youtoy)
See All by you(@youtoy)
"かわいい" がテーマのハッカソンでWebの技術を使って魔法の世界を作った話など / HTML5 10th Anniversary
you
PRO
0
64
ブラウザで AI・機械学習が扱える TensorFlow.js が使われているライブラリなどの話 / #さくらのAI Meetup vol.4「ブラウザ」
you
PRO
0
130
Blynk と Raspberry Pi Pico W で IoT 〜 MQTT・HTTPリクエストの組み合わせも 〜 / IoTLT vol.114
you
PRO
0
270
AIを活用したWebアプリのプロトタイプを作ってコンテストや展示に出してみた話 / 大阪工業大学 ネットワークデザイン学科 LT大会 2024v2
you
PRO
0
65
Babylon.jsと色々なものを組み合わせる:ブラウザのAPIやガジェットや2D描画ライブラリなど / Babylon.js 勉強会 vol.3
you
PRO
0
500
WebHID API で Joy-Con・DUALSHOCK 4 のセンサーをブラウザから利用する / IoTLT vol.109
you
PRO
0
240
UIFlow 2.0 で MQTT をやってみた! / IoTLT vol.108
you
PRO
0
2.6k
UIFlow 2.0 と ATOMS3 の組み合わせで LINE通知を試す / ビジュアルプログラミングIoTLT vol.16
you
PRO
0
460
技術コミュニティの中での生成AI(自身の観測範囲での事例について) / 23 Xmas Talk / 20231209
you
PRO
0
1.5k
Other Decks in Technology
See All in Technology
CDCL による厳密解法を採用した MILP ソルバー
imai448
3
210
DynamoDB でスロットリングが発生したとき_大盛りver/when_throttling_occurs_in_dynamodb_long
emiki
1
470
TypeScriptの次なる大進化なるか!? 条件型を返り値とする関数の型推論
uhyo
2
1.8k
Mastering Quickfix
daisuzu
1
310
OCI 運用監視サービス 概要
oracle4engineer
PRO
0
4.8k
【Startup CTO of the Year 2024 / Audience Award】アセンド取締役CTO 丹羽健
niwatakeru
0
1.4k
OS 標準のデザインシステムを超えて - より柔軟な Flutter テーマ管理 | FlutterKaigi 2024
ronnnnn
1
310
SDNという名のデータプレーンプログラミングの歴史
ebiken
PRO
2
170
10XにおけるData Contractの導入について: Data Contract事例共有会
10xinc
7
710
アプリエンジニアのためのGraphQL入門.pdf
spycwolf
0
120
なぜ今 AI Agent なのか _近藤憲児
kenjikondobai
4
1.4k
Taming you application's environments
salaboy
0
200
Featured
See All Featured
Building a Scalable Design System with Sketch
lauravandoore
459
33k
Intergalactic Javascript Robots from Outer Space
tanoku
269
27k
Side Projects
sachag
452
42k
Bootstrapping a Software Product
garrettdimon
PRO
305
110k
Building Flexible Design Systems
yeseniaperezcruz
327
38k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
6.8k
Done Done
chrislema
181
16k
Testing 201, or: Great Expectations
jmmastey
38
7.1k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
26
1.4k
GitHub's CSS Performance
jonrohan
1030
460k
How GitHub (no longer) Works
holman
310
140k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.1k
Transcript
ブラウザの 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(オリジントライアル)
終わり!