WebRTCで変わるWebの未来

WebRTCで変わるWebの未来
2013/04/23
QCon Tokyo 2013
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/
Agenda
WebRTCとは？
WebRTCのアーキテクチャ
getUserMedia
WebRTC
その他のTips
今後の仕様策定と展望
WebRTCとは？
WebRTC
=
Web Real-‐‑‒Time Communications
WebRTC
ブラウザ上でリアルタイムコミュニケーションを実現するための
仕様
双⽅方向性のあるコミュニケーションを必要とする様々なアプリケ
ーションを開発できる
ビデオ／⾳音声チャット
テキストの共同編集
ゲーム
etc...
Demo
https://apprtc.appspot.com/
WebSocketとWebRTC
WebSocketは、リアルタイムな双⽅方向通信を実
現する仕様
Ajaxのように単⽅方向、単⼀一データのやり取りでは
なく、⼀一度度コネクションを確⽴立立すれば⾃自由にデー
タをやり取りできる
WebSocketで既にリアルタイム双⽅方向通信は実
現しているが、WebRTCとの違いは何か？
WebSocket
WebRTC
WebSocketとの違い
WebRTCは、P2P通信を利利⽤用して端末間の相互接
続が可能
サーバーを経由しないため、⾼高速な通信ができる
WebRTCでは、データ通信⽅方式がUDPのため品質
よりもリアルタイム性を重視したデータに適して
いる（再送制御は可能なため、正確なデータ通信
ができないわけではない）
WebRTCのアーキテクチャ
Architecture
WebRTCの2つの仕様
Media Capture and Streams（getUserMedia）
WebRTC 1.0: Real-‐‑‒time Communication Between Browsers
Media Capture and Streams
（getUserMedia）
Media Capture and Streams
（getUserMedia）
ローカルのカメラやマイクからストリームデータ
を取得する仕様
通信時のストリームについても定義されている
カメラから画像や⾳音声を取得して、加⼯工するだけ
でもいろいろな応⽤用が可能
Demo
http://webcamtoy.com/ja/
getUserMediaのサンプルコード
navigator.webkitGetUserMedia({audio: true, video:true},
function(stream) {
videoElement.src = webkitURL.createObjectURL(stream);
});
※Webkit(Chrome, Safari, Android)の記述
Canvasと連携して画像処理理
Web Audio APIと連携して⾳音声処理理
顔認識識、ジェスチャー
etc...
Demo
http://www.movikantirevo.com/
WebRTC 1.0: Real-‐‑‒time Communication Between Browsers
WebRTC 1.0: Real-‐‑‒time Communication Between Browsers
主にP2P通信のための仕様が定義されている
端末間の相互接続を開始するためのネゴシエーシ
ョンを⾏行行う
P2Pによるデータ通信（Data channel）などもあ
る
APIは、複雑で難解 ;-‐‑‒(
Demo
https://developer.mozilla.org/ja/demos/detail/bananabread
WebRTCによるP2P通信を
始めるための事前準備
最初のネゴシエーションを仲介するためのサーバ
ーを⽤用意しよう（WebサーバーでOK）
NAT越えするためのICEサーバーを⽤用意しよう
（公開されているものでもOK）
Network構成
突然ですが、ネットワークに
関するお話です
NAT traversal（NAT越え）の問題
P2P通信を開始するためには、お互いの端末のグロ
ーバルアドレスを知る必要がある
しかし、各端末の前にはファイアウォールなどがあ
るので、⼀一筋縄ではいかない
そのために必要なのが、ICEと呼ばれる仕組み
ICEで取得したグローバルIPアドレスとポート番号
を通信するホスト間で交換する
ICE
Interactive Connectivity Establishment
STUNやTURNなどのNAT越えの⼿手順をまとめた
もの
STUNで対応できないホストには、TURNを利利⽤用
する
STUN
Simple Traversal of UDP through NATs
NAT越えの⽅方法のひとつ
通信するホストがSTUNサーバーにUDP接続を⾏行行
い、NATが割り当てたグローバルIPアドレスとポー
ト番号を取得する
STUNで対応できるNATは、フルコーン型、制限コ
ーン型、ポート制限コーン型の3つ
NATの種類
フルコーン型
1つのTCP/UDPポートを1台のPCに割り当て
制限コーン型
内部ホストがパケット送信した外部ホストのみと通信可能（UDPホール
パンチングなどで対応）
ポート制限コーン型
制限コーン型には、さらにポートの制限を加えたもの
対称型
外部ホストごとに別々のアドレス変換テーブルを持つ
TURN
Traversal Using Relay NAT
NAT越えの⽅方法のひとつ
対称型や多段NATにも対応できる
要は、すべての通信をTURNを経由して⾏行行うの
で、速度度的なメリットはほとんどない
サーバー的にも⾼高負荷・⾼高コスト
APIのほとんどがこの部分を解決す
るためのネゴシエーション
Sequence
サンプルコードは参考程度度に
デモ（http://rtcdc.komasshu.info）
リポジトリ（https://github.com/KensakuKOMATSU/rtc_datachannel）
RTCPeerConnection
PeerConnection00は、Deprecatedなので利利⽤用
しないように
Firefoxは、nightly以外は、about:configで
media.peerconnection.enabledをtrueに設定す
る
new RTCPeerConnection()
var pc = new RTCPeerConnection({
"iceServers": [
{"url": "STUNサーバーのアドレス"},
{"url": "TURNサーバーのアドレス"}
]
});
stun:stun.l.google.com:19302
stun:23.21.150.121
addStream (local)
// getUserMediaで取得したストリームデータを追加
pc.addStream(localStream);
onicecandidate/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);
}
Send Offer
// オファーを作成
pc.createOffer(function(description){
pc.setLocalDescription(description);
// Send Offer
sendMessage(JSON.stringify({
"sdp": description
}));
});
Send Answer
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
}));
});
}
});
}
addStream (remote)
pc.onaddstream = function(e) {
video.src = URL.createObjectURL(e.stream);
}
Data Channel
P2Pでバイナリ、テキストデータが送れる
APIは、WebSocketとほぼ同じ
Chrome 27より前は、起動オプションが必要
-‐‑‒-‐‑‒enable-‐‑‒data-‐‑‒channels
Canary Buildは、現在v27なのでそのまま利利⽤用可能
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);
APIの扱いは難しいので、簡単に
始めたい場合は、ライブラリを
利利⽤用しましょう
WebRTCのライブラリ
simpleWebRTC (https://github.com/
HenrikJoreteg/SimpleWebRTC)
Peer.js (http://peerjs.com/)
webRTC.io (https://github.com/webRTC/
webRTC.io)
Peer.js
Data Channelのみのサポート
ブローカーサーバーが提供されている（API Key
の申請が必要）
connect()メソッドだけでP2Pのネゴシエーショ
ンを完了了
その他のTips
ブラウザ同⼠士でWebRTC
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
モバイルでWebRTC
HTML5でテレビ電話、Chrome Beta for AndroidでWebRTCを試す http://d.hatena.ne.jp/jovi0608/20130307/1362645489
実装状況
機能
Chrome
Firefox
Opera
Safari
IE
Media Capture
◯
◯
◯
−
−
Peer-‐‑‒to-‐‑‒peer connections
◯
◯
−
−
−
Data Channel
△
△
−
−
−
※Operaは今後、Chromeと同様になります
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)
今後の仕様策定と展望
今後の仕様策定
ストリームデータ以外でもテキストやバイナリデータを
やり取りするためのData Channel APIが定義されてお
り、既にChromeとFirefoxで実験的に実装されている
その他、トーン信号（プッシュ信号）を送信するための
DTMF（Dual-‐‑‒Tone Multi-‐‑‒Frequency）についても定義
されている
将来的には、ストリームのレコーディングも可能となる
⾒見見込み（Media Recording API）
商業化の流流れ
TenHandsというベンチャー企業では、今年年に⼊入って
WebRTCを利利⽤用したサービスの提供を開始
同じくベンチャー企業のPlivoは、WebRTCと既存の
SIPラインと接続するためのSDKを提供しており、
WebRTCを固定電話と繋げることも可能になっている
WebRTCには多くの企業が注⽬目しており、既に新たな
サービスの創出や業界への参⼊入が活発化している
まとめ
これまでは、ビデオチャット（ビデオ会議）と⾔言えば、
専⽤用のネットワーク、専⽤用のハードウェアとソフトウェ
アを利利⽤用するというプロプライエタリな環境だった
WebRTCによって標準化され、オープンとなることで、
様々なネットワーク、デバイスが既存のインフラを含め
てシームレスに接続するようになる
今後の新しいソリューションやビデオチャットに限ら
ず、新しいサービスが産まれてくることが期待される
皆さんの⼿手で、新しいWeb
の未来を作っていきましょう
Thank you!!
(@yoshikawa_̲t)
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
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/)
Media Recoding API (http://lists.w3.org/Archives/Public/public-‐‑‒media-‐‑‒capture/2012Dec/
att-‐‑‒0159/RecordingProposal.html)
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)
Communications
W3C ML
http://lists.w3.org/Archives/Public/public-‐‑‒webrtc/
IETF ML
http://www.ietf.org/mail-‐‑‒archive/web/rtcweb/current/maillist.html
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/)

Download Report