Soumettre la recherche
Mettre en ligne
Augmented Reality JavaScript Library Tracking.js
•
1 j'aime
•
1,060 vues
Titre amélioré par l'IA
Zeno Rocha
Suivre
Presented at HTML5 Dev Conf - San Francisco, 2013.
Lire moins
Lire la suite
Technologie
Signaler
Partager
Signaler
Partager
1 sur 74
Télécharger maintenant
Télécharger pour lire hors ligne
Recommandé
Портируем существующее 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
Recommandé
Портируем существующее 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
Contenu connexe
Tendances
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
Tendances
(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
Similaire à Augmented Reality JavaScript Library Tracking.js
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
Similaire à Augmented Reality JavaScript Library Tracking.js
(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
Plus de 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
Plus de 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
Dernier
The State of Passkeys with FIDO Alliance.pptx
The State of Passkeys with FIDO Alliance.pptx
LoriGlavin3
Sample pptx for embedding into website for demo
Sample pptx for embedding into website for demo
HarshalMandlekar2
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
ThousandEyes
Assure Ecommerce and Retail Operations Uptime with ThousandEyes
Assure Ecommerce and Retail Operations Uptime with ThousandEyes
ThousandEyes
Connecting the Dots for Information Discovery.pdf
Connecting the Dots for Information Discovery.pdf
Neo4j
Generative AI for Technical Writer or Information Developers
Generative AI for Technical Writer or Information Developers
Raghuram Pandurangan
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptx
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptx
LoriGlavin3
Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...
Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...
Alkin Tezuysal
Genislab builds better products and faster go-to-market with Lean project man...
Genislab builds better products and faster go-to-market with Lean project man...
Farhan Tariq
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...
Wes McKinney
Testing tools and AI - ideas what to try with some tool examples
Testing tools and AI - ideas what to try with some tool examples
Kari Kakkonen
Generative Artificial Intelligence: How generative AI works.pdf
Generative Artificial Intelligence: How generative AI works.pdf
Ingrid Airi González
[Webinar] SpiraTest - Setting New Standards in Quality Assurance
[Webinar] SpiraTest - Setting New Standards in Quality Assurance
Inflectra
A Journey Into the Emotions of Software Developers
A Journey Into the Emotions of Software Developers
Nicole Novielli
DevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platforms
Sergiu Bodiu
Scale your database traffic with Read & Write split using MySQL Router
Scale your database traffic with Read & Write split using MySQL Router
Mydbops
Take control of your SAP testing with UiPath Test Suite
Take control of your SAP testing with UiPath Test Suite
DianaGray10
Emixa Mendix Meetup 11 April 2024 about Mendix Native development
Emixa Mendix Meetup 11 April 2024 about Mendix Native development
Pim van der Noll
UiPath Community: Communication Mining from Zero to Hero
UiPath Community: Communication Mining from Zero to Hero
UiPathCommunity
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
LoriGlavin3
Dernier
(20)
The State of Passkeys with FIDO Alliance.pptx
The State of Passkeys with FIDO Alliance.pptx
Sample pptx for embedding into website for demo
Sample pptx for embedding into website for demo
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
Assure Ecommerce and Retail Operations Uptime with ThousandEyes
Assure Ecommerce and Retail Operations Uptime with ThousandEyes
Connecting the Dots for Information Discovery.pdf
Connecting the Dots for Information Discovery.pdf
Generative AI for Technical Writer or Information Developers
Generative AI for Technical Writer or Information Developers
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptx
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptx
Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...
Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...
Genislab builds better products and faster go-to-market with Lean project man...
Genislab builds better products and faster go-to-market with Lean project man...
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...
Testing tools and AI - ideas what to try with some tool examples
Testing tools and AI - ideas what to try with some tool examples
Generative Artificial Intelligence: How generative AI works.pdf
Generative Artificial Intelligence: How generative AI works.pdf
[Webinar] SpiraTest - Setting New Standards in Quality Assurance
[Webinar] SpiraTest - Setting New Standards in Quality Assurance
A Journey Into the Emotions of Software Developers
A Journey Into the Emotions of Software Developers
DevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platforms
Scale your database traffic with Read & Write split using MySQL Router
Scale your database traffic with Read & Write split using MySQL Router
Take control of your SAP testing with UiPath Test Suite
Take control of your SAP testing with UiPath Test Suite
Emixa Mendix Meetup 11 April 2024 about Mendix Native development
Emixa Mendix Meetup 11 April 2024 about Mendix Native development
UiPath Community: Communication Mining from Zero to Hero
UiPath Community: Communication Mining from Zero to Hero
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
Augmented Reality JavaScript Library Tracking.js
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
Télécharger maintenant