Download as PDF, PPTX
- 1 / 267
- 2 / 267
- 3 / 267
- 4 / 267
- 5 / 267
- 6 / 267
- 7 / 267
- 8 / 267
- 9 / 267
- 10 / 267
- 11 / 267
- 12 / 267
Most read - 13 / 267
- 14 / 267
- 15 / 267
- 16 / 267
- 17 / 267
- 18 / 267
- 19 / 267
- 20 / 267
![navigator.getUserMedia =
navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia ;
window.URL =
window.URL ||
window.webkitURL ;
window.RTCPeerConnection =
window.RTCPeerConnection ||
window.webkitRTCPeerConnection ||
window.mozRTCPeerConnection ;
window.RTCSessionDescription =
window.RTCSessionDescription ||
window.webkitRTCSessionDescription ||
window.mozRTCSessionDescription ;
window.RTCIceCandidate =
window.RTCIceCandidate ||
window.webkitRTCIceCandidate ||
window.mozRTCIceCandidate ;
var ws = null;
var peer = null;
function initialize() {
var secure = location.protocol === 'https:';
var protocol = secure ? 'wss' : 'ws';
var url = protocol + '://' + location.host + '/';
ws = new WebSocket(url);
peer = new RTCPeerConnection({
iceServers: [
{url: 'stun:stun.l.google.com:19302'},
{url: 'stun:23.21.150.121'}
]
});
navigator.getUserMedia(
{audio: true, video: true},
function(stream) {
var video = document.getElementById('local');
video.src = URL.createObjectURL(stream);
video.play();
peer.addStream(stream);
},
function(error) {
console.error(error);
}
);
ws.addEventListener('message', function(evt) {
var data = JSON.parse(evt.data);
if (!data.sdp) {return;}
var sdp = data.sdp;
var description = new RTCSessionDescription(sdp);
peer.setRemoteDescription(description, function() {
if (description.type === 'offer') {
answer();
}
});
});
ws.addEventListener('message', function(evt) {
var data = JSON.parse(evt.data);
if (!data.candidate) {return;}
var candidate = new RTCIceCandidate(data.candidate);
peer.addIceCandidate(candidate);
});
peer.addEventListener('icecandidate', function(evt) {
if (!evt.candidate) {return;}
var candidate = evt.candidate;
ws.send(JSON.stringify({candidate: candidate}));
});
peer.addEventListener('addstream', function(evt) {
var video = document.getElementById('remote');
video.src = URL.createObjectURL(evt.stream);
video.play();
});
var offerbtn = document.getElementById('offer_button');
offerbtn.addEventListener('click', offer);
}
function offer() {
peer.createOffer(
function(offer) {
peer.setLocalDescription(offer, function() {
ws.send(JSON.stringify({sdp: offer}));
});
},
function(error) {
console.error(error);
}
);
}
function answer() {
peer.createAnswer(
function(answer) {
peer.setLocalDescription(answer, function() {
ws.send(JSON.stringify({sdp: answer}));
});
},
function(error) {
console.error(error);
}
);
}
window.addEventListener('load', initialize);
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="styles/style.css" />
<script src="scripts/script.js"></script>
<title>WebRTC Sample</title>
</head>
<body>
<input type="button" value="offer" id="offer_button" />
<video id="local" autoplay="autoplay"></video>
<video id="remote" autoplay="autoplay"></video>
</body>
</html>](https://image.slidesharecdn.com/20140805technicaldescriptionofwebrtcpublicedition-140807000856-phpapp01/85/WebRTC-96-320.jpg)
![navigator.getUserMedia =
navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia ;
window.URL =
window.URL ||
window.webkitURL ;
window.RTCPeerConnection =
window.RTCPeerConnection ||
window.webkitRTCPeerConnection ||
window.mozRTCPeerConnection ;
window.RTCSessionDescription =
window.RTCSessionDescription ||
window.webkitRTCSessionDescription ||
window.mozRTCSessionDescription ;
window.RTCIceCandidate =
window.RTCIceCandidate ||
window.webkitRTCIceCandidate ||
window.mozRTCIceCandidate ;
var ws = null;
var peer = null;
function initialize() {
var secure = location.protocol === 'https:';
var protocol = secure ? 'wss' : 'ws';
var url = protocol + '://' + location.host + '/';
ws = new WebSocket(url);
peer = new RTCPeerConnection({
iceServers: [
{url: 'stun:stun.l.google.com:19302'},
{url: 'stun:23.21.150.121'}
]
});
navigator.getUserMedia(
{audio: true, video: true},
function(stream) {
var video = document.getElementById('local');
video.src = URL.createObjectURL(stream);
video.play();
peer.addStream(stream);
},
function(error) {
console.error(error);
}
);
ws.addEventListener('message', function(evt) {
var data = JSON.parse(evt.data);
if (!data.sdp) {return;}
var sdp = data.sdp;
var description = new RTCSessionDescription(sdp);
peer.setRemoteDescription(description, function() {
if (description.type === 'offer') {
answer();
}
});
});
ws.addEventListener('message', function(evt) {
var data = JSON.parse(evt.data);
if (!data.candidate) {return;}
var candidate = new RTCIceCandidate(data.candidate);
peer.addIceCandidate(candidate);
});
peer.addEventListener('icecandidate', function(evt) {
if (!evt.candidate) {return;}
var candidate = evt.candidate;
ws.send(JSON.stringify({candidate: candidate}));
});
peer.addEventListener('addstream', function(evt) {
var video = document.getElementById('remote');
video.src = URL.createObjectURL(evt.stream);
video.play();
});
var offerbtn = document.getElementById('offer_button');
offerbtn.addEventListener('click', offer);
}
function offer() {
peer.createOffer(
function(offer) {
peer.setLocalDescription(offer, function() {
ws.send(JSON.stringify({sdp: offer}));
});
},
function(error) {
console.error(error);
}
);
}
function answer() {
peer.createAnswer(
function(answer) {
peer.setLocalDescription(answer, function() {
ws.send(JSON.stringify({sdp: answer}));
});
},
function(error) {
console.error(error);
}
);
}
window.addEventListener('load', initialize);
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="styles/style.css" />
<script src="scripts/script.js"></script>
<title>WebRTC Sample</title>
</head>
<body>
<input type="button" value="offer" id="offer_button" />
<video id="local" autoplay="autoplay"></video>
<video id="remote" autoplay="autoplay"></video>
</body>
</html>
HTML
ベンダープレフィックスの
処理
WebSocketと
PeerConnectionの
初期化
ユーザメディアの取得
WebSocketの
イベント登録
PeerConnectionの
イベント登録
変数宣言
ボタンのイベント登録
offer処理
answer処理
onload](https://image.slidesharecdn.com/20140805technicaldescriptionofwebrtcpublicedition-140807000856-phpapp01/85/WebRTC-97-320.jpg)
Skip to main content
Uploaded byContest Ntt-west
WebRTCの技術解説 公開版
第1回NTT-WEST学生向けアプリ開発コンテスト（WebRTC）の勉強会資料です。 ※コンテスト情報はFacebookページよりご覧ください！ https://www.facebook.com/nttw.w.con
