WebRTCとPeer.jsを使った実装

Profile
yuta suzuki
Trifort inc.
developer(?)
HTML / CSS / Javascript
Travel

Agenda
WebRTCの概要
ブラウザ間通信の手順
を使った実装
まとめ

WebRTCはリアルタイムWebの
新しいカタチ

従来の通信方法
WebRTC
概要

従来の通信方法
WebRTC
概要
テキストデータ
音声・ビデオ

リアルタイム・コミュニケーション
RTCはReal Time Communicationの略
ブラウザからカメラやマイクを使用
ブラウザ間の双方通信(P2P)を可能にする
概要

対応ブラウザ非対応ブラウザ
2014年8月時点
対応ブラウザ

何もしなくても、そこのページに入ったら
自動で通信が開始するんだよね？
Case 1
Q

after Case 1
A
アクセス時に乱数のidが発行され、それを
相手のブラウザに認識させる必要があります。

Case 2
Q
ブラウザ同士で通信できるってことは
サーバーとかネットワークの知識は必要ない？

そんなことはなく、サーバー、
ネットワークの知識は必要です。
Case 2
A

WebRTCはネットワーク上の問題を抱えています

WebRTCのネットワーク問題
PCはNAT配下のプライベートIPアドレスを持つマシンで動いています。その為
そのままでは相手がどこにいるのか分かりません。
プライベートIPアドレスはルーターが割り振っています。
？

NAT(Network Address Translation)
プライベートIPアドレス
192.168.0.15
グローバルIPアドレス
192.168.0.15
203.0.113.100
PC
サーバー
送信元
送信先
203.0.113.100
ルーター
サーバー
送信元
送信先
203.0.113.100
198.51.100.20
198.51.100.20

203.0.113.100
プライベートIPアドレス
192.168.0.15
サーバー
グローバルIPアドレス
192.168.0.15
PC
送信元
送信先
203.0.113.100
サーバー
ルーター
送信元
送信先
203.0.113.100
198.51.100.20
198.51.100.20

プライベートIPアドレス？
なに、それ？？？

それを解決する為に、２つのサーバーを使用します

ICEサーバー
Signalingサーバー

ICEサーバーとは？
ICEはInteractive Connectivity Establishmentの略です。
NATを越える為に使用するサーバー。
ICEサーバーには、STUNサーバー/TURNサーバーがあります。

STUNサーバー
STUNサーバーはSimple Traversal of UDP through NATsの略
でNATを突破する為に使用するサーバーです。
自分の外側から見た情報(グローバルIP、プライベートIPやポートなど)
を取得することができます。
TURNサーバー
TURNサーバーはTraversal Using Relay NATの略でSTUNサーバ
が繋がらなかった場合に補助として設定している事が多いです。
しかし、パケットがリレーする方式で通信するのでP2P通信ではなく
なってしまいます。その為、CPUやネットワークの負荷が高くなりや
すい傾向があります。

Signalingサーバーとは？
相手を見つける為のマッチング用のサーバー。
今回はnode.js、WebSocketで実装。

ブラウザ間通信までの手順

ICEサーバー
(STUNサーバー)
(WebSocket)

ICEサーバー
(STUNサーバー) 自分の
(WebSocket)
ネットワーク情報
を要求！

ICEサーバー
(STUNサーバー) 自分の
(WebSocket)
ネットワーク情報
を取得！

ICEサーバー
(STUNサーバー)
(WebSocket)
接続候補情報
を送信！

ICEサーバー
(STUNサーバー)
(WebSocket)
接続候補情報
を取得！

ICEサーバー
(STUNサーバー)
(WebSocket)
接続候補情報
を取得！
P2P通信開始の
オファーを送信！

ICEサーバー
(STUNサーバー)
(WebSocket)
接続候補情報
オファをー取を得受！信！

ICEサーバー
(STUNサーバー)
(WebSocket)
接続候補情報
を取得！
P2P通信開始の
許可を送信！

ICEサーバー
(STUNサーバー)
(WebSocket)
接続候補情報
を取得！
許可を受信！

ICEサーバー
(STUNサーバー)
(WebSocket)
接続候補情報
を取得！
P2P通信開始！

とは？
WebRTCを利用したP2Pのデータ、ビデオ、
オーディオ通信を簡単に実現することができるライブラリです。
通信状態に影響される繊細な処理を吸収
P2Pの接続できるまでの複雑な処理を簡略化
NTTがこのpeer.jsをベースにしたSkyWayという
プラットフォームを開発
最新のVer.は０.3.9

Peerオブジェクトの作成
var peer = new Peer({
key: 'xxxxxxxxxx',
config: {
'iceServers': [
{ url: ‘stun:stun.l.google.com:19302'}
]
}
});

メディアへの接続
navigator.getUserMedia = navigator.getUserMedia ||
navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
navigator.getUserMedia(
{audio: true, video: true},
function success(stream){
var target = document.getElementById("my-video");
target.src = URL.createObjectURL(stream);
window.localStream = stream;
},
function error(){
console.log("mediaに接続できません");
}
);

P2Pの接続開始
peer.on('open', function(){
socket.emit("sendId",peer.id);
});

先に接続している人はsocketで受信
socket.on('connect', function() {
socket.on(“getId",function(id){
var remoteCall = peer.call(id, window.localStream);
remoteCall.on('stream', function(stream){
var video = '<li data-id="' + id + '"><video
autoplay src="' + URL.createObjectURL(stream) + '"></
video></li>';
element.innerHTML += video;
});
});
});

P2Pのエラーイベント
peer.on('error', function(evt){
console.log(evt);
});

まとめ
ブラウザ通信は接続してから行われます。
メディアを起動して接続するまでの仕組みを
含めて、WebRTCです。
WebSocketとWebRTCはよく比較対象に
されますが、用途が違います。
IE、Safariの動きに注目。

ご清聴ありがとうございました。

参考
■ W3C
http://www.w3.org/TR/webrtc/
!
■ HTML5Experts.jp
http://html5experts.jp/mganeko/5554/
!
■ HTML5rocks
http://www.html5rocks.com/ja/tutorials/webrtc/datachannels/
!
■ tjun memo
http://tjun.org/blog/2013/12/webrtc_p2p/
!
■ NullPointer's Blog
http://paulownia.hatenablog.com/entry/20120506/1336324323
!
■ Publickey
http://www.publickey1.jp/blog/12/webrtchtml5_conference_2012.html
!
■ WebブラウザでP 2 Pを実現する WebRTCのAPIと周辺技術
http://www.slideshare.net/yoshiakisugimoto9/webrtc-slide

WebRTCとPeer.jsを使った実装

More Related Content

What's hot

Similar to WebRTCとPeer.jsを使った実装

WebRTCとPeer.jsを使った実装