Your SlideShare is downloading. ×
WebRTC opens the door to the Augmented Web
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

WebRTC opens the door to the Augmented Web

956
views

Published on

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

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

0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
956
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
4
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. https://buildAR.comWebRTC opens the door toThe Augmented Web
  • 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)https://buildAR.com
  • 3. ARStandards Workshop in Seoul 2010Patterns of Interest Proposal – Rob Mansonhttps://buildAR.com
  • 4. Test your device at theAWEsomeWEB.comhttps://buildAR.com
  • 5. https://buildAR.com
  • 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. https://buildAR.comJSARToolkit demo
  • 8. https://buildAR.comFAST feature detection demo
  • 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. https://buildAR.comYou should join the W3CsAugmented Web Community Group