Web RTC & Web Audio                 2012. 6.                 @erucipe                  최승준
The mission of the Audio Working Group, part ofthe Rich Web Client Activity, is to define a client-sidescript API adding m...
background
2010                                                              2011                                                    ...
detail
WebGL Camp 3, June 2011http://www.youtube.com/watch?feature=player_detailpage&v=6YYFsmjCKX4#t=873s
var context = new AudioContext();var playSound = function {   var source = context.createBufferSource();   source.buffer =...
demo
use caseshttp://www.w3.org/2011/audio/wiki/Use_Cases_and_Requirements
UC 1   Video ChatUC 2   HTML5 game with audio effects, musicUC 3   Online music production toolUC 4   Online radio broadca...
so what ?
위 이미지는 Web Audio와 직접적인 관련이 없음
MIDI Device Communication APIThe MIDI API specification defines ameans for web developers to enumerate,manipulate and acce...
위 이미지는 Web Audio와 직접적인 관련이 없음
advanced interactive app         MIDI       Web RTC
MediaStream Processing API     W3C Working Group Note 31 May 2012
background
The mission of the Web Real-Time CommunicationsWorking Group, part of the Ubiquitous WebApplications Activity, is to defin...
茫茫大海
focus
media capture API      a.k.a getUserMedia
implementations
ericsson operagooglemozilla
DemosHere are a couple of demo sites. Most of them were sent to us via thediscuss-webrtc list. Please remember that the sa...
demo
if (navigator.webkitGetUserMedia) {  var video = document.createElement(video); var gotStream = function(stream) {    vide...
P2P
AR            http://www.html5rocks.com/en/tutorials/webgl/jsartoolkit_webrtchttp://www.html5rocks.com/en/tutorials/webgl/...
Let’s Put It All Together?
security issues   https://wiki.mozilla.org/Security/Discussions/WebRTC
conclusion
Web RTC & Web Audio                 2012. 6.                 @erucipe                  최승준
Web rtc+webaudio
Web rtc+webaudio
Web rtc+webaudio
Web rtc+webaudio
Web rtc+webaudio
Web rtc+webaudio
Web rtc+webaudio
Web rtc+webaudio
Web rtc+webaudio
Web rtc+webaudio
Web rtc+webaudio
Web rtc+webaudio
Web rtc+webaudio
Web rtc+webaudio
Web rtc+webaudio
Web rtc+webaudio
Web rtc+webaudio
Web rtc+webaudio
Web rtc+webaudio
Web rtc+webaudio
Web rtc+webaudio
Web rtc+webaudio
Web rtc+webaudio
Web rtc+webaudio
Web rtc+webaudio
Web rtc+webaudio
Web rtc+webaudio
Web rtc+webaudio
Web rtc+webaudio
Web rtc+webaudio
Web rtc+webaudio
Web rtc+webaudio
Web rtc+webaudio
Web rtc+webaudio
Upcoming SlideShare
Loading in...5
×

Web rtc+webaudio

1,785

Published on

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

No Downloads
Views
Total Views
1,785
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
77
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

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 ~ http://www.w3.org/2005/Incubator/audio http://www.w3.org/2011/audio crogers@google.com ( 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 http://chromium.googlecode.com/svn/ Audio Data API trunk/samples/audio/index.html http://www.w3.org/TR/webaudio 14 May 2010 ~ Mozilla Google https://wiki.mozilla.org/Audio_Data_API Firefox 4 Chrome 14 22 March 2011 16 September 2011@humphd 2010-08-26 nightly builds 2011-01-31 nightly builds public-xg-audio@w3.org public-audio@w3.org May 2010 ~ December 2011 March 2011 ~ http://lists.w3.org/Archives/Public/public-xg-audio http://lists.w3.org/Archives/Public/public-audio
  5. 5. detail
  6. 6. WebGL Camp 3, June 2011http://www.youtube.com/watch?feature=player_detailpage&v=6YYFsmjCKX4#t=873s
  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 caseshttp://www.w3.org/2011/audio/wiki/Use_Cases_and_Requirements
  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. https://dvcs.w3.org/hg/audio/raw-file/tip/midi/specification.html
  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.http://apprtc.appspot.com/ sourcecode: http://code.google.com/p/webrtc-samples/source/browse/trunk/apprtc/Justin Uberti (Chrome-webrtc team member) has sent in a App Engine basedface detection apphttp://apprtc.appspot.com/html/face.htmlPaul Neave sent in a great video effectsapp. http://neave.com/webcam/html5/Greg Miernicki was officially the first to send in ademo: http://miernicki.com/cam.htmlEric Bidelman sent in an additional photo effects demos: http://html5-demos.appspot.com/static/getusermedia/photobooth.htmlAnd another lets have fun with WebGL sent in by JéromeÉtienne: http://webglmeeting.appspot.comAn HTML5 SIP client http://www.sipml5.org/call.htmIf you find another demo app, please send it to sergel@webrtc.org /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 http://www.html5rocks.com/en/tutorials/webgl/jsartoolkit_webrtchttp://www.html5rocks.com/en/tutorials/webgl/jsartoolkit_webrtc/AR_mediaStream_three.html
  29. 29. Let’s Put It All Together?
  30. 30. security issues https://wiki.mozilla.org/Security/Discussions/WebRTC
  31. 31. conclusion
  32. 32. Web RTC & Web Audio 2012. 6. @erucipe 최승준
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×