Augmented Reality in JavaScript

Slide 1

Slide 1 text

augmented reality.js San Francisco, 2013.

Slide 2

Slide 2 text

No content

Slide 3

Slide 3 text

I’m from brazil

Slide 4

Slide 4 text

no, I don’t samba

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

I ♥ HTML5

Slide 8

Slide 8 text

html5-pro.com/wormz

Slide 9

Slide 9 text

I ♥ opensource

Slide 10

Slide 10 text

browserdiet.com

Slide 11

Slide 11 text

today we’re going to talk about augmented reality...

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

...and how to integrate different HTML5 APIs

Slide 14

Slide 14 text

augumented reality is everywhere, or it will be... augmented reality is (or at least will be) everywhere

Slide 15

Slide 15 text

before it was cool used Google Glass

Slide 16

Slide 16 text

what is augmented reality?

Slide 17

Slide 17 text

No content

Slide 18

Slide 18 text

how can you do it using javascript?

Slide 19

Slide 19 text

mzl.la/ilyX7k

Slide 20

Slide 20 text

1. capture webcam

Slide 21

Slide 21 text

No content

Slide 22

Slide 22 text

dev.w3.org/2011/webrtc/editor/webrtc.html

Slide 23

Slide 23 text

No content

Slide 24

Slide 24 text

Access user's camera and microphone navigator.getUserMedia({ video: true, audio: true }, onSuccess, onFail); STEP 1

Slide 25

Slide 25 text

2. play the captured video

Slide 26

Slide 26 text

Slide 27

Slide 27 text

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 }; } STEP 2

Slide 28

Slide 28 text

3. track a pattern of pixels

Slide 29

Slide 29 text

Slide 30

Slide 30 text

Slide 31

Slide 31 text

No content

Slide 32

Slide 32 text

fiducial markers

Slide 33

Slide 33 text

github.com/kig/JSARToolKit

Slide 34

Slide 34 text

libspark.org/wiki/saqoosha/FLARToolKit/en

Slide 35

Slide 35 text

hitl.washington.edu/artoolkit

Slide 36

Slide 36 text

soundstep.com/blog/experiments/jstracking/

Slide 37

Slide 37 text

bit.ly/XR0aGH

Slide 38

Slide 38 text

bit.ly/124FT3A FIDUCIAL MARKERS

Slide 39

Slide 39 text

No content

Slide 40

Slide 40 text

Slide 41

Slide 41 text

No content

Slide 42

Slide 42 text

face detection

Slide 43

Slide 43 text

webdesign.maratz.com/lab/responsivetypography RESPONSIVE TYPOGRAPHY

Slide 44

Slide 44 text

github.com/auduno/headtrackr

Slide 45

Slide 45 text

auduno.github.com/headtrackr/examples/targets.html HEADTRACKR TARGETS

Slide 46

Slide 46 text

No content

Slide 47

Slide 47 text

No content

Slide 48

Slide 48 text

@eduardolundgren (Liferay)

Slide 49

Slide 49 text

trackingjs.com

Slide 50

Slide 50 text

bit.ly/YVPz3e

Slide 51

Slide 51 text

bit.ly/ZSZuUd TRACKING.JS SINGLE CONTROLLER

Slide 52

Slide 52 text

No content

Slide 53

Slide 53 text

Imports tracking.js core Imports tracking.js color module STEP 1 SINGLE CONTROLLER

Slide 54

Slide 54 text

Gets user's camera and renders it var videoCamera = new tracking .VideoCamera() .render(); STEP 2 SINGLE CONTROLLER

Slide 55

Slide 55 text

Hides video camera and renders a canvas from it videoCamera = videoCamera .hide() .renderVideoCanvas(); STEP 3 SINGLE CONTROLLER

Slide 56

Slide 56 text

STEP 4 SINGLE CONTROLLER Instantiates tracking by magenta color videoCamera.track({ type: 'color', color: 'magenta', onFound: function() {}, onNotFound: function() {} });

Slide 57

Slide 57 text

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); }

Slide 58

Slide 58 text

bit.ly/118nzaL TRACKING.JS MULTIPLE CONTROLLERS

Slide 59

Slide 59 text

No content

Slide 60

Slide 60 text

Gets user's camera and renders it var videoCamera = new tracking .VideoCamera() .render(); STEP 1 MULTIPLE CONTROLLERS

Slide 61

Slide 61 text

Hides video camera and renders a canvas from it videoCamera = videoCamera .hide() .renderVideoCanvas(); STEP 2 MULTIPLE CONTROLLERS

Slide 62

Slide 62 text

STEP 3 MULTIPLE CONTROLLERS Instantiates tracking by magenta color videoCamera.track({ type: 'color', color: 'magenta', onFound: function() {}, onNotFound: function() {} });

Slide 63

Slide 63 text

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); }

Slide 64

Slide 64 text

STEP 5 MULTIPLE CONTROLLERS Instantiates tracking by cyan color videoCamera.track({ type: 'color', color: 'cyan', onFound: function() {}, onNotFound: function() {} });

Slide 65

Slide 65 text

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); }