Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

WebRTC opens the door to the Augmented Web


Published on

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

Published in: Technology, Design
  • Be the first to comment

WebRTC opens the door to the Augmented Web

  1. 1. https://buildAR.comWebRTC opens the door toThe Augmented Web
  2. 2. Who am I?Rob Manson @namborCEO of MOB Labs the creators of buildAR.comChair of the W3Cs Augmented Web Community GroupInvited Expert with the ISO, W3C & the Khronos GroupCo-Founder of ARStandards.orgAuthor of “Getting started with WebRTC” (available July)
  3. 3. ARStandards Workshop in Seoul 2010Patterns of Interest Proposal – Rob Manson
  4. 4. Test your device at theAWEsomeWEB.com
  5. 5.
  6. 6. https://buildAR.comCurrent local image processing pipelineusing the Media Capture & Streams API1. Setup <video> element in the DOMa. declaratively then via getElementById or similarb. createElement(“video”) then appendChild()2. Access the cameraa. getUserMedia()NOTE: Currently can only select the default camera3. Pipe camera stream into <video>a. video.src = stream4. Setup <canvas> element in the DOMa. declaratively then via getElementById or similarb. createElement(“canvas”) then appendChild()5. Get 2D drawing contexta. canvas.getContext(2d);6. Draw <video> frame onto <canvas>a. canvas.drawImage(video, top, left, width, height);7. Get RGBA Uint8ClampedArray of the pixelsa. context.getImageData(top, left, width, height).data;8. Burn CPU (not GPU) cyclesa. for (blah) { for (blah) { … } … }NOTE: May also integrate other sensor data here9. Render resultsa. using HTML/JS/CSSb. using another <canvas> and drawImage()c. using WebGLd. a combination of all
  7. 7. https://buildAR.comJSARToolkit demo
  8. 8. https://buildAR.comFAST feature detection demo
  9. 9. https://buildAR.comWhats in the near future?Integrating WebRTC and Visual SearchUsing WebGL/GLSL to utilise GPU parallelismKhronos Groups OpenVXKhronos Groups Camera Working GroupLots more demos to share! 8)
  10. 10. https://buildAR.comYou should join the W3CsAugmented Web Community Group