1. Lets begin WebRTC!2013/03/22Web#18Toru Yoshikawa (@yoshikawa_t)

2. Who? / Toru Yoshikawa@yoshikawa_t Google Developer Experts (Chrome) html5j.org/HTML5 jQuery Mobile Sublime Text 2 Japan Users Group allWeb/jQuery Mobile Blog: http://d.hatena.ne.jp/pikotea/ 3. Recently hot news 4. Hello Chrome, its Firefox calling! https://hacks.mozilla.org/2013/02/hello-chrome-its-refox-calling/ http://blog.chromium.org/2013/02/hello-refox-this-is-chrome-calling.html 5. HTML5Chrome Beta for AndroidWebRTChttp://d.hatena.ne.jp/jovi0608/20130307/1362645489 6. ResourcesCommunity http://www.webrtc.org/Sample Source https://code.google.com/p/webrtc-samples/source/ browse/trunk/apprtc/Interoperability (Chrome and Firefox) https://code.google.com/p/webrtc-samples/source/ browse/trunk/apprtc/js/adapter.js 7. SpecicationsW3C WebRTC 1.0: Real-time Communication Between Browsers (http:// www.w3.org/TR/webrtc/) Media Capture and Streams (http://www.w3.org/TR/mediacapture-streams/)IETF Web Real-Time Communication (WebRTC): Media Transport and Use of RTP (http://tools.ietf.org/html/draft-ietf-rtcweb-rtp-usage) WebRTC Data Channel Protocol (http://tools.ietf.org/html/draft-jesup-rtcweb- data-protocol) Javascript Session Establishment Protocol (http://tools.ietf.org/html/draft-ietf- rtcweb-jsep) 8. CommunicationsW3C MLhttp://lists.w3.org/Archives/Public/public-webrtc/IETF MLhttp://www.ietf.org/mail-archive/web/rtcweb/current/maillist.html 9. Architecture 10. Network 11. STUNSimple Traversal of UDP through NATsNATSTUNUDPNATIPIP 12. NAT 1TCP/UDP1PC UDP 13. ICEInteractive Connectivity EstablishmentSTUNTURNNATSTUNTURNSTUNNAT3NATTURN 14. TURNTraversal Using Relay NATNATNATTURN 15. Sequence 16. 17. getUserMedianavigator.getUserMedia({audio: true, video:true}, success);function success(stream) {videoElement.src = URL.createObjectURL(stream);} 18. RTCPeerConnectionPeerConnection00DeprecatedFirefoxnightlyabout:congmedia.peerconnection.enabledtrue 19. RTCPeerConnectionvar pc = new RTCPeerConnection({"iceServers": [{"url": "STUN"},{"url": "TURN"}]}); stun:stun.l.google.com:19302 stun:23.21.150.121 20. addICECandidatepc.onicecandidate = function(e) { // ICE sendMessage(JSON.stringify({ "candidate": e.candidate }));};// ICEfunction receiveMessage(message){ var candidate = new RTCIceCandidate({ "candidate": message.candidate }); pc.addICECandidate(candidate);} 21. addStream (local)creaeOer// getUserMediapc.addStream(localStream);// pc.createOffer(function(description){pc.setLocalDescription(description);// Send OffersendMessage(JSON.stringify({"sdp": description}));}); 22. createAnswerfunction reciveMessage(message) {// RTCPeerConnectionpc.setRemoteDescription(newRTCSessionDescription(message.sdp), function(){if (pc.remoteDescription.type == "offer") {pc.createAnswer(function(description){pc.setLocalDescription(description);// Send AnswersendMessage(JSON.stringify({"sdp": description}));});}});} 23. addStrem (remote)pc.onaddstream = function(e) {video.src = URL.createObjectURL(e.stream);} 24. Data Channelvar channel = pc.createDataChannel("labelName");channel.onopen = function(e) {// }channel.onmessage = function(e) {// console.log(e.data);}channel.onclose = function(e) {// }// channel.send(message); 25. Data ChannelP2PAPIWebSocketChrome 27 --enable-data-channelsCanary Buildv27 26. DTMF APIDual-Tone Multi-FrequencyWebRTCWebkit (http://trac.webkit.org/changeset/141984) 27. ArticlesTenHandsChromeWebRTC (http://jp.techcrunch.com/archives/20130205real-time-communications-platform-tenhands-now-uses-webrtc-on-chrome-for-plugin-free-video-chats/)WebRTCSIPSDKPlivoWeb (http://jp.techcrunch.com/archives/20130115plivo-launches-the-rst-sdk-that-lets-developers-connect-webrtc-and-sip/) 28. Microsoft WebRTC ProposalMicrosoft pushes ahead with its own take on WebRTC (http://gigaom.com/2013/01/17/microsoft-cu-webrtc-prototype/)Customizable, Ubiquitous Real-Time Communication (http://html5labs.interoperabilitybridges.com/cu-rtc-web/cu-rtc-web.htm) 29. Thank you!! (@yoshikawa_t)