WebRTC meetup Tokyo 1

WebRTC Meetup #1ハンズオンインフォコム株式会社

がねこまさし

今日のテーマ• シグナリングの話だけ、します– Peer-to-Peer がつながる前の話です

• UserMedia の話はしません。ごめんなさい• STUN/TURN 、 DataChannel の話もありませ

ん

元ネタ• HTML5Experts.jp に書いた記事がベース– WebRTC に触ってみたいエンジニア必見！手動

で WebRTC 通信をつなげてみよう• http://html5experts.jp/mganeko/5181/

– WebRTC 初心者でも簡単にできる！ Node.js で仲介（シグナリング）を作ってみよう• http://html5experts.jp/mganeko/5349/

• すでに試した方は同じ話です。ごめんなさい

http://html5experts.jp/mganeko/5181/




WebRTC の通信はどうなっているの？

• 映像や音声などリアルタイムに取得されたデータを、ブラウザ間で送受信

• RTCPeerConnection が行う– Peer-to-Peer の通信

• ブラウザとブラウザの間で直接通信する

– UDP/IP を使用• TCP/IP のようにパケットの到着は保障しない• オーバーヘッドが少ない• 通信のリアルタイム性を重視• UDP のポート番号は動的に割り振られる（ 49152 ～

65535 ）

Peer-to-Peer 通信が確立するまで (1)

• Peer-to-Peer を行うには– 相手の IP アドレスを知る必要がある– 動的に割り振られる UDP のポート番号も知る必要が

ある

• Session Description Protocol (SDP) の交換– WebRTC 専用ではなく、 VoIP 等で利用されている– 各エンドポイント（ブラウザ）の情報を示す。例えば、

• メディアの種類（音声、映像）、メディアの形式（コーデック）

• データ転送プロトコル → WebRTC では Secure RTP• 通信で使用する帯域

Peer-to-Peer 通信が確立するまで (2)

• Interactive Connectivity Establishment (ICE) の交換– WebRTC 専用ではなく、 P2P で利用されている– 途中経路の情報を示す。複数ある場合も多い

• P2P による直接通信• STUN による、 NAT 通過のためのポートマッピング

– → 最終的には P2P になる• TURN による、リレーサーバーを介した中継通信

SDP SDPICE

手動編

ということで、やってみましょう• WebRTC に触ってみたいエンジニア必見！手動で WebRTC

通信をつなげてみよう– http://html5experts.jp/mganeko/5181/– 一番下の方の「手動シグナリングの改良版ソース (2014年 4月

21日追加）」のソース• 手動シグナリングは操作が面倒• 必要なテキストを自動で選択するように

DEMO



ということで、やってみましょう• WebRTC に触ってみたいエンジニア必見！手動で WebRTC

通信をつなげてみよう– http://html5experts.jp/mganeko/5181/– 一番下の方の「手動シグナリングの改良版ソース (2014 年 4 月

21 日追加）」のソース• みなさんも、一緒にやってみましょう

– ソースを自分のマシンにコピーして、 Chrome でアクセス– 自前の Web サーバーが必要です– ※file:// ～　ではなく、 http:// ～　の必要があります

• ※ 手動シグナリングは、なぜか動作が不安定– 端末によっては通信が確立しないケースあり

• 今のところ成功は 4 台 /7 台– 原因がさっぱりわからない … 情報求む！

• もし心当たりがあったら教えていただけると助かります



カメラ (UserMedia) を取得

SDP のやりとり

11

PeerConnectionApplication PeerConnection Application

new

new PeerConnection()

function prepareNewConnection() { var pc_config = {"iceServers":[]}; // info of STUN/TURN var peer = null; peer = new webkitRTCPeerConnection(pc_config); peer.onicecandidate = function (evt) { … } peer.addStream(localStream); peer.addEventListener("addstream", onRemoteStreamAdded, false); peer.addEventListener("removestream", onRemoteStreamRemoved, false); return peer;}

SDP のやりとり

13


new

createOffer()

setLocalDescription(sdp)

offer sdp

sendOffer()

function sendOffer() { peerConnection = prepareNewConnection(); peerConnection.createOffer( function (sessionDescription) { // in case of success peerConnection.setLocalDescription(sessionDescription); sendSDP(sessionDescription); // show in textarea }, function () { // in case of error }, mediaConstraints);}

offer SDP 　を生成

SDP のやりとり

16


new

createOffer()


offer sdp

sdp Copy & Paste

setRemoteDescription(sdp)

new

setOffer()

function setOffer(evt) { peerConnection = prepareNewConnection(); peerConnection.setRemoteDescription( new RTCSessionDescription(evt) );}

SDP を手動でコピー（ offer ）

SDP のやりとり

19


new

createOffer()


offer sdp

sdp Copy & Paste

createAnswer()

answer sdpsetLocalDescription(sdp)


new

sendAnswer()

function sendAnswer(evt) { peerConnection.createAnswer( function (sessionDescription) { // in case of success peerConnection.setLocalDescription(sessionDescription); sendSDP(sessionDescription); // show in textarea }, function () { // in case of error }, mediaConstraints);}

answer SDP を生成

SDP のやりとり

22


new

createOffer()


offer sdp

sdp Copy & Paste

createAnswer()



new

sdp Copy & Paste


setAnswer()

function setAnswer(evt) { peerConnection.setRemoteDescription( new RTCSessionDescription(evt) );}

SDP を手動でコピー（ answer ）

SDP のやりとり（全体）

25


new

createOffer()


offer sdp

sdp Copy & Paste

createAnswer()



new

sdp Copy & Paste


ICE Candidate のやりとり

26


onIceCandidate(ice)

peer.onIceCandidate()function prepareNewConnection() { var pc_config = {"iceServers":[]}; var peer = null; peer = new webkitRTCPeerConnection(pc_config); peer.onicecandidate = function (evt) { if (evt.candidate) { sendCandidate({ // show in text area type: "candidate", sdpMLineIndex: evt.candidate.sdpMLineIndex, sdpMid: evt.candidate.sdpMid, candidate: evt.candidate.candidate }); } else { // End of candidates. } } … return peer;}


28


addIceCandidate(ice)

onIceCandidate(ice)

ice Copy & Paste

addIceCandidate()

function onCandidate(evt) { var candidate = new RTCIceCandidate({ sdpMLineIndex:evt.sdpMLineIndex, sdpMid:evt.sdpMid, candidate:evt.candidate }); peerConnection.addIceCandidate(candidate);}

ICE を手動でコピー

ICE を手動でコピー


32


onIceCandidate(ice)



onIceCandidate(ice)

ice Copy & Paste

ice Copy & Paste

peer.onIceCandidate() ※同じfunction prepareNewConnection() { var pc_config = {"iceServers":[]}; var peer = null; peer = new webkitRTCPeerConnection(pc_config); peer.onicecandidate = function (evt) { if (evt.candidate) { sendCandidate({ // show in text area type: "candidate", sdpMLineIndex: evt.candidate.sdpMLineIndex, sdpMid: evt.candidate.sdpMid, candidate: evt.candidate.candidate }); } else { // End of candidates. } } … return peer;}

addIceCandidate() ※同じfunction onCandidate(evt) { var candidate = new RTCIceCandidate({ sdpMLineIndex:evt.sdpMLineIndex, sdpMid:evt.sdpMid, candidate:evt.candidate }); peerConnection.addIceCandidate(candidate);}

ICE を手動でコピー（帰り）


36


onIceCandidate(ice)



onIceCandidate(ice)

onIceCandidate() : end of candidate onIceCandidate() : end of candidate

P2P stream transfer

ice Copy & Paste

ice Copy & Paste

ICE を手動でコピー（帰り）

ICE Candidate のやりとり（全体）

38


onIceCandidate(ice)



onIceCandidate(ice)

onIceCandidate() : end of candidate onIceCandidate() : end of candidate

P2P stream transfer

ice Copy & Paste

ice Copy & Paste

ICE Candidate のやりとり（今回）

39


onIceCandidate(ice)



onIceCandidate(ice)

P2P stream transfer

ice, ice, ice, ice Copy & Paste

ice, ice, ice, ice Copy & Paste

シグナリングサーバー編

シグナリングサーバーはどうして必要なの？

• シグナリングの過程で、情報を受け渡したい– お互いの IP アドレス– お互いのポート番号

• この段階ではお互い IP アドレスを知らない– 直接やりとりでない

• 仲介役となるシグナリングサーバーが必要– どちらブラウザもサーバーの IP アドレスを知っ

ていることが前提

Peer-to-Peer 通信の開始前に、普通のサーバー / クライアント型の通信が行われる

準備• Node.js をインストール– http://nodejs.jp/nodejs.org_ja/docs/v0.10/

• socket.io もインストール$ sudo npm install socket.io

http://nodejs.jp/nodejs.org_ja/docs/v0.10/



シグナリングサーバー• WebRTC…Node.js で仲介（シグナリング）を作ってみよう

– http://html5experts.jp/mganeko/5349/

• 例えば、 signaling.js に記述、起動$ node signaling.js

var port = 9001; // as you likevar io = require('socket.io').listen(port);console.log((new Date()) + " Server is listening on port " + port); io.sockets.on('connection', function(socket) { socket.on('message', function(message) { socket.broadcast.emit('message', message); }); socket.on('disconnect', function() { socket.broadcast.emit('user disconnected'); });});



動かしてみます

DEMO

みなさんも、やってみてください

• スタートは、先ほどの手動用 HTML–その HTML/JavaScript を修正

• やることは、 HTML5Experts.jp の記事の内容– WebRTC 初心者でも簡単にできる！ Node.js で仲

介（シグナリング）を作ってみよう– http://html5experts.jp/mganeko/5349/

• まず、 socket.io.js を読み込みます<script src="http://localhost:9001/socket.io/socket.io.js"></script>



ソケットの確立

49

PeerConnectionsocket

Application SignalingServer


Application

connect()connect connect()

connect

connect()

var socketReady = false;var port = 9001;var socket = io.connect('http://localhost:' + port + '/');

// socket: channel connectedsocket.on('connect', onOpened) .on('message', onMessage); function onOpened(evt) { console.log('socket opened.'); socketReady = true;}

メッセージ処理// socket: accept connection requestfunction onMessage(evt) { if (evt.type === 'offer') { onOffer(evt); } else if (evt.type === 'answer' && peerStarted) { onAnswer(evt); } else if (evt.type === 'candidate' && peerStarted) { onCandidate(evt); } else if (evt.type === 'user dissconnected' && peerStarted) { stop(); }}

SDP のやりとり

52




Application


connectcreateOffer()

offer sdp


send(sdp)send sdp

send sdp onMessage(sdp)


sendSDP()function sendOffer() { peerConnection = prepareNewConnection(); peerConnection.createOffer( function (sessionDescription) { // in case of success peerConnection.setLocalDescription(sessionDescription); sendSDP(sessionDescription); }, function () { // in case of error }, mediaConstraints);}

function sendSDP(sdp) { // send via socket socket.json.send(sdp);}

onMessage()

function onMessage(evt) { if (evt.type === 'offer') { onOffer(evt); } else if (evt.type === 'answer' && peerStarted) { onAnswer(evt); } else if (evt.type === 'candidate' && peerStarted) { onCandidate(evt); } else if (evt.type === 'user dissconnected' && peerStarted) { stop(); }}

onOffer(), setOffer()

function onOffer(evt) { setOffer(evt); sendAnswer(evt);}

function setOffer(evt) { peerConnection = prepareNewConnection(); peerConnection.setRemoteDescription( new RTCSessionDescription(evt) );}

SDP のやりとり

56




Application



offer sdp


send(sdp)send sdp



createAnswer()answer sdp

send sdpsend(sdp)

send sdponMessage(sdp)setRemoteDescription(sdp)


sendSDP()

function sendAnswer(evt) { peerConnection.createAnswer( function (sessionDescription) { // in case of success peerConnection.setLocalDescription(sessionDescription); sendSDP(sessionDescription); }, function () { // in case of error }, mediaConstraints);}

function sendSDP(sdp) { // send via socket socket.json.send(sdp);}

onMessage()


onAnswer(), setAnswer ()

function onAnswer(evt) { setAnswer(evt);}

function setAnswer(evt) { peerConnection.setRemoteDescription( new RTCSessionDescription(evt) );}

SDP のやりとり（全体）

60




Application



offer sdp


send(sdp)send sdp



createAnswer()answer sdp

send sdpsend(sdp)

send sdponMessage(sdp)setRemoteDescription(sdp)



61




Application

send(ice) send icesend ice

onMessage(ice)


onIceCandidate(ice)

peer.onIceCandidate()function prepareNewConnection() { var pc_config = {"iceServers":[]}; var peer = null; peer = new webkitRTCPeerConnection(pc_config); peer.onicecandidate = function (evt) { if (evt.candidate) { sendCandidate({ type: "candidate", sdpMLineIndex: evt.candidate.sdpMLineIndex, sdpMid: evt.candidate.sdpMid, candidate: evt.candidate.candidate }); } else { // End of candidates. } } … return peer;}

sendCandidate()

function sendCandidate(candidate) { // send via socket socket.json.send(candidate);}

onMessage()


onCandidate(), addIceCandidate()

function onCandidate(evt) { var candidate = new RTCIceCandidate({ sdpMLineIndex:evt.sdpMLineIndex, sdpMid:evt.sdpMid, candidate:evt.candidate }); peerConnection.addIceCandidate(candidate);}


66




Application

onIceCandidate(ice)


onMessage(ice)


send ice send(ice)send ice

onMessage(ice)


onIceCandidate(ice)

peer.onIceCandidate() ※同じfunction prepareNewConnection() { var pc_config = {"iceServers":[]}; var peer = null; peer = new webkitRTCPeerConnection(pc_config); peer.onicecandidate = function (evt) { if (evt.candidate) { sendCandidate({ type: "candidate", sdpMLineIndex: evt.candidate.sdpMLineIndex, sdpMid: evt.candidate.sdpMid, candidate: evt.candidate.candidate }); } else { // End of candidates. } } … return peer;}

onMessage() ※同じfunction onMessage(evt) { if (evt.type === 'offer') { onOffer(evt); } else if (evt.type === 'answer' && peerStarted) { onAnswer(evt); } else if (evt.type === 'candidate' && peerStarted) { onCandidate(evt); } else if (evt.type === 'user dissconnected' && peerStarted) { stop(); }}

onCandidate(), addIceCandidate() ※同じfunction onCandidate(evt) { var candidate = new RTCIceCandidate({ sdpMLineIndex:evt.sdpMLineIndex, sdpMid:evt.sdpMid, candidate:evt.candidate }); peerConnection.addIceCandidate(candidate);}


70




Application

onIceCandidate(ice)


onMessage(ice)



onMessage(ice)


onIceCandidate(ice)

onIceCandidate() : end of candidateonIceCandidate() : end of candidate

P2P stream transfer

ICE Candidate のやりとり（全体）

71




Application

onIceCandidate(ice)


onMessage(ice)



onMessage(ice)


onIceCandidate(ice)

onIceCandidate() : end of candidateonIceCandidate() : end of candidate

P2P stream transfer

Peer-to-Peer 通信確立

なぜ WebRTC に注目するのか？通信手段の破壊的進化キャリア型通信

固定電話携帯電話 (TV 放送）

手段の例

Over The Top

Skype, WebEx (YouTube, USTREAM)

Web ブラウザ型

WebRTC

世界中の人と会話できるユーザメリット世界中の人と無料 /

安価で会話できる専用アプリ無しで会話できる

インフラを持つキャリアが支配市場

キャリアに縛られない独自の仕組みを提供する少数のベンダーが参加可能

特別な仕組みは不要誰でも参加可能

×事業者メリット限定的な API 提供連携可能

完全にプログラマブル部品として利用可能

単独で利用利用方法ユーザが組み合わせて利用

製品 / サービスに組み込んで利用

コールセンター、 EC サイト、情報共有システム、など

WebRTC をどんな風に使うかは、

みなさんのアイデア次第です！

74

Thank you!

75

END

Internet

WebRTC meetup Tokyo 1