1. Web RTC & Web Audio
2012. 6.
@erucipe
최승준

5. The mission of the Audio Working Group, part of
the Rich Web Client Activity, is to define a client-side
script API adding more advanced audio capabilities
than are currently offered by audio elements. The
API will support the features required by advanced
interactive applications including the ability to
process and synthesize audio streams directly in
script.
The HTML5 specification introduces the <audio>
and <video> media elements, including an API to
play back prerecorded audio and video files and to
get limited information about the media, such as
duration. The Audio Working Group will build upon
and expand that basic functionality.

6. background

7. 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

10. detail

11. WebGL Camp 3, June 2011
http://www.youtube.com/watch?feature=player_detailpage&v=6YYFsmjCKX4#t=873s

13. var context = new AudioContext();
var playSound = function {
var source = context.createBufferSource();
source.buffer = dogBarkingBuffer;
source.connect(context.destination);
source.noteOn(0);
};

14. demo

16. use cases
http://www.w3.org/2011/audio/wiki/Use_Cases_and_Requirements

18. UC 1 Video Chat
UC 2 HTML5 game with audio effects, music
UC 3 Online music production tool
UC 4 Online radio broadcast
UC 5 writing music on the web
UC 6 wavetable synthesis of a virtual music instrument
UC 7 Audio / Music Visualization
UC 8 UI/DOM Sounds
UC 9 Language learning
UC10 Podcast on a flight
UC11 DJ music at 125 BPM
UC12 Soundtrack and sound effects in a video editing tool
UC13 Web-based guitar practice service
UC14 User Control of Audio
UC15 Video commentary

20. so what ?

21. 위 이미지는 Web Audio와 직접적인 관련이 없음

22. MIDI Device Communication API
The MIDI API specification defines a
means for web developers to enumerate,
manipulate and access MIDI devices.
Having an API for MIDI gives a means to
make various applications using existing
software and hardware synths, as well as
light systems and other mechanical
apparatus controlled by MIDI, along with
a method of communication with existing
DAW (Digital Audio Workstation), trackers
and other music software on the user's
computer.
https://dvcs.w3.org/hg/audio/raw-file/tip/midi/specification.html

23. 위 이미지는 Web Audio와 직접적인 관련이 없음

24. advanced interactive app
MIDI
Web RTC

25. MediaStream Processing API
W3C Working Group Note 31 May 2012

29. background

34. The mission of the Web Real-Time Communications
Working Group, part of the Ubiquitous Web
Applications Activity, is to define client-side APIs to
enable Real-Time Communications in Web
browsers.These APIs should enable building
applications that can be run inside a browser,
requiring no extra downloads or plugins, that allow
communication between parties using audio, video
and supplementary real-time communication,
without having to use intervening servers (unless
needed for firewall traversal, or for providing
intermediary services).

37. 茫茫大海

41. focus

42. media capture API
a.k.a
getUserMedia

45. implementations

46. ericsson
opera
google
mozilla

53. Demos
Here are a couple of demo sites. Most of them were sent to us via the
discuss-webrtc list. Please remember that the same disclaimer as above
applies:
Justin Uberti (Chrome-webrtc team member) has sent in a App Engine based
1:1 video calling app.http://apprtc.appspot.com/ source
code: http://code.google.com/p/webrtc-
samples/source/browse/trunk/apprtc/
Justin Uberti (Chrome-webrtc team member) has sent in a App Engine based
face detection apphttp://apprtc.appspot.com/html/face.html
Paul Neave sent in a great video effects
app. http://neave.com/webcam/html5/
Greg Miernicki was officially the first to send in a
demo: http://miernicki.com/cam.html
Eric Bidelman sent in an additional photo effects demos: http://html5-
demos.appspot.com/static/getusermedia/photobooth.html
And another let's have fun with WebGL sent in by Jérome
Étienne: http://webglmeeting.appspot.com
An HTML5 SIP client http://www.sipml5.org/call.htm
If 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!

57. demo

58. 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');
}

59. P2P

60. AR
http://www.html5rocks.com/en/tutorials/webgl/jsartoolkit_webrtc
http://www.html5rocks.com/en/tutorials/webgl/jsartoolkit_webrtc/AR_mediaStream_three.html

62. Let’s Put It All Together?

63. security issues
https://wiki.mozilla.org/Security/Discussions/WebRTC

64. conclusion

66. Web RTC & Web Audio
2012. 6.
@erucipe
최승준