html5minutes vol.01で発表したスライドです。

1. 5分でわかる
WebRTCの仕組み
HTML5minutes!! vol.01
西畑一馬

2. 最初に

3. 5分でわかるほど
WebRTCは簡単じゃない

4. WebRTCを取り巻くHTML5技術
WebSocket
Web Audio
RTCPeerConnection
video/audio API
getUserMedia API
Media Stream

5. WebRTCを取り巻くHTML5技術
WebSocket
Web Audio
RTCPeerConnection
video/audio API
getUserMedia API
Media Stream
とわ本日あたえられた時間は5分しかない

6. WebRTCを取り巻くHTML5技術
WebSocket
Web Audio
video/audio API
getUserMedia API
Media Streamとわ
RTCPeerConnection
重要なコレに絞って解説

7. そもそもWebRTCって??

8. WebRTC
Web Real-Time Communication

9. 離れた2台以上のPCで通信する技術

10. ウェブカムの映像や

11. 音声やデータなど

12. これまでのビデオチャットは仲介サーバー必要

13. WebRTCはP2PでPC同士が通信を行う

14. WebRTC通信に必要な4つのステップ

15. Step 1
自分のストリームデータを取得

16. getUserMedia
getUserMedia(
{
video:true,
audio:true
},
function(stream) {
localStream = stream;
},
function(error) {
alert("メディアを取得できませんでした");
}
);

17. Step 2
お互いのPCのSDPを交換する

18. SDP
Session Description Protocol

19. PeerConnectionオブジェクトを生成
peer = new RTCPeerConnection({
"iceServers": [
{ "url": "stun:stun.l.google.com:19302" }
]
});
peer.addStream(localStream);
peer.createOffer(function(sdp) {
peer.setLocalDescription(sdp, function() {
socket.emit('sendOffer',{
"sdp": sdp
});
});
});

20. 先ほど取得したストリームデータをセット
peer = new RTCPeerConnection({
"iceServers": [
{ "url": "stun:stun.l.google.com:19302" }
]
});
peer.addStream(localStream);
peer.createOffer(function(sdp) {
peer.setLocalDescription(sdp, function() {
socket.emit('sendOffer',{
"sdp": sdp
});
});
});

21. 接続元から接続先にオファーを送る

22. 接続元から接続先にオファーを送る

23. シグナリングサーバー

24. SDPをWebSocketで送信
peer = new RTCPeerConnection({
"iceServers": [
{ "url": "stun:stun.l.google.com:19302" }
]
});
peer.addStream(localStream);
peer.createOffer(function(sdp) {
peer.setLocalDescription(sdp, function() {
socket.emit('sendOffer',{
"sdp": sdp
});
});
});

25. 接続先はアンサーを返信

26. 受け取ったオファーからSDPを作成して返信
socket.on('reciveOffer',function(data){
var sdp = new RTCSessionDescription(data.sdp);
peer.setRemoteDescription(sdp, function() {
peer.createAnswer(function(sdp) {
peer.setLocalDescription(sdp, function() {
socket.emit('sendAnswer',{
"sdp": sdp
});
});
});
});
});

27. 接続先から返信を受け取ったらそれをセット
socket.on('reciveAnswer',function(data){
var sdp = new RTCSessionDescription(data.sdp);
peer.setRemoteDescription(sdp);
});

28. Step 3
お互いのネットワークのICE情報を交換する

29. ICE
Interactive Connectivity Establishment

30. IPアドレスやポート番号を
交換しないと通信できない

31. STUNサーバー

32. STUNサーバーは
RTCPeerConnectionオブジェクト生成時に指定済み
peer = new RTCPeerConnection({
"iceServers": [
{ "url": "stun:stun.l.google.com:19302" }
]
});
peer.addStream(localStream);
peer.createOffer(function(sdp) {
peer.setLocalDescription(sdp, function() {
socket.emit('sendOffer',{
"sdp": sdp
});
});
});

33. icecandidateイベントで取得できるので
WebSocketで相手に送信
peer.onicecandidate = function (evt) {
if ( evt.candidate ) {
socket.emit('sendCdi',{
"ice": evt.candidate
});
}
}

34. socket.on('reciveCdi',function(data){
var ice = new RTCIceCandidate(data.ice);
peer.addIceCandidate(ice);
});
ice情報を受け取ったらセット

35. Step 4
video要素にremoteStreamを設置

36. peer.addEventListener("addstream", function(event){
var targetVideo = document.getElementById("remoteVideo");
targetVideo.src = URL.createObjectURL(event.stream);
targetVideo.play();
}, false);
あとは受け取ったストリームデータを
video要素に突っ込むだけ

37. WebRTCの課題
• 対応ブラウザがChrome/OperaとFirefoxのみ
• ルーターやFirewallで通信できないことも
• CPU使用率が半端ない
• ドライバレベルの不具合を引き起こすことも
• 不安定、とにかく不安定

38. HTML5minutes!! vol.01
西畑一馬
Thank you!!