Augmented Reality in JavaScript

1.

augmented reality.js San Francisco, 2013.

2.

None

3.

I’m from brazil

4.

no, I don’t samba

5.

None

6.

None

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.

None

13.

...and how to integrate different HTML5 APIs

14.

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

15.

before it was cool used Google Glass

16.

what is augmented reality?

17.

None

18.

how can you do it using javascript?

19.

mzl.la/ilyX7k

20.

1. capture webcam

21.

None

22.

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

23.

None

24.

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

25.

2. play the captured video

26.

<video>

27.

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

28.

3. track a pattern of pixels

29.

<canvas>

30.

<video> <canvas>

31.

None

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.

bit.ly/124FT3A FIDUCIAL MARKERS

39.

None

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.

None

42.

face detection

43.

webdesign.maratz.com/lab/responsivetypography RESPONSIVE TYPOGRAPHY

44.

github.com/auduno/headtrackr

45.

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

46.

None

47.

None

48.

@eduardolundgren (Liferay)

49.

trackingjs.com

50.

bit.ly/YVPz3e

51.

bit.ly/ZSZuUd TRACKING.JS SINGLE CONTROLLER

52.

None

53.

Imports tracking.js core Imports tracking.js color module <script src="tracker/color.js"></script> <script
src="tracking.js"></script> STEP 1 SINGLE CONTROLLER

54.

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

55.

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

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.

bit.ly/118nzaL TRACKING.JS MULTIPLE CONTROLLERS

59.

None

60.

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

61.

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

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.

bit.ly/10mIS6h TRACKING.JS DRAW SOMETHING

67.

None

68.

bit.ly/XR5vha TRACKING.JS MINECRAFT

69.

None

70.

None

71.

bit.ly/X6LuGj TRACKING.JS GLASSES

72.

IT’S UP TO YOU!

73.

None

74.

thanks :) zenorocha.com

Augmented Reality in JavaScript

Augmented Reality in JavaScript

Want more?

Transcript