Let's begin WebRTC
Upcoming SlideShare
Loading in...5
×
 

Let's begin WebRTC

on

  • 4,349 views

Web先端技術味見部#18で使った説明資料です。

Web先端技術味見部#18で使った説明資料です。

Statistics

Views

Total Views
4,349
Views on SlideShare
4,318
Embed Views
31

Actions

Likes
13
Downloads
39
Comments
0

1 Embed 31

https://twitter.com 31

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Let's begin WebRTC Let's begin WebRTC Presentation Transcript

  • Lets  begin  WebRTC! 2013/03/22 Web先端技術味⾒見見部#18 Toru  Yoshikawa  (@yoshikawa_̲t)
  • 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/
  • Recently  hot  news
  • Hello  Chrome,  itʼ’s  Firefox  calling! https://hacks.mozilla.org/2013/02/hello-‐‑‒chrome-‐‑‒its-‐‑‒firefox-‐‑‒calling/ http://blog.chromium.org/2013/02/hello-‐‑‒firefox-‐‑‒this-‐‑‒is-‐‑‒chrome-‐‑‒calling.html
  • HTML5でテレビ電話、Chrome  Beta  for  AndroidでWebRTCを試す http://d.hatena.ne.jp/jovi0608/20130307/1362645489
  • 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
  • SpecificationsW3C 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)
  • CommunicationsW3C  ML http://lists.w3.org/Archives/Public/public-‐‑‒webrtc/IETF  ML http://www.ietf.org/mail-‐‑‒archive/web/rtcweb/current/maillist.html
  • Architecture
  • Network
  • STUNSimple  Traversal  of  UDP  through  NATsNAT越えの⽅方法のひとつ通信するホストがSTUNサーバーにUDP接続を⾏行行い、NATが割り当てたグローバルIPアドレスとポート番号を取得する取得したグローバルIPアドレスとポート番号を通信するホスト間で交換する
  • NATの種類フルコーン型 1つのTCP/UDPポートを1台のPCに割り当て制限コーン型 内部ホストがパケット送信した外部ホストのみと通信可能(UDPホール パンチングなどで対応)ポート制限コーン型 制限コーン型には、さらにポートの制限を加えたもの対称型 外部ホストごとに別々のアドレス変換テーブルを持つ
  • ICEInteractive  Connectivity  EstablishmentSTUNとTURNなどのNAT越えの⼿手順をまとめたものSTUNで対応できないホストには、TURNを利利⽤用するSTUNで対応できるNATは、フルコーン型、制限コーン型、ポート制限コーン型の3つ対称型、多段NATなどの場合は、TURNを利利⽤用する
  • TURNTraversal  Using  Relay  NATNAT越えの⽅方法のひとつ対称型や多段NATにも対応できる要は、すべての通信をTURNを経由して⾏行行うので、速度度的なメリットはほとんどないサーバー的にも⾼高負荷・⾼高コスト
  • Sequence
  • サンプルコード
  • getUserMedianavigator.getUserMedia({audio: true, video:true}, success);function success(stream) { videoElement.src = URL.createObjectURL(stream);}
  • RTCPeerConnectionPeerConnection00は、Deprecatedなので利利⽤用しないようにFirefoxは、nightly以外は、about:configでmedia.peerconnection.enabledをtrueに設定する
  • RTCPeerConnection インスタンスの作成var pc = new RTCPeerConnection({ "iceServers": [ {"url": "STUNサーバーのアドレス"}, {"url": "TURNサーバーのアドレス"} ]}); stun:stun.l.google.com:19302 stun:23.21.150.121
  • addICECandidatepc.onicecandidate = function(e) { // リモートへICE候補を送信する sendMessage(JSON.stringify({ "candidate": e.candidate }));};// リモートからのICE候補を受信した場合function receiveMessage(message){ var candidate = new RTCIceCandidate({ "candidate": message.candidate }); pc.addICECandidate(candidate);}
  • addStream  (local) creaeOffer// getUserMediaで取得したストリームデータを追加pc.addStream(localStream);// オファーを作成pc.createOffer(function(description){ pc.setLocalDescription(description); // Send Offer sendMessage(JSON.stringify({ "sdp": description }));});
  • createAnswerfunction reciveMessage(message) { // RTCPeerConnectionを作成していなければ、作成しストリームデータを追加しておく pc.setRemoteDescription(newRTCSessionDescription(message.sdp), function(){ if (pc.remoteDescription.type == "offer") { pc.createAnswer(function(description){ pc.setLocalDescription(description); // Send Answer sendMessage(JSON.stringify({ "sdp": description })); }); } });}
  • addStrem  (remote)pc.onaddstream = function(e) { video.src = URL.createObjectURL(e.stream);}
  • 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);
  • Data  ChannelP2Pでバイナリ、テキストデータが送れるAPIは、WebSocketとほぼ同じChrome  27より前は、起動オプションが必要 -‐‑‒-‐‑‒enable-‐‑‒data-‐‑‒channelsCanary  Buildは、現在v27なのでそのまま利利⽤用可能
  • DTMF  APIDual-‐‑‒Tone  Multi-‐‑‒Frequencyトーン信号(プッシュ信号)を送信するための仕様WebRTC上での仕様は、議論論中でまだまだ変わりそうWebkitで既に実装されているが、利利⽤用できるか不不明  (http://trac.webkit.org/changeset/141984)
  • ArticlesグループビデオチャットのTenHandsがChromeのWebRTCで実装–プラグイン不不要に  (http://jp.techcrunch.com/archives/20130205real-‐‑‒time-‐‑‒communications-‐‑‒platform-‐‑‒tenhands-‐‑‒now-‐‑‒uses-‐‑‒webrtc-‐‑‒on-‐‑‒chrome-‐‑‒for-‐‑‒plugin-‐‑‒free-‐‑‒video-‐‑‒chats/)WebRTCとSIPを結びつけるSDKをPlivoがローンチ…Webと固定電話の通話も可能に  (http://jp.techcrunch.com/archives/20130115plivo-‐‑‒launches-‐‑‒the-‐‑‒first-‐‑‒sdk-‐‑‒that-‐‑‒lets-‐‑‒developers-‐‑‒connect-‐‑‒webrtc-‐‑‒and-‐‑‒sip/)
  • Microsoft  WebRTC  Proposal Microsoft  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)
  • Thank  you!! (@yoshikawa_̲t)