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

1. Let's begin WebRTC!
2013/03/22
Web先端技術味⾒見見部#18
Toru 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, 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. HTML5でテレビ電話、Chrome
Beta for AndroidでWebRTCを試す
http://d.hatena.ne.jp/jovi0608/20130307/1362645489

6. Resources
Community
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. Specifications
W3C
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. Communications
W3C ML
http://lists.w3.org/Archives/Public/public-‐‑‒webrtc/
IETF ML
http://www.ietf.org/mail-‐‑‒archive/web/rtcweb/current/maillist.html

9. Architecture

10. Network

11. STUN
Simple Traversal of UDP through NATs
NAT越えの⽅方法のひとつ
通信するホストがSTUNサーバーにUDP接続を⾏行行
い、NATが割り当てたグローバルIPアドレスとポー
ト番号を取得する
取得したグローバルIPアドレスとポート番号を通信
するホスト間で交換する

12. NATの種類
フルコーン型
1つのTCP/UDPポートを1台のPCに割り当て
制限コーン型
内部ホストがパケット送信した外部ホストのみと通信可能（UDPホール
パンチングなどで対応）
ポート制限コーン型
制限コーン型には、さらにポートの制限を加えたもの
対称型
外部ホストごとに別々のアドレス変換テーブルを持つ

13. ICE
Interactive Connectivity Establishment
STUNとTURNなどのNAT越えの⼿手順をまとめたもの
STUNで対応できないホストには、TURNを利利⽤用する
STUNで対応できるNATは、フルコーン型、制限コーン型、
ポート制限コーン型の3つ
対称型、多段NATなどの場合は、TURNを利利⽤用する

14. TURN
Traversal Using Relay NAT
NAT越えの⽅方法のひとつ
対称型や多段NATにも対応できる
要は、すべての通信をTURNを経由して⾏行行うの
で、速度度的なメリットはほとんどない
サーバー的にも⾼高負荷・⾼高コスト

15. Sequence

16. サンプルコード

17. getUserMedia
navigator.getUserMedia({audio: true, video:true}, success);
function success(stream) {
videoElement.src = URL.createObjectURL(stream);
}

18. RTCPeerConnection
PeerConnection00は、Deprecatedなので利利⽤用
しないように
Firefoxは、nightly以外は、about:configで
media.peerconnection.enabledをtrueに設定す
る

19. RTCPeerConnection
インスタンスの作成
var pc = new RTCPeerConnection({
"iceServers": [
{"url": "STUNサーバーのアドレス"},
{"url": "TURNサーバーのアドレス"}
]
});
stun:stun.l.google.com:19302
stun:23.21.150.121

20. addICECandidate
pc.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. addStream (local)
creaeOffer
// getUserMediaで取得したストリームデータを追加
pc.addStream(localStream);
// オファーを作成
pc.createOffer(function(description){
pc.setLocalDescription(description);
// Send Offer
sendMessage(JSON.stringify({
"sdp": description
}));
});

22. createAnswer
function reciveMessage(message) {
// RTCPeerConnectionを作成していなければ、作成しストリームデータを
追加しておく
pc.setRemoteDescription(new
RTCSessionDescription(message.sdp), function(){
if (pc.remoteDescription.type == "offer") {
pc.createAnswer(function(description){
pc.setLocalDescription(description);
// Send Answer
sendMessage(JSON.stringify({
"sdp": description
}));
});
}
});
}

23. addStrem (remote)
pc.onaddstream = function(e) {
video.src = URL.createObjectURL(e.stream);
}

24. Data Channel
var 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 Channel
P2Pでバイナリ、テキストデータが送れる
APIは、WebSocketとほぼ同じ
Chrome 27より前は、起動オプションが必要
-‐‑‒-‐‑‒enable-‐‑‒data-‐‑‒channels
Canary Buildは、現在v27なのでそのまま利利⽤用可
能

26. DTMF API
Dual-‐‑‒Tone Multi-‐‑‒Frequency
トーン信号（プッシュ信号）を送信するための仕様
WebRTC上での仕様は、議論論中でまだまだ変わりそう
Webkitで既に実装されているが、利利⽤用できるか不不明
(http://trac.webkit.org/changeset/141984)

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. 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. Thank you!!
(@yoshikawa_̲t)