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.

Web rtc+webaudio


Published on

  • Be the first to comment

Web rtc+webaudio

  1. 1. Web RTC & Web Audio 2012. 6. @erucipe 최승준
  2. 2. The mission of the Audio Working Group, part ofthe Rich Web Client Activity, is to define a client-sidescript API adding more advanced audio capabilitiesthan are currently offered by audio elements. TheAPI will support the features required by advancedinteractive applications including the ability toprocess and synthesize audio streams directly inscript.The HTML5 specification introduces the <audio>and <video> media elements, including an API toplay back prerecorded audio and video files and toget limited information about the media, such asduration. The Audio Working Group will build uponand expand that basic functionality.
  3. 3. background
  4. 4. 2010 2011 2012 W3C Audio W3C Audio Incubator Group Working Group 12 May 2010 ~ 28 March 2012 25 March 2011 ~ ( Chromium ) W3C MIDI Device Web Audio API Web Audio API Communication API 1 June 2010 ~ 18 July 2011 18 July 2011 ~ MediaStream Mozilla Processing API Audio Data API trunk/samples/audio/index.html 14 May 2010 ~ Mozilla Google Firefox 4 Chrome 14 22 March 2011 16 September 2011@humphd 2010-08-26 nightly builds 2011-01-31 nightly builds May 2010 ~ December 2011 March 2011 ~
  5. 5. detail
  6. 6. WebGL Camp 3, June 2011
  7. 7. var context = new AudioContext();var playSound = function { var source = context.createBufferSource(); source.buffer = dogBarkingBuffer; source.connect(context.destination); source.noteOn(0);};
  8. 8. demo
  9. 9. use cases
  10. 10. UC 1 Video ChatUC 2 HTML5 game with audio effects, musicUC 3 Online music production toolUC 4 Online radio broadcastUC 5 writing music on the webUC 6 wavetable synthesis of a virtual music instrumentUC 7 Audio / Music VisualizationUC 8 UI/DOM SoundsUC 9 Language learningUC10 Podcast on a flightUC11 DJ music at 125 BPMUC12 Soundtrack and sound effects in a video editing toolUC13 Web-based guitar practice serviceUC14 User Control of AudioUC15 Video commentary
  11. 11. so what ?
  12. 12. 위 이미지는 Web Audio와 직접적인 관련이 없음
  13. 13. MIDI Device Communication APIThe MIDI API specification defines ameans for web developers to enumerate,manipulate and access MIDI devices.Having an API for MIDI gives a means tomake various applications using existingsoftware and hardware synths, as well aslight systems and other mechanicalapparatus controlled by MIDI, along witha method of communication with existingDAW (Digital Audio Workstation), trackersand other music software on the userscomputer.
  14. 14. 위 이미지는 Web Audio와 직접적인 관련이 없음
  15. 15. advanced interactive app MIDI Web RTC
  16. 16. MediaStream Processing API W3C Working Group Note 31 May 2012
  17. 17. background
  18. 18. The mission of the Web Real-Time CommunicationsWorking Group, part of the Ubiquitous WebApplications Activity, is to define client-side APIs toenable Real-Time Communications in Webbrowsers.These APIs should enable buildingapplications that can be run inside a browser,requiring no extra downloads or plugins, that allowcommunication between parties using audio, videoand supplementary real-time communication,without having to use intervening servers (unlessneeded for firewall traversal, or for providingintermediary services).
  19. 19. 茫茫大海
  20. 20. focus
  21. 21. media capture API a.k.a getUserMedia
  22. 22. implementations
  23. 23. ericsson operagooglemozilla
  24. 24. DemosHere are a couple of demo sites. Most of them were sent to us via thediscuss-webrtc list. Please remember that the same disclaimer as aboveapplies:Justin Uberti (Chrome-webrtc team member) has sent in a App Engine based1:1 video calling app. sourcecode: Uberti (Chrome-webrtc team member) has sent in a App Engine basedface detection app Neave sent in a great video effectsapp. Miernicki was officially the first to send in ademo: Bidelman sent in an additional photo effects demos: another lets have fun with WebGL sent in by JéromeÉtienne: http://webglmeeting.appspot.comAn HTML5 SIP client you find another demo app, please send it to /the discuss list or our Google+ Page. We will try to put it up!
  25. 25. demo
  26. 26. if (navigator.webkitGetUserMedia) { var video = document.createElement(video); var gotStream = function(stream) { video.src = webkitURL.createObjectURL(stream); video.onerror = function () { stream.stop(); console.log(camera error); }; }; var noStream = function() { console.log(no camera available); }; navigator.webkitGetUserMedia(video, gotStream, noStream); document.body.appendChild(video); video.autoplay = true;} else { console.log(no native camera support available);}
  27. 27. P2P
  28. 28. AR
  29. 29. Let’s Put It All Together?
  30. 30. security issues
  31. 31. conclusion
  32. 32. Web RTC & Web Audio 2012. 6. @erucipe 최승준