5分でわかる WebRTCの仕組み

HTML5minutes!! vol.01

西畑一馬

最初に

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

WebRTCを取り巻くHTML5技術

WebSocket

Web Audio

RTCPeerConnection

video/audio API

getUserMedia API

Media Stream

WebRTCを取り巻くHTML5技術

WebSocket

Web Audio

RTCPeerConnection

video/audio API

getUserMedia API

Media Streamとわ本日あたえられた時間は5分しかない

WebRTCを取り巻くHTML5技術

WebSocket

Web Audiovideo/audio API

getUserMedia API

Media Streamとわ

RTCPeerConnection

重要なコレに絞って解説

そもそもWebRTCって??

WebRTC Web Real-Time Communication

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

ウェブカムの映像や

音声やデータなど

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

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

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

Step 1

自分のストリームデータを取得

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

Step 2

お互いのPCのSDPを交換する

SDP Session Description Protocol

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 }); });});

先ほど取得したストリームデータをセット

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 }); });});

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

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

シグナリングサーバー

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 }); });});

接続先はアンサーを返信

受け取ったオファーから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 }); }); }); });});

接続先から返信を受け取ったらそれをセット

socket.on('reciveAnswer',function(data){ var sdp = new RTCSessionDescription(data.sdp); peer.setRemoteDescription(sdp);});

Step 3

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

ICE Interactive Connectivity Establishment

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

STUNサーバー

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 }); });});

icecandidateイベントで取得できるのでWebSocketで相手に送信

peer.onicecandidate = function (evt) { if ( evt.candidate ) { socket.emit('sendCdi',{ "ice": evt.candidate }); }}

socket.on('reciveCdi',function(data){ var ice = new RTCIceCandidate(data.ice); peer.addIceCandidate(ice);});

ice情報を受け取ったらセット

Step 4

video要素にremoteStreamを設置

peer.addEventListener("addstream", function(event){ var targetVideo = document.getElementById("remoteVideo"); targetVideo.src = URL.createObjectURL(event.stream); targetVideo.play();}, false);

あとは受け取ったストリームデータを video要素に突っ込むだけ

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

HTML5minutes!! vol.01

西畑一馬

Thank you!!