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
290
ブラウザの API でカメラを使った検出処理 / IoTLT vol.82
you(@youtoy)
PRO
December 21, 2021
Tweet
Share
More Decks by you(@youtoy)
See All by you(@youtoy)
生成AIとM5Stack / M5 Japan Tour 2025 Autumn 東京
you
PRO
0
260
子ども向けの活動や自身のモノづくり活動などでやったこと / micro:bit ファンの集い
you
PRO
0
11
ブラウザのAPIで色々なデバイスをあれこれ扱ってみた話(主にWeb HID API) / IoTLT @JLCPCB オープンハードカンファレンス
you
PRO
0
130
ヒーローズ・リーグの応募作品で使ったデバイス・アイテム・ライブラリなど / #ヒーローズリーグ 2025 開発素材LT
you
PRO
0
40
最近発売された端末+UIFlow 2.0の組み合わせ(+1.0の話)をUSB接続で / ビジュアルプログラミングIoTLT vol.21
you
PRO
0
98
AIエージェント開発用SDKとローカルLLMをLINE Botと組み合わせてみた / LINEを使ったLT大会 #14
you
PRO
0
210
ブラウザで CircuitPython の開発:公式の「CircuitPython Code Editor」を試した / 【屋形船開催】IoT縛りの勉強会! IoTLT vol.126 @東京湾
you
PRO
0
130
公開初日に個人環境で試した Gemini CLI 体験記など / Gemini CLI実験レポート
you
PRO
3
3.1k
Webの技術とガジェットで那須の子ども達にワクワクを! / IoTLT_20250720
you
PRO
0
150
Other Decks in Technology
See All in Technology
2025-10-09_プロジェクトマネージャーAIチャンス
taukami
0
150
20251014_Pythonを実務で徹底的に使いこなした話
ippei0923
0
200
Wasmのエコシステムを使った ツール作成方法
askua
0
180
ComposeではないコードをCompose化する case ビズリーチ / DroidKaigi 2025 koyasai
visional_engineering_and_design
0
110
OCI Network Firewall 概要
oracle4engineer
PRO
2
7.9k
新規事業におけるGORM+SQLx併用アーキテクチャ
hacomono
PRO
0
300
AI時代こそ求められる設計力- AWSクラウドデザインパターン3選で信頼性と拡張性を高める-
kenichirokimura
3
330
20201008_ファインディ_品質意識を育てる役目は人かAIか___2_.pdf
findy_eventslides
2
640
[Keynote] What do you need to know about DevEx in 2025
salaboy
0
170
やる気のない自分との向き合い方/How to Deal with Your Unmotivated Self
sanogemaru
0
510
"プロポーザルってなんか怖そう"という境界を超えてみた@TSUDOI by giftee Tech #1
shilo113
0
200
研究開発部メンバーの働き⽅ / Sansan R&D Profile
sansan33
PRO
3
20k
Featured
See All Featured
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
55
3k
Building a Modern Day E-commerce SEO Strategy
aleyda
44
7.8k
Building Applications with DynamoDB
mza
96
6.7k
4 Signs Your Business is Dying
shpigford
185
22k
jQuery: Nuts, Bolts and Bling
dougneiner
65
7.9k
Reflections from 52 weeks, 52 projects
jeffersonlam
353
21k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
115
20k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
Rebuilding a faster, lazier Slack
samanthasiow
84
9.2k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
BBQ
matthewcrist
89
9.8k
For a Future-Friendly Web
brad_frost
180
10k
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(オリジントライアル)
終わり!