Suche senden
Hochladen
Augmented Reality in JavaScript
•
1 gefällt mir
•
1,060 views
Zeno Rocha
Folgen
Presented at HTML5 Dev Conf - San Francisco, 2013.
Weniger lesen
Mehr lesen
Technologie
Melden
Teilen
Melden
Teilen
1 von 74
Jetzt herunterladen
Downloaden Sie, um offline zu lesen
Empfohlen
Портируем существующее Web-приложение в виртуальную реальность / Денис Радин ...
Портируем существующее Web-приложение в виртуальную реальность / Денис Радин ...
Ontico
WebVR - MobileTechCon Berlin 2016
WebVR - MobileTechCon Berlin 2016
Carsten Sandtner
The next frontier: WebGL and WebVR
The next frontier: WebGL and WebVR
Codemotion
An Introduction to WebVR – or How to make your user sick in 60 seconds
An Introduction to WebVR – or How to make your user sick in 60 seconds
GeilDanke
Getting Started in VR with JS
Getting Started in VR with JS
Rudy Jahchan
From Hello World to the Interactive Web with Three.js: Workshop at FutureJS 2014
From Hello World to the Interactive Web with Three.js: Workshop at FutureJS 2014
Verold
Developing Web Graphics with WebGL
Developing Web Graphics with WebGL
Tony Parisi
WebGL and three.js
WebGL and three.js
Anton Narusberg
Empfohlen
Портируем существующее Web-приложение в виртуальную реальность / Денис Радин ...
Портируем существующее Web-приложение в виртуальную реальность / Денис Радин ...
Ontico
WebVR - MobileTechCon Berlin 2016
WebVR - MobileTechCon Berlin 2016
Carsten Sandtner
The next frontier: WebGL and WebVR
The next frontier: WebGL and WebVR
Codemotion
An Introduction to WebVR – or How to make your user sick in 60 seconds
An Introduction to WebVR – or How to make your user sick in 60 seconds
GeilDanke
Getting Started in VR with JS
Getting Started in VR with JS
Rudy Jahchan
From Hello World to the Interactive Web with Three.js: Workshop at FutureJS 2014
From Hello World to the Interactive Web with Three.js: Workshop at FutureJS 2014
Verold
Developing Web Graphics with WebGL
Developing Web Graphics with WebGL
Tony Parisi
WebGL and three.js
WebGL and three.js
Anton Narusberg
Creating Applications with WebGL and Three.js
Creating Applications with WebGL and Three.js
Future Insights
Goodbye, Flatland! An introduction to React VR and what it means for web dev...
Goodbye, Flatland! An introduction to React VR and what it means for web dev...
GeilDanke
Intro to Three.js
Intro to Three.js
Kentucky JavaScript Users Group
Introduction to threejs
Introduction to threejs
Gareth Marland
Introduction to three.js & Leap Motion
Introduction to three.js & Leap Motion
Lee Trout
Custom SRP and graphics workflows - Unite Copenhagen 2019
Custom SRP and graphics workflows - Unite Copenhagen 2019
Unity Technologies
WebGL and three.js - Web 3D Graphics
WebGL and three.js - Web 3D Graphics
PSTechSerbia
飛び道具ではないMetal #iOSDC
飛び道具ではないMetal #iOSDC
Shuichi Tsutsumi
JavaFX 2.0 With Alternative Languages - Groovy, Clojure, Scala, Fantom, and V...
JavaFX 2.0 With Alternative Languages - Groovy, Clojure, Scala, Fantom, and V...
Stephen Chin
Google's HTML5 Work: what's next?
Google's HTML5 Work: what's next?
Patrick Chanezon
Unity asset workflows for Film and Animation pipelines - Unite Copenhagen 2019
Unity asset workflows for Film and Animation pipelines - Unite Copenhagen 2019
Unity Technologies
HTML5 game dev with three.js - HexGL
HTML5 game dev with three.js - HexGL
Thibaut Despoulain
WebVR - JAX 2016
WebVR - JAX 2016
Carsten Sandtner
Introduction to three.js
Introduction to three.js
yuxiang21
Implementing a Simple Game using libGDX
Implementing a Simple Game using libGDX
Jussi Pohjolainen
Advanced Silverlight
Advanced Silverlight
Jeff Blankenburg
Unity3 d devfest-2014
Unity3 d devfest-2014
Vincenzo Favara
[JS Kongress 2016] KittyCam.js - Raspberry Pi Camera w/ Cat Facial Detection
[JS Kongress 2016] KittyCam.js - Raspberry Pi Camera w/ Cat Facial Detection
Tomomi Imura
Technical Deep Dive into the New Prefab System
Technical Deep Dive into the New Prefab System
Unity Technologies
Rethink Async With RXJS
Rethink Async With RXJS
Ryan Anklam
How to implement camera recording for USB webcam or IP camera in C#.NET
How to implement camera recording for USB webcam or IP camera in C#.NET
Ozeki Informatics Ltd.
QXCameraKit
QXCameraKit
Hirakawa Akira
Weitere ähnliche Inhalte
Was ist angesagt?
Creating Applications with WebGL and Three.js
Creating Applications with WebGL and Three.js
Future Insights
Goodbye, Flatland! An introduction to React VR and what it means for web dev...
Goodbye, Flatland! An introduction to React VR and what it means for web dev...
GeilDanke
Intro to Three.js
Intro to Three.js
Kentucky JavaScript Users Group
Introduction to threejs
Introduction to threejs
Gareth Marland
Introduction to three.js & Leap Motion
Introduction to three.js & Leap Motion
Lee Trout
Custom SRP and graphics workflows - Unite Copenhagen 2019
Custom SRP and graphics workflows - Unite Copenhagen 2019
Unity Technologies
WebGL and three.js - Web 3D Graphics
WebGL and three.js - Web 3D Graphics
PSTechSerbia
飛び道具ではないMetal #iOSDC
飛び道具ではないMetal #iOSDC
Shuichi Tsutsumi
JavaFX 2.0 With Alternative Languages - Groovy, Clojure, Scala, Fantom, and V...
JavaFX 2.0 With Alternative Languages - Groovy, Clojure, Scala, Fantom, and V...
Stephen Chin
Google's HTML5 Work: what's next?
Google's HTML5 Work: what's next?
Patrick Chanezon
Unity asset workflows for Film and Animation pipelines - Unite Copenhagen 2019
Unity asset workflows for Film and Animation pipelines - Unite Copenhagen 2019
Unity Technologies
HTML5 game dev with three.js - HexGL
HTML5 game dev with three.js - HexGL
Thibaut Despoulain
WebVR - JAX 2016
WebVR - JAX 2016
Carsten Sandtner
Introduction to three.js
Introduction to three.js
yuxiang21
Implementing a Simple Game using libGDX
Implementing a Simple Game using libGDX
Jussi Pohjolainen
Advanced Silverlight
Advanced Silverlight
Jeff Blankenburg
Unity3 d devfest-2014
Unity3 d devfest-2014
Vincenzo Favara
[JS Kongress 2016] KittyCam.js - Raspberry Pi Camera w/ Cat Facial Detection
[JS Kongress 2016] KittyCam.js - Raspberry Pi Camera w/ Cat Facial Detection
Tomomi Imura
Technical Deep Dive into the New Prefab System
Technical Deep Dive into the New Prefab System
Unity Technologies
Rethink Async With RXJS
Rethink Async With RXJS
Ryan Anklam
Was ist angesagt?
(20)
Creating Applications with WebGL and Three.js
Creating Applications with WebGL and Three.js
Goodbye, Flatland! An introduction to React VR and what it means for web dev...
Goodbye, Flatland! An introduction to React VR and what it means for web dev...
Intro to Three.js
Intro to Three.js
Introduction to threejs
Introduction to threejs
Introduction to three.js & Leap Motion
Introduction to three.js & Leap Motion
Custom SRP and graphics workflows - Unite Copenhagen 2019
Custom SRP and graphics workflows - Unite Copenhagen 2019
WebGL and three.js - Web 3D Graphics
WebGL and three.js - Web 3D Graphics
飛び道具ではないMetal #iOSDC
飛び道具ではないMetal #iOSDC
JavaFX 2.0 With Alternative Languages - Groovy, Clojure, Scala, Fantom, and V...
JavaFX 2.0 With Alternative Languages - Groovy, Clojure, Scala, Fantom, and V...
Google's HTML5 Work: what's next?
Google's HTML5 Work: what's next?
Unity asset workflows for Film and Animation pipelines - Unite Copenhagen 2019
Unity asset workflows for Film and Animation pipelines - Unite Copenhagen 2019
HTML5 game dev with three.js - HexGL
HTML5 game dev with three.js - HexGL
WebVR - JAX 2016
WebVR - JAX 2016
Introduction to three.js
Introduction to three.js
Implementing a Simple Game using libGDX
Implementing a Simple Game using libGDX
Advanced Silverlight
Advanced Silverlight
Unity3 d devfest-2014
Unity3 d devfest-2014
[JS Kongress 2016] KittyCam.js - Raspberry Pi Camera w/ Cat Facial Detection
[JS Kongress 2016] KittyCam.js - Raspberry Pi Camera w/ Cat Facial Detection
Technical Deep Dive into the New Prefab System
Technical Deep Dive into the New Prefab System
Rethink Async With RXJS
Rethink Async With RXJS
Ähnlich wie Augmented Reality in JavaScript
How to implement camera recording for USB webcam or IP camera in C#.NET
How to implement camera recording for USB webcam or IP camera in C#.NET
Ozeki Informatics Ltd.
QXCameraKit
QXCameraKit
Hirakawa Akira
QA Fest 2019. Алексей Альтер-Песоцкий. Snapshot testing with native mobile fr...
QA Fest 2019. Алексей Альтер-Песоцкий. Snapshot testing with native mobile fr...
QAFest
Moustamera
Moustamera
Bram Vandewalle
Breizhcamp Rennes 2011
Breizhcamp Rennes 2011
sekond0
Enhance your world with ARKit. UA Mobile 2017.
Enhance your world with ARKit. UA Mobile 2017.
UA Mobile
TP_Webots_7mai2021.pdf
TP_Webots_7mai2021.pdf
kiiway01
What's new in Android P @ I/O Extended Bangkok 2018
What's new in Android P @ I/O Extended Bangkok 2018
Somkiat Khitwongwattana
426 lecture 4: AR Developer Tools
426 lecture 4: AR Developer Tools
Mark Billinghurst
VR Workshop #3
VR Workshop #3
Enrico Baracaglia
WebRTC Standards & Implementation Q&A - All about browser interoperability
WebRTC Standards & Implementation Q&A - All about browser interoperability
Amir Zmora
06.Programming Media on Windows Phone
06.Programming Media on Windows Phone
Nguyen Tuan
Augmented reality in web rtc browser
Augmented reality in web rtc browser
ALTANAI BISHT
Open Cv 2005 Q4 Tutorial
Open Cv 2005 Q4 Tutorial
antiw
Web Standards for AR workshop at ISMAR13
Web Standards for AR workshop at ISMAR13
Rob Manson
Android RuntimePermissionsExtended
Android RuntimePermissionsExtended
Nebojša Vukšić
Web of Technologies
Web of Technologies
dynamis
Kenn Song (VisionStar): EasyAR 2.0 - New Features and Changes
Kenn Song (VisionStar): EasyAR 2.0 - New Features and Changes
AugmentedWorldExpo
Omnia App With Samsung Sdk
Omnia App With Samsung Sdk
sheon shin
Intro to HTML5
Intro to HTML5
Jussi Pohjolainen
Ähnlich wie Augmented Reality in JavaScript
(20)
How to implement camera recording for USB webcam or IP camera in C#.NET
How to implement camera recording for USB webcam or IP camera in C#.NET
QXCameraKit
QXCameraKit
QA Fest 2019. Алексей Альтер-Песоцкий. Snapshot testing with native mobile fr...
QA Fest 2019. Алексей Альтер-Песоцкий. Snapshot testing with native mobile fr...
Moustamera
Moustamera
Breizhcamp Rennes 2011
Breizhcamp Rennes 2011
Enhance your world with ARKit. UA Mobile 2017.
Enhance your world with ARKit. UA Mobile 2017.
TP_Webots_7mai2021.pdf
TP_Webots_7mai2021.pdf
What's new in Android P @ I/O Extended Bangkok 2018
What's new in Android P @ I/O Extended Bangkok 2018
426 lecture 4: AR Developer Tools
426 lecture 4: AR Developer Tools
VR Workshop #3
VR Workshop #3
WebRTC Standards & Implementation Q&A - All about browser interoperability
WebRTC Standards & Implementation Q&A - All about browser interoperability
06.Programming Media on Windows Phone
06.Programming Media on Windows Phone
Augmented reality in web rtc browser
Augmented reality in web rtc browser
Open Cv 2005 Q4 Tutorial
Open Cv 2005 Q4 Tutorial
Web Standards for AR workshop at ISMAR13
Web Standards for AR workshop at ISMAR13
Android RuntimePermissionsExtended
Android RuntimePermissionsExtended
Web of Technologies
Web of Technologies
Kenn Song (VisionStar): EasyAR 2.0 - New Features and Changes
Kenn Song (VisionStar): EasyAR 2.0 - New Features and Changes
Omnia App With Samsung Sdk
Omnia App With Samsung Sdk
Intro to HTML5
Intro to HTML5
Mehr von Zeno Rocha
Web APIs you (probably) didn't know existed
Web APIs you (probably) didn't know existed
Zeno Rocha
Future of Web Development
Future of Web Development
Zeno Rocha
Tracking.js
Tracking.js
Zeno Rocha
Liferay + Wearables
Liferay + Wearables
Zeno Rocha
Como empreender em... você!
Como empreender em... você!
Zeno Rocha
Liferay UI (R)evolution
Liferay UI (R)evolution
Zeno Rocha
Um futuro chamado Web Components
Um futuro chamado Web Components
Zeno Rocha
Getting started with YUI3 and AlloyUI
Getting started with YUI3 and AlloyUI
Zeno Rocha
How to create high scalable JavaScript apps for Java Portals
How to create high scalable JavaScript apps for Java Portals
Zeno Rocha
Como Perder Peso (no browser)
Como Perder Peso (no browser)
Zeno Rocha
Os mitos do desenvolvimento front-end
Os mitos do desenvolvimento front-end
Zeno Rocha
Super Trunfo - Case de Dados Abertos
Super Trunfo - Case de Dados Abertos
Zeno Rocha
Desbravando o HTML5 Boilerplate
Desbravando o HTML5 Boilerplate
Zeno Rocha
Construindo Projetos Robustos em HTML5
Construindo Projetos Robustos em HTML5
Zeno Rocha
HTML 5
HTML 5
Zeno Rocha
Wordpress
Wordpress
Zeno Rocha
Mehr von Zeno Rocha
(16)
Web APIs you (probably) didn't know existed
Web APIs you (probably) didn't know existed
Future of Web Development
Future of Web Development
Tracking.js
Tracking.js
Liferay + Wearables
Liferay + Wearables
Como empreender em... você!
Como empreender em... você!
Liferay UI (R)evolution
Liferay UI (R)evolution
Um futuro chamado Web Components
Um futuro chamado Web Components
Getting started with YUI3 and AlloyUI
Getting started with YUI3 and AlloyUI
How to create high scalable JavaScript apps for Java Portals
How to create high scalable JavaScript apps for Java Portals
Como Perder Peso (no browser)
Como Perder Peso (no browser)
Os mitos do desenvolvimento front-end
Os mitos do desenvolvimento front-end
Super Trunfo - Case de Dados Abertos
Super Trunfo - Case de Dados Abertos
Desbravando o HTML5 Boilerplate
Desbravando o HTML5 Boilerplate
Construindo Projetos Robustos em HTML5
Construindo Projetos Robustos em HTML5
HTML 5
HTML 5
Wordpress
Wordpress
Kürzlich hochgeladen
Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024
The Digital Insurer
Automating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps Script
wesley chun
Artificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and Myths
Joaquim Jorge
GenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day Presentation
Michael W. Hawkins
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
UK Journal
Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processors
debabhi2
Developing An App To Navigate The Roads of Brazil
Developing An App To Navigate The Roads of Brazil
V3cube
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
ThousandEyes
Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024
The Digital Insurer
🐬 The future of MySQL is Postgres 🐘
🐬 The future of MySQL is Postgres 🐘
RTylerCroy
A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?
Igalia
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
?#DUbAI#??##{{(☎️+971_581248768%)**%*]'#abortion pills for sale in dubai@
Boost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivity
Principled Technologies
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Drew Madelung
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc
[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf
hans926745
Scaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organization
Radu Cotescu
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
apidays
A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)
Gabriella Davis
Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)
wesley chun
Kürzlich hochgeladen
(20)
Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024
Automating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps Script
Artificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and Myths
GenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day Presentation
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processors
Developing An App To Navigate The Roads of Brazil
Developing An App To Navigate The Roads of Brazil
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024
🐬 The future of MySQL is Postgres 🐘
🐬 The future of MySQL is Postgres 🐘
A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
Boost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivity
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf
Scaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organization
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)
Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)
Augmented Reality in JavaScript
1.
augmented reality.js
San Francisco, 2013.
2.
3.
I’m from brazil
4.
no, I don’t
samba
5.
6.
7.
I ♥ HTML5
8.
html5-pro.com/wormz
9.
I ♥ opensource
10.
browserdiet.com
11.
today we’re
going to talk about augmented reality...
12.
13.
...and how to
integrate different HTML5 APIs
14.
augmented reality
is (or at least augumented reality is everywhere, or it will be... will be) everywhere
15.
used Google Glass before
it was cool
16.
what is augmented reality?
17.
18.
how can you do
it using javascript?
19.
mzl.la/ilyX7k
20.
1. capture webcam
21.
22.
dev.w3.org/2011/webrtc/editor/webrtc.html
23.
24.
STEP 1 Access user's
camera and microphone navigator.getUserMedia({ video: true, audio: true }, onSuccess, onFail);
25.
2. play the captured video
26.
<video>
27.
STEP 2 Play webcam's
content into a video element function onSuccess(stream) { var video = document.querySelector('video'); video.src = window.URL.createObjectURL(stream); video.onloadedmetadata = function(e) { // Ready }; }
28.
3. track a pattern
of pixels
29.
<canvas>
30.
<video> <canvas>
31.
32.
fiducial markers
33.
github.com/kig/JSARToolKit
34.
libspark.org/wiki/saqoosha/FLARToolKit/en
35.
hitl.washington.edu/artoolkit
36.
soundstep.com/blog/experiments/jstracking/
37.
bit.ly/XR0aGH
38.
FIDUCIAL MARKERS bit.ly/124FT3A
39.
40.
<html><head> <script src="../../src/NyAs3Utils.js"></script> <script src="../../src/FLARArrayUtil.js"></script> <script
src="../../src/FLARException.js"></script> <script src="../../src/FLARMat.js"></script> <script src="../../src/FLARRgbPixelReader.js"></script> <script src="../../src/NyARHistogramAnalyzer.js"></script> <script src="../../src/NyARPca2d.js"></script> <script src="../../src/NyARRasterReader.js"></script> <script src="../../src/NyARTypes.js"></script> <script src="../../src/FLARRasterFilter.js"></script> <script src="../../src/FLARTypes.js"></script> <script src="../../src/NyARLabel.js"></script> <script src="../../src/FLARLabeling.js"></script> <script src="../../src/NyARParam.js"></script> <script src="../../src/FLARParam.js"></script> <script src="../../src/NyARRaster.js"></script> <script src="../../src/FLARRaster.js"></script> <script src="../../src/NyARCode.js"></script> <script src="../../src/FLARCode.js"></script> <script src="../../src/NyARMatch.js"></script> <script src="../../src/NyARRasterAnalyzer.js"></script> <script src="../../src/FLARRasterAnalyzer.js"></script> <script src="../../src/NyARRasterFilter.js"></script> <script src="../../src/NyARSquareDetect.js"></script> <script src="../../src/FLARSquareDetect.js"></script> <script src="../../src/NyARTransMat.js"></script> <script src="../../src/FLARTransMat.js"></script>
41.
42.
face detection
43.
RESPONSIVE
TYPOGRAPHY webdesign.maratz.com/lab/responsivetypography
44.
github.com/auduno/headtrackr
45.
HEADTRACKR
TARGETS auduno.github.com/headtrackr/examples/targets.html
46.
47.
48.
@eduardolundgren (Liferay)
49.
trackingjs.com
50.
bit.ly/YVPz3e
51.
TRACKING.JS SINGLE CONTROLLER
bit.ly/ZSZuUd
52.
53.
STEP 1
SINGLE CONTROLLER Imports tracking.js core <script src="tracking.js"></script> Imports tracking.js color module <script src="tracker/color.js"></script>
54.
STEP 2
SINGLE CONTROLLER Gets user's camera and renders it var videoCamera = new tracking .VideoCamera() .render();
55.
STEP 3
SINGLE CONTROLLER Hides video camera and renders a canvas from it videoCamera = videoCamera .hide() .renderVideoCanvas();
56.
STEP 4
SINGLE CONTROLLER Instantiates tracking by magenta color videoCamera.track({ type: 'color', color: 'magenta', onFound: function() {}, onNotFound: function() {} });
57.
STEP 5
SINGLE CONTROLLER Paints with magenta all detected pixels onFound: function(track) { var pixels = track.pixels, ctx = videoCamera.canvas.context; for (var i = 0, len = pixels.length; i < len; i += 2) { ctx.fillStyle = "rgb(255,0,255)"; ctx.fillRect(pixels[i], pixels[i+1], 2, 2); } ctx.fillStyle = "rgb(0,0,0)"; ctx.fillRect(track.x, track.y, 5, 5); }
58.
TRACKING.JS MULTIPLE CONTROLLERS
bit.ly/118nzaL
59.
60.
STEP 1 MULTIPLE CONTROLLERS Gets
user's camera and renders it var videoCamera = new tracking .VideoCamera() .render();
61.
STEP 2 MULTIPLE CONTROLLERS Hides
video camera and renders a canvas from it videoCamera = videoCamera .hide() .renderVideoCanvas();
62.
STEP 3 MULTIPLE CONTROLLERS Instantiates
tracking by magenta color videoCamera.track({ type: 'color', color: 'magenta', onFound: function() {}, onNotFound: function() {} });
63.
STEP 4 MULTIPLE CONTROLLERS Draws
a square around tracked area onFound: function(track) { var size = 60 - track.z; var ctx = videoCamera.canvas.context; ctx.strokeStyle = "rgb(255,0,255)"; ctx.lineWidth = 3; ctx.strokeRect(track.x - size*0.5, track.y - size*0.5, size, size); }
64.
STEP 5 MULTIPLE CONTROLLERS Instantiates
tracking by cyan color videoCamera.track({ type: 'color', color: 'cyan', onFound: function() {}, onNotFound: function() {} });
65.
STEP 6 MULTIPLE CONTROLLERS Draws
a square around tracked area onFound: function(track) { var size = 60 - track.z; var ctx = videoCamera.canvas.context; ctx.strokeStyle = "rgb(0,255,255)"; ctx.lineWidth = 3; ctx.strokeRect(track.x - size*0.5, track.y - size*0.5, size, size); }
66.
TRACKING.JS DRAW SOMETHING
bit.ly/10mIS6h
67.
68.
TRACKING.JS MINECRAFT
bit.ly/XR5vha
69.
70.
71.
TRACKING.JS GLASSES
bit.ly/X6LuGj
72.
IT’S UP TO
YOU!
73.
74.
thanks :) zenorocha.com
Jetzt herunterladen