5分でわかるwebrtcの仕組み - html5minutes vol.01
DESCRIPTION
html5minutes vol.01で発表したスライドです。TRANSCRIPT
![Page 1: 5分でわかるWebRTCの仕組み - html5minutes vol.01](https://reader034.vdocuments.mx/reader034/viewer/2022052215/540cce0f7bef0ad7288b6765/html5/thumbnails/1.jpg)
5分でわかる WebRTCの仕組み
HTML5minutes!! vol.01
西畑一馬
![Page 2: 5分でわかるWebRTCの仕組み - html5minutes vol.01](https://reader034.vdocuments.mx/reader034/viewer/2022052215/540cce0f7bef0ad7288b6765/html5/thumbnails/2.jpg)
最初に
![Page 3: 5分でわかるWebRTCの仕組み - html5minutes vol.01](https://reader034.vdocuments.mx/reader034/viewer/2022052215/540cce0f7bef0ad7288b6765/html5/thumbnails/3.jpg)
5分でわかるほど WebRTCは簡単じゃない
![Page 4: 5分でわかるWebRTCの仕組み - html5minutes vol.01](https://reader034.vdocuments.mx/reader034/viewer/2022052215/540cce0f7bef0ad7288b6765/html5/thumbnails/4.jpg)
WebRTCを取り巻くHTML5技術
WebSocket
Web Audio
RTCPeerConnection
video/audio API
getUserMedia API
Media Stream
![Page 5: 5分でわかるWebRTCの仕組み - html5minutes vol.01](https://reader034.vdocuments.mx/reader034/viewer/2022052215/540cce0f7bef0ad7288b6765/html5/thumbnails/5.jpg)
WebRTCを取り巻くHTML5技術
WebSocket
Web Audio
RTCPeerConnection
video/audio API
getUserMedia API
Media Streamとわ本日あたえられた時間は5分しかない
![Page 6: 5分でわかるWebRTCの仕組み - html5minutes vol.01](https://reader034.vdocuments.mx/reader034/viewer/2022052215/540cce0f7bef0ad7288b6765/html5/thumbnails/6.jpg)
WebRTCを取り巻くHTML5技術
WebSocket
Web Audiovideo/audio API
getUserMedia API
Media Streamとわ
RTCPeerConnection
重要なコレに絞って解説
![Page 7: 5分でわかるWebRTCの仕組み - html5minutes vol.01](https://reader034.vdocuments.mx/reader034/viewer/2022052215/540cce0f7bef0ad7288b6765/html5/thumbnails/7.jpg)
そもそもWebRTCって??
![Page 8: 5分でわかるWebRTCの仕組み - html5minutes vol.01](https://reader034.vdocuments.mx/reader034/viewer/2022052215/540cce0f7bef0ad7288b6765/html5/thumbnails/8.jpg)
WebRTC Web Real-Time Communication
![Page 9: 5分でわかるWebRTCの仕組み - html5minutes vol.01](https://reader034.vdocuments.mx/reader034/viewer/2022052215/540cce0f7bef0ad7288b6765/html5/thumbnails/9.jpg)
離れた2台以上のPCで通信する技術
![Page 10: 5分でわかるWebRTCの仕組み - html5minutes vol.01](https://reader034.vdocuments.mx/reader034/viewer/2022052215/540cce0f7bef0ad7288b6765/html5/thumbnails/10.jpg)
ウェブカムの映像や
![Page 11: 5分でわかるWebRTCの仕組み - html5minutes vol.01](https://reader034.vdocuments.mx/reader034/viewer/2022052215/540cce0f7bef0ad7288b6765/html5/thumbnails/11.jpg)
音声やデータなど
![Page 12: 5分でわかるWebRTCの仕組み - html5minutes vol.01](https://reader034.vdocuments.mx/reader034/viewer/2022052215/540cce0f7bef0ad7288b6765/html5/thumbnails/12.jpg)
これまでのビデオチャットは仲介サーバー必要
![Page 13: 5分でわかるWebRTCの仕組み - html5minutes vol.01](https://reader034.vdocuments.mx/reader034/viewer/2022052215/540cce0f7bef0ad7288b6765/html5/thumbnails/13.jpg)
WebRTCはP2PでPC同士が通信を行う
![Page 14: 5分でわかるWebRTCの仕組み - html5minutes vol.01](https://reader034.vdocuments.mx/reader034/viewer/2022052215/540cce0f7bef0ad7288b6765/html5/thumbnails/14.jpg)
WebRTC通信に必要な4つのステップ
![Page 15: 5分でわかるWebRTCの仕組み - html5minutes vol.01](https://reader034.vdocuments.mx/reader034/viewer/2022052215/540cce0f7bef0ad7288b6765/html5/thumbnails/15.jpg)
Step 1
自分のストリームデータを取得
![Page 16: 5分でわかるWebRTCの仕組み - html5minutes vol.01](https://reader034.vdocuments.mx/reader034/viewer/2022052215/540cce0f7bef0ad7288b6765/html5/thumbnails/16.jpg)
getUserMediagetUserMedia( { video:true, audio:true }, function(stream) { localStream = stream; }, function(error) { alert("メディアを取得できませんでした"); });
![Page 17: 5分でわかるWebRTCの仕組み - html5minutes vol.01](https://reader034.vdocuments.mx/reader034/viewer/2022052215/540cce0f7bef0ad7288b6765/html5/thumbnails/17.jpg)
Step 2
お互いのPCのSDPを交換する
![Page 18: 5分でわかるWebRTCの仕組み - html5minutes vol.01](https://reader034.vdocuments.mx/reader034/viewer/2022052215/540cce0f7bef0ad7288b6765/html5/thumbnails/18.jpg)
SDP Session Description Protocol
![Page 19: 5分でわかるWebRTCの仕組み - html5minutes vol.01](https://reader034.vdocuments.mx/reader034/viewer/2022052215/540cce0f7bef0ad7288b6765/html5/thumbnails/19.jpg)
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 }); });});
![Page 20: 5分でわかるWebRTCの仕組み - html5minutes vol.01](https://reader034.vdocuments.mx/reader034/viewer/2022052215/540cce0f7bef0ad7288b6765/html5/thumbnails/20.jpg)
先ほど取得したストリームデータをセット
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 }); });});
![Page 21: 5分でわかるWebRTCの仕組み - html5minutes vol.01](https://reader034.vdocuments.mx/reader034/viewer/2022052215/540cce0f7bef0ad7288b6765/html5/thumbnails/21.jpg)
接続元から接続先にオファーを送る
![Page 22: 5分でわかるWebRTCの仕組み - html5minutes vol.01](https://reader034.vdocuments.mx/reader034/viewer/2022052215/540cce0f7bef0ad7288b6765/html5/thumbnails/22.jpg)
接続元から接続先にオファーを送る
![Page 23: 5分でわかるWebRTCの仕組み - html5minutes vol.01](https://reader034.vdocuments.mx/reader034/viewer/2022052215/540cce0f7bef0ad7288b6765/html5/thumbnails/23.jpg)
シグナリングサーバー
![Page 24: 5分でわかるWebRTCの仕組み - html5minutes vol.01](https://reader034.vdocuments.mx/reader034/viewer/2022052215/540cce0f7bef0ad7288b6765/html5/thumbnails/24.jpg)
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 }); });});
![Page 25: 5分でわかるWebRTCの仕組み - html5minutes vol.01](https://reader034.vdocuments.mx/reader034/viewer/2022052215/540cce0f7bef0ad7288b6765/html5/thumbnails/25.jpg)
接続先はアンサーを返信
![Page 26: 5分でわかるWebRTCの仕組み - html5minutes vol.01](https://reader034.vdocuments.mx/reader034/viewer/2022052215/540cce0f7bef0ad7288b6765/html5/thumbnails/26.jpg)
受け取ったオファーから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 }); }); }); });});
![Page 27: 5分でわかるWebRTCの仕組み - html5minutes vol.01](https://reader034.vdocuments.mx/reader034/viewer/2022052215/540cce0f7bef0ad7288b6765/html5/thumbnails/27.jpg)
接続先から返信を受け取ったらそれをセット
socket.on('reciveAnswer',function(data){ var sdp = new RTCSessionDescription(data.sdp); peer.setRemoteDescription(sdp);});
![Page 28: 5分でわかるWebRTCの仕組み - html5minutes vol.01](https://reader034.vdocuments.mx/reader034/viewer/2022052215/540cce0f7bef0ad7288b6765/html5/thumbnails/28.jpg)
Step 3
お互いのネットワークのICE情報を交換する
![Page 29: 5分でわかるWebRTCの仕組み - html5minutes vol.01](https://reader034.vdocuments.mx/reader034/viewer/2022052215/540cce0f7bef0ad7288b6765/html5/thumbnails/29.jpg)
ICE Interactive Connectivity Establishment
![Page 30: 5分でわかるWebRTCの仕組み - html5minutes vol.01](https://reader034.vdocuments.mx/reader034/viewer/2022052215/540cce0f7bef0ad7288b6765/html5/thumbnails/30.jpg)
IPアドレスやポート番号を 交換しないと通信できない
![Page 31: 5分でわかるWebRTCの仕組み - html5minutes vol.01](https://reader034.vdocuments.mx/reader034/viewer/2022052215/540cce0f7bef0ad7288b6765/html5/thumbnails/31.jpg)
STUNサーバー
![Page 32: 5分でわかるWebRTCの仕組み - html5minutes vol.01](https://reader034.vdocuments.mx/reader034/viewer/2022052215/540cce0f7bef0ad7288b6765/html5/thumbnails/32.jpg)
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 }); });});
![Page 33: 5分でわかるWebRTCの仕組み - html5minutes vol.01](https://reader034.vdocuments.mx/reader034/viewer/2022052215/540cce0f7bef0ad7288b6765/html5/thumbnails/33.jpg)
icecandidateイベントで取得できるのでWebSocketで相手に送信
peer.onicecandidate = function (evt) { if ( evt.candidate ) { socket.emit('sendCdi',{ "ice": evt.candidate }); }}
![Page 34: 5分でわかるWebRTCの仕組み - html5minutes vol.01](https://reader034.vdocuments.mx/reader034/viewer/2022052215/540cce0f7bef0ad7288b6765/html5/thumbnails/34.jpg)
socket.on('reciveCdi',function(data){ var ice = new RTCIceCandidate(data.ice); peer.addIceCandidate(ice);});
ice情報を受け取ったらセット
![Page 35: 5分でわかるWebRTCの仕組み - html5minutes vol.01](https://reader034.vdocuments.mx/reader034/viewer/2022052215/540cce0f7bef0ad7288b6765/html5/thumbnails/35.jpg)
Step 4
video要素にremoteStreamを設置
![Page 36: 5分でわかるWebRTCの仕組み - html5minutes vol.01](https://reader034.vdocuments.mx/reader034/viewer/2022052215/540cce0f7bef0ad7288b6765/html5/thumbnails/36.jpg)
peer.addEventListener("addstream", function(event){ var targetVideo = document.getElementById("remoteVideo"); targetVideo.src = URL.createObjectURL(event.stream); targetVideo.play();}, false);
あとは受け取ったストリームデータを video要素に突っ込むだけ
![Page 37: 5分でわかるWebRTCの仕組み - html5minutes vol.01](https://reader034.vdocuments.mx/reader034/viewer/2022052215/540cce0f7bef0ad7288b6765/html5/thumbnails/37.jpg)
WebRTCの課題• 対応ブラウザがChrome/OperaとFirefoxのみ • ルーターやFirewallで通信できないことも • CPU使用率が半端ない • ドライバレベルの不具合を引き起こすことも • 不安定、とにかく不安定
![Page 38: 5分でわかるWebRTCの仕組み - html5minutes vol.01](https://reader034.vdocuments.mx/reader034/viewer/2022052215/540cce0f7bef0ad7288b6765/html5/thumbnails/38.jpg)
HTML5minutes!! vol.01
西畑一馬
Thank you!!