An introduction to the Augmented Web and how WebRTC is a key to enabling this new Sensor Driven Real Time Web.

1. https://buildAR.com
WebRTC opens the door to
The Augmented Web

2. Who am I?
Rob Manson @nambor
CEO of MOB Labs the creators of buildAR.com
Chair of the W3C's Augmented Web Community Group
Invited Expert with the ISO, W3C & the Khronos Group
Co-Founder of ARStandards.org
Author of “Getting started with WebRTC” (available July)
https://buildAR.com

3. ARStandards Workshop in Seoul 2010
Patterns of Interest Proposal – Rob Manson
https://buildAR.com

4. Test your device at theAWEsomeWEB.com
https://buildAR.com

5. https://buildAR.com

6. https://buildAR.com
Current local image processing pipeline
using the Media Capture & Streams API
1. Setup <video> element in the DOM
a. declaratively then via getElementById or similar
b. createElement(“video”) then appendChild()
2. Access the camera
a. getUserMedia()
NOTE: Currently can only select the default camera
3. Pipe camera stream into <video>
a. video.src = stream
4. Setup <canvas> element in the DOM
a. declaratively then via getElementById or similar
b. createElement(“canvas”) then appendChild()
5. Get 2D drawing context
a. canvas.getContext('2d');
6. Draw <video> frame onto <canvas>
a. canvas.drawImage(video, top, left, width, height);
7. Get RGBA Uint8ClampedArray of the pixels
a. context.getImageData(top, left, width, height).data;
8. Burn CPU (not GPU) cycles
a. for (blah) { for (blah) { … } … }
NOTE: May also integrate other sensor data here
9. Render results
a. using HTML/JS/CSS
b. using another <canvas> and drawImage()
c. using WebGL
d. a combination of all

7. https://buildAR.com
JSARToolkit demo

8. https://buildAR.com
FAST feature detection demo

9. https://buildAR.com
What's in the near future?
Integrating WebRTC and Visual Search
Using WebGL/GLSL to utilise GPU parallelism
Khronos Group's OpenVX
Khronos Group's Camera Working Group
Lots more demos to share! 8)

10. https://buildAR.com
You should join the W3C's
Augmented Web Community Group