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
WebAR
Search
Sponsored
·
Your Podcast. Everywhere. Effortlessly.
Share. Educate. Inspire. Entertain. You do you. We'll handle the rest.
→
Kaneko Takeshi
June 16, 2017
Technology
0
39
WebAR
Kaneko Takeshi
June 16, 2017
Tweet
Share
More Decks by Kaneko Takeshi
See All by Kaneko Takeshi
オープンソースライセンスについて勉強する定期
tkckaneko
0
31
Eye Tracking on the Browser
tkckaneko
0
88
IEEE754を完全に理解した
tkckaneko
1
76
CSSのトレンドをみんなで見よう -2021年-
tkckaneko
0
93
多分これが一番早いと思います
tkckaneko
0
27
暗黒面の話
tkckaneko
0
24
CSR / SSR / SSG / JAMstack
tkckaneko
0
73
BOLT
tkckaneko
0
31
CSS Logical Properties and Values
tkckaneko
0
36
Other Decks in Technology
See All in Technology
2人で作ったAIダッシュボードが、開発組織の次の一手を照らした話― Cursor × SpecKit × 可視化の実践 ― Qiita AI Summit
noalisaai
1
370
2026年、サーバーレスの現在地 -「制約と戦う技術」から「当たり前の実行基盤」へ- /serverless2026
slsops
2
210
Cosmos World Foundation Model Platform for Physical AI
takmin
0
310
Digitization部 紹介資料
sansan33
PRO
1
6.8k
なぜ今、コスト最適化(倹約)が必要なのか? ~AWSでのコスト最適化の進め方「目的編」~
htan
1
110
フルカイテン株式会社 エンジニア向け採用資料
fullkaiten
0
10k
使いにくいの壁を突破する
sansantech
PRO
1
120
30万人の同時アクセスに耐えたい!新サービスの盤石なリリースを支える負荷試験 / SRE Kaigi 2026
genda
1
310
データ民主化のための LLM 活用状況と課題紹介(IVRy の場合)
wxyzzz
2
680
Data Hubグループ 紹介資料
sansan33
PRO
0
2.7k
M&A 後の統合をどう進めるか ─ ナレッジワーク × Poetics が実践した組織とシステムの融合
kworkdev
PRO
1
410
MCPでつなぐElasticsearchとLLM - 深夜の障害対応を楽にしたい / Bridging Elasticsearch and LLMs with MCP
sashimimochi
0
140
Featured
See All Featured
4 Signs Your Business is Dying
shpigford
187
22k
VelocityConf: Rendering Performance Case Studies
addyosmani
333
24k
Java REST API Framework Comparison - PWX 2021
mraible
34
9.1k
How Software Deployment tools have changed in the past 20 years
geshan
0
32k
Bioeconomy Workshop: Dr. Julius Ecuru, Opportunities for a Bioeconomy in West Africa
akademiya2063
PRO
1
54
Automating Front-end Workflow
addyosmani
1371
200k
How to Think Like a Performance Engineer
csswizardry
28
2.4k
A Tale of Four Properties
chriscoyier
162
24k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
141
34k
The Cult of Friendly URLs
andyhume
79
6.8k
How to Build an AI Search Optimization Roadmap - Criteria and Steps to Take #SEOIRL
aleyda
1
1.9k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
130k
Transcript
WEB AR
なぜWebARの話をするかというと
Safari 11からカメラにアクセスできます (Androidは前からできます)
まだベータ版ですが 新機能として公式に紹介されています https://developer.apple.com/library/content/releasenotes/General/WhatsNewI nSafari/Safari_11_0/Safari_11_0.html
New in Safari 11.0 – Camera and microphone access. -
Added support for the Media Capture API. - Websites can access camera and microphone streams from a user's device (user permission is required.)
Media Capture Stream API って規格です
規格については難しので、 W3Cで読んでください https://www.w3.org/TR/mediacapture-streams/
今日はコレを使って 何ができるか紹介したいと思います
ざっくりした使い方説明
カメラやマイクの入力を getUserMediaで取得します
navigator.mediaDevices.getUserMedia (constraints)
これはPromise形式になっています
navigator.mediaDevices.getUserMedia (constraints) .then (successCallback).catch (failureCallback)
パラメータを渡すことで 解像度やリアカメラ、フロントカメラなどを 選ぶことができます
マイクとカメラの指定 { audio: true, video: true }
解像度の指定 { video: { width: 1280, height: 720 } }
解像度の最小値の指定 { video: { width: { min: 1280 }, height:
{ min: 720 } }}
フレームレートの指定 { video: { frameRate: { max: 15 } }
}
カメラの指定 { video: { facingMode: { exact: "user" } }
} リアカメラは "environment" です
まとめ navigator.mediaDevices.getUserMedia (constraints) .then (function (stream) { const video =
document.querySelector ('video') video.src = window.URL.createObjectURL (stream) video.onloadedmetadata = function(e) { video.play () } }) .catch (function (err) { console.log (err.name + ": " + err.message) })
これでカメラの映像をJavaScriptで 取得できました
ブラウザでARができるようになった ということです
AR
その時周囲を取り巻く現実環境に 情報を付加・削除・強調・減衰させ、 文字通り人間から見た現実世界を 拡張するものを指す
!すみません! サンプルしか用意できませんでした
カメラでマーカーを認識して オブジェクトを表示する
https://github.com/jeromeetienne/AR.js
カメラで顔を認識する
https://ics.media/entry/13038
クロマキー合成する
https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Manipulating_video_us ing_canvas
まだまだ課題が多くあります
➔ 対応端末が少ない ➔ 処理速度や精度が低い
今まではアプリだけだったARを ブラウザで表現できるようになります
これからWebARが 盛り上がるといいなー