0
Lets  begin  WebRTC!                            2013/03/22                  Web先端技術味⾒見見部#18        Toru  Yoshikawa  (@yosh...
Who?吉川  徹  /  Toru  Yoshikawa@yoshikawa_̲t   Google  Developer  Experts  (Chrome)   html5j.org/HTML5とか勉強会スタッフ   ⽇日本jQuery ...
Recently  hot  news
Hello  Chrome,  itʼ’s  Firefox  calling!   https://hacks.mozilla.org/2013/02/hello-‐‑‒chrome-‐‑‒its-‐‑‒firefox-‐‑‒calling/ ...
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/t...
SpecificationsW3C       WebRTC  1.0:  Real-‐‑‒time  Communication  Between  Browsers  (http://       www.w3.org/TR/webrtc/)...
CommunicationsW3C  ML    http://lists.w3.org/Archives/Public/public-‐‑‒webrtc/IETF  ML    http://www.ietf.org/mail-‐‑‒arch...
Architecture
Network
STUNSimple  Traversal  of  UDP  through  NATsNAT越えの⽅方法のひとつ通信するホストがSTUNサーバーにUDP接続を⾏行行い、NATが割り当てたグローバルIPアドレスとポート番号を取得する取得したグ...
NATの種類フルコーン型 1つのTCP/UDPポートを1台のPCに割り当て制限コーン型 内部ホストがパケット送信した外部ホストのみと通信可能(UDPホール パンチングなどで対応)ポート制限コーン型 制限コーン型には、さらにポートの制限を加えたも...
ICEInteractive  Connectivity  EstablishmentSTUNとTURNなどのNAT越えの⼿手順をまとめたものSTUNで対応できないホストには、TURNを利利⽤用するSTUNで対応できるNATは、フルコーン型、制...
TURNTraversal  Using  Relay  NATNAT越えの⽅方法のひとつ対称型や多段NATにも対応できる要は、すべての通信をTURNを経由して⾏行行うので、速度度的なメリットはほとんどないサーバー的にも⾼高負荷・⾼高コスト
Sequence
サンプルコード
getUserMedianavigator.getUserMedia({audio: true, video:true}, success);function success(stream) {  videoElement.src = URL....
RTCPeerConnectionPeerConnection00は、Deprecatedなので利利⽤用しないようにFirefoxは、nightly以外は、about:configでmedia.peerconnection.enabledをtru...
RTCPeerConnection            インスタンスの作成var pc = new RTCPeerConnection({  "iceServers": [    {"url": "STUNサーバーのアドレス"},      ...
addICECandidatepc.onicecandidate = function(e) {     // リモートへICE候補を送信する     sendMessage(JSON.stringify({       "candidate"...
addStream  (local)            creaeOffer// getUserMediaで取得したストリームデータを追加pc.addStream(localStream);// オファーを作成pc.createOffer(f...
createAnswerfunction reciveMessage(message) {  // RTCPeerConnectionを作成していなければ、作成しストリームデータを追加しておく  pc.setRemoteDescription(...
addStrem  (remote)pc.onaddstream = function(e) {  video.src = URL.createObjectURL(e.stream);}
Data  Channelvar channel = pc.createDataChannel("labelName");channel.onopen = function(e) {  // データチャネルオープン}channel.onmess...
Data  ChannelP2Pでバイナリ、テキストデータが送れるAPIは、WebSocketとほぼ同じChrome  27より前は、起動オプションが必要 -‐‑‒-‐‑‒enable-‐‑‒data-‐‑‒channelsCanary  Bu...
DTMF  APIDual-‐‑‒Tone  Multi-‐‑‒Frequencyトーン信号(プッシュ信号)を送信するための仕様WebRTC上での仕様は、議論論中でまだまだ変わりそうWebkitで既に実装されているが、利利⽤用できるか不不明  ...
ArticlesグループビデオチャットのTenHandsがChromeのWebRTCで実装–プラグイン不不要に  (http://jp.techcrunch.com/archives/20130205real-‐‑‒time-‐‑‒commun...
Microsoft  WebRTC  Proposal  Microsoft  pushes  ahead  with  its  own  take  on    WebRTC  (http://gigaom.com/2013/01/17/ ...
Thank  you!! (@yoshikawa_̲t)
Upcoming SlideShare
Loading in...5
×

Let's begin WebRTC

3,680

Published on

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

Published in: Technology
0 Comments
13 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,680
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
44
Comments
0
Likes
13
Embeds 0
No embeds

No notes for slide

Transcript of "Let's begin WebRTC"

  1. 1. Lets  begin  WebRTC! 2013/03/22 Web先端技術味⾒見見部#18 Toru  Yoshikawa  (@yoshikawa_̲t)
  2. 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. 3. Recently  hot  news
  4. 4. 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
  5. 5. HTML5でテレビ電話、Chrome  Beta  for  AndroidでWebRTCを試す http://d.hatena.ne.jp/jovi0608/20130307/1362645489
  6. 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. 7. 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)
  8. 8. CommunicationsW3C  ML http://lists.w3.org/Archives/Public/public-‐‑‒webrtc/IETF  ML http://www.ietf.org/mail-‐‑‒archive/web/rtcweb/current/maillist.html
  9. 9. Architecture
  10. 10. Network
  11. 11. STUNSimple  Traversal  of  UDP  through  NATsNAT越えの⽅方法のひとつ通信するホストがSTUNサーバーにUDP接続を⾏行行い、NATが割り当てたグローバルIPアドレスとポート番号を取得する取得したグローバルIPアドレスとポート番号を通信するホスト間で交換する
  12. 12. NATの種類フルコーン型 1つのTCP/UDPポートを1台のPCに割り当て制限コーン型 内部ホストがパケット送信した外部ホストのみと通信可能(UDPホール パンチングなどで対応)ポート制限コーン型 制限コーン型には、さらにポートの制限を加えたもの対称型 外部ホストごとに別々のアドレス変換テーブルを持つ
  13. 13. ICEInteractive  Connectivity  EstablishmentSTUNとTURNなどのNAT越えの⼿手順をまとめたものSTUNで対応できないホストには、TURNを利利⽤用するSTUNで対応できるNATは、フルコーン型、制限コーン型、ポート制限コーン型の3つ対称型、多段NATなどの場合は、TURNを利利⽤用する
  14. 14. TURNTraversal  Using  Relay  NATNAT越えの⽅方法のひとつ対称型や多段NATにも対応できる要は、すべての通信をTURNを経由して⾏行行うので、速度度的なメリットはほとんどないサーバー的にも⾼高負荷・⾼高コスト
  15. 15. Sequence
  16. 16. サンプルコード
  17. 17. getUserMedianavigator.getUserMedia({audio: true, video:true}, success);function success(stream) { videoElement.src = URL.createObjectURL(stream);}
  18. 18. RTCPeerConnectionPeerConnection00は、Deprecatedなので利利⽤用しないようにFirefoxは、nightly以外は、about:configでmedia.peerconnection.enabledをtrueに設定する
  19. 19. RTCPeerConnection インスタンスの作成var pc = new RTCPeerConnection({ "iceServers": [ {"url": "STUNサーバーのアドレス"}, {"url": "TURNサーバーのアドレス"} ]}); stun:stun.l.google.com:19302 stun:23.21.150.121
  20. 20. 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);}
  21. 21. addStream  (local) creaeOffer// getUserMediaで取得したストリームデータを追加pc.addStream(localStream);// オファーを作成pc.createOffer(function(description){ pc.setLocalDescription(description); // Send Offer sendMessage(JSON.stringify({ "sdp": description }));});
  22. 22. 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 })); }); } });}
  23. 23. addStrem  (remote)pc.onaddstream = function(e) { video.src = URL.createObjectURL(e.stream);}
  24. 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. 25. Data  ChannelP2Pでバイナリ、テキストデータが送れるAPIは、WebSocketとほぼ同じChrome  27より前は、起動オプションが必要 -‐‑‒-‐‑‒enable-‐‑‒data-‐‑‒channelsCanary  Buildは、現在v27なのでそのまま利利⽤用可能
  26. 26. DTMF  APIDual-‐‑‒Tone  Multi-‐‑‒Frequencyトーン信号(プッシュ信号)を送信するための仕様WebRTC上での仕様は、議論論中でまだまだ変わりそうWebkitで既に実装されているが、利利⽤用できるか不不明  (http://trac.webkit.org/changeset/141984)
  27. 27. 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/)
  28. 28. 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)
  29. 29. Thank  you!! (@yoshikawa_̲t)
  1. A particular slide catching your eye?

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

×