39. navigator.getUserMedia =
navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia ;
window.URL =
window.URL ||
window.webkitURL ;
window.addEventListener('load', function() {
navigator.getUserMedia(
{video: true, audio: true},
function(stream) {
var video = document.getElementById('video');
video.src = window.URL.createObjectURL(stream);
video.play();
},
function(error) {
console.error(error);
}
);
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="script.js"></script>
<title>getUserMedia Sample</title>
</head>
<body>
<video id="video"></video>
</body>
</html>
40. navigator.getUserMedia =
navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia ;
window.URL =
window.URL ||
window.webkitURL ;
window.addEventListener('load', function() {
navigator.getUserMedia(
{video: true, audio: true},
function(stream) {
var video = document.getElementById('video');
video.src = window.URL.createObjectURL(stream);
video.play();
},
function(error) {
console.error(error);
}
);
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="script.js"></script>
<title>getUserMedia Sample</title>
</head>
<body>
<video id="video"></video>
</body>
</html>
54. navigator.getUserMedia =
navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia ;
window.URL =
window.URL ||
window.webkitURL ;
window.addEventListener('load', function() {
navigator.getUserMedia(
{video: true, audio: true},
function(stream) {
var video = document.getElementById('video');
video.src = window.URL.createObjectURL(stream);
video.play();
},
function(error) {
console.error(error);
}
);
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="script.js"></script>
<title>getUserMedia Sample</title>
</head>
<body>
<video id="video"></video>
</body>
</html>
119. 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>
120. 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>
121. <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<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>
122. <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<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>
125. var ws = null;
var peer = null;
function initialize() {
// other slides
}
window.addEventListener('load', initialize);
126. 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'}
]
});
127. 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'}
]
});
128. 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);
}
);
129. 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);
}
);
130. 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);
});
131. 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);
});
132. 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);
});
133. 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);
});
134. 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);
});
135. 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);
});
136. 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);
});
137. 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);
});
138. 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();
});
139. 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();
});
140. 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();
});
141. 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();
});
142. 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();
});
143. var offerbtn = document.getElementById('offer_button');
offerbtn.addEventListener('click', offer);
160. 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>
166. navigator.getUserMedia =
navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia ;
window.URL =
window.URL ||
window.webkitURL ;
var PEERJS_API_KEY = '[PEERJS_API_KEY]';
var ws = null;
var peer = null;
var selfid = null;
var localStream = null;
function initializePeer(callback) {
peer = new Peer({key: PEERJS_API_KEY});
peer.on('open', function(id) {
selfid = id;
callback();
});
peer.on('call', function(mediaConnection) {
mediaConnection.answer(localStream);
settingMediaConnection(mediaConnection);
});
peer.on('close', function() {
peer.destroy();
});
peer.on('error', function(err) {
console.error(err);
});
}
function initializeMedia(callback) {
navigator.getUserMedia(
{audio: true, video: true},
function(stream) {
localStream = stream;
var video = document.getElementById('local');
video.src = URL.createObjectURL(stream);
video.play();
callback();
},
function(error) {
console.error(error);
}
);
}
function initializeWebSocket(callback) {
var secure = location.protocol === 'https:';
var protocol = secure ? 'wss' : 'ws';
var url = protocol + '://' + location.host + '/';
ws = new WebSocket(url);
ws.addEventListener('open', function() {
callback();
});
ws.addEventListener('message', function(evt) {
var remoteid = evt.data;
var mediaConnection =
peer.call(remoteid, localStream);
settingMediaConnection(mediaConnection);
});
}
function settingMediaConnection(mediaConnection) {
var remoteid = mediaConnection.peer;
var remoteStream = null;
var video = null;
mediaConnection.on('stream', function(stream) {
video = document.createElement('video');
video.src = URL.createObjectURL(stream);
video.play();
var parent = document.getElementById('remotes');
parent.appendChild(video);
});
mediaConnection.on('close', function() {
URL.revokeObjectURL(video.src);
video.parentNode.removeChild(video);
});
mediaConnection.on('error', function() {
console.error(err);
});
}
function initialize() {
initializeMedia(function() {
initializePeer(function() {
initializeWebSocket(function() {
ws.send(selfid);
});
});
});
}
window.addEventListener('load', initialize);
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="styles/style.css" />
<script src="http://cdn.peerjs.com/0.3/peer.js"></script>
<script src="scripts/script.js"></script>
<title>PeerJS Sample</title>
</head>
<body>
<video id="local"></video>
<div id="remotes"></div>
</body>
</html>
167. navigator.getUserMedia =
navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia ;
window.URL =
window.URL ||
window.webkitURL ;
var PEERJS_API_KEY = '[PEERJS_API_KEY]';
var ws = null;
var peer = null;
var selfid = null;
var localStream = null;
function initializePeer(callback) {
peer = new Peer({key: PEERJS_API_KEY});
peer.on('open', function(id) {
selfid = id;
callback();
});
peer.on('call', function(mediaConnection) {
mediaConnection.answer(localStream);
settingMediaConnection(mediaConnection);
});
peer.on('close', function() {
peer.destroy();
});
peer.on('error', function(err) {
console.error(err);
});
}
function initializeMedia(callback) {
navigator.getUserMedia(
{audio: true, video: true},
function(stream) {
localStream = stream;
var video = document.getElementById('local');
video.src = URL.createObjectURL(stream);
video.play();
callback();
},
function(error) {
console.error(error);
}
);
}
function initializeWebSocket(callback) {
var secure = location.protocol === 'https:';
var protocol = secure ? 'wss' : 'ws';
var url = protocol + '://' + location.host + '/';
ws = new WebSocket(url);
ws.addEventListener('open', function() {
callback();
});
ws.addEventListener('message', function(evt) {
var remoteid = evt.data;
var mediaConnection =
peer.call(remoteid, localStream);
settingMediaConnection(mediaConnection);
});
}
function settingMediaConnection(mediaConnection) {
var remoteid = mediaConnection.peer;
var remoteStream = null;
var video = null;
mediaConnection.on('stream', function(stream) {
video = document.createElement('video');
video.src = URL.createObjectURL(stream);
video.play();
var parent = document.getElementById('remotes');
parent.appendChild(video);
});
mediaConnection.on('close', function() {
URL.revokeObjectURL(video.src);
video.parentNode.removeChild(video);
});
mediaConnection.on('error', function() {
console.error(err);
});
}
function initialize() {
initializeMedia(function() {
initializePeer(function() {
initializeWebSocket(function() {
ws.send(selfid);
});
});
});
}
window.addEventListener('load', initialize);
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="styles/style.css" />
<script src="http://cdn.peerjs.com/0.3/peer.js"></script>
<script src="scripts/script.js"></script>
<title>PeerJS Sample</title>
</head>
<body>
<video id="local"></video>
<div id="remotes"></div>
</body>
</html>
168. <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="styles/style.css" />
<script src="http://cdn.peerjs.com/0.3/peer.js"></script>
<script src="scripts/script.js"></script>
<title>PeerJS Sample</title>
</head>
<body>
<video id="local"></video>
<div id="remotes"></div>
</body>
</html>
169. <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="styles/style.css" />
<script src="http://cdn.peerjs.com/0.3/peer.js"></script>
<script src="scripts/script.js"></script>
<title>PeerJS Sample</title>
</head>
<body>
<video id="local"></video>
<div id="remotes"></div>
</body>
</html>
172. function initializePeer(callback) {
peer = new Peer({key: PEERJS_API_KEY});
peer.on('open', function(id) {
selfid = id;
callback();
});
peer.on('call', function(mediaConnection) {
mediaConnection.answer(localStream);
settingMediaConnection(mediaConnection);
});
peer.on('close', function() {
peer.destroy();
});
peer.on('error', function(err) {
console.error(err);
});
}
173. function initializePeer(callback) {
peer = new Peer({key: PEERJS_API_KEY});
peer.on('open', function(id) {
selfid = id;
callback();
});
peer.on('call', function(mediaConnection) {
mediaConnection.answer(localStream);
settingMediaConnection(mediaConnection);
});
peer.on('close', function() {
peer.destroy();
});
peer.on('error', function(err) {
console.error(err);
});
}
174. function initializePeer(callback) {
peer = new Peer({key: PEERJS_API_KEY});
peer.on('open', function(id) {
selfid = id;
callback();
});
peer.on('call', function(mediaConnection) {
mediaConnection.answer(localStream);
settingMediaConnection(mediaConnection);
});
peer.on('close', function() {
peer.destroy();
});
peer.on('error', function(err) {
console.error(err);
});
}
175. function initializePeer(callback) {
peer = new Peer({key: PEERJS_API_KEY});
peer.on('open', function(id) {
selfid = id;
callback();
});
peer.on('call', function(mediaConnection) {
mediaConnection.answer(localStream);
settingMediaConnection(mediaConnection);
});
peer.on('close', function() {
peer.destroy();
});
peer.on('error', function(err) {
console.error(err);
});
}
176. function initializePeer(callback) {
peer = new Peer({key: PEERJS_API_KEY});
peer.on('open', function(id) {
selfid = id;
callback();
});
peer.on('call', function(mediaConnection) {
mediaConnection.answer(localStream);
settingMediaConnection(mediaConnection);
});
peer.on('close', function() {
peer.destroy();
});
peer.on('error', function(err) {
console.error(err);
});
}
177. function initializePeer(callback) {
peer = new Peer({key: PEERJS_API_KEY});
peer.on('open', function(id) {
selfid = id;
callback();
});
peer.on('call', function(mediaConnection) {
mediaConnection.answer(localStream);
settingMediaConnection(mediaConnection);
});
peer.on('close', function() {
peer.destroy();
});
peer.on('error', function(err) {
console.error(err);
});
}
178. function initializePeer(callback) {
peer = new Peer({key: PEERJS_API_KEY});
peer.on('open', function(id) {
selfid = id;
callback();
});
peer.on('call', function(mediaConnection) {
mediaConnection.answer(localStream);
settingMediaConnection(mediaConnection);
});
peer.on('close', function() {
peer.destroy();
});
peer.on('error', function(err) {
console.error(err);
});
}
182. function initializeWebSocket(callback) {
var secure = location.protocol === 'https:';
var protocol = secure ? 'wss' : 'ws';
var url = protocol + '://' + location.host + '/';
ws = new WebSocket(url);
ws.addEventListener('open', function() {
callback();
});
ws.addEventListener('message', function(evt) {
var remoteid = evt.data;
var mediaConnection =
peer.call(remoteid, localStream);
settingMediaConnection(mediaConnection);
});
}
183. function initializeWebSocket(callback) {
var secure = location.protocol === 'https:';
var protocol = secure ? 'wss' : 'ws';
var url = protocol + '://' + location.host + '/';
ws = new WebSocket(url);
ws.addEventListener('open', function() {
callback();
});
ws.addEventListener('message', function(evt) {
var remoteid = evt.data;
var mediaConnection =
peer.call(remoteid, localStream);
settingMediaConnection(mediaConnection);
});
}
184. function initializeWebSocket(callback) {
var secure = location.protocol === 'https:';
var protocol = secure ? 'wss' : 'ws';
var url = protocol + '://' + location.host + '/';
ws = new WebSocket(url);
ws.addEventListener('open', function() {
callback();
});
ws.addEventListener('message', function(evt) {
var remoteid = evt.data;
var mediaConnection =
peer.call(remoteid, localStream);
settingMediaConnection(mediaConnection);
});
}
185. function initializeWebSocket(callback) {
var secure = location.protocol === 'https:';
var protocol = secure ? 'wss' : 'ws';
var url = protocol + '://' + location.host + '/';
ws = new WebSocket(url);
ws.addEventListener('open', function() {
callback();
});
ws.addEventListener('message', function(evt) {
var remoteid = evt.data;
var mediaConnection =
peer.call(remoteid, localStream);
settingMediaConnection(mediaConnection);
});
}
186. function initializeWebSocket(callback) {
var secure = location.protocol === 'https:';
var protocol = secure ? 'wss' : 'ws';
var url = protocol + '://' + location.host + '/';
ws = new WebSocket(url);
ws.addEventListener('open', function() {
callback();
});
ws.addEventListener('message', function(evt) {
var remoteid = evt.data;
var mediaConnection =
peer.call(remoteid, localStream);
settingMediaConnection(mediaConnection);
});
}
187. function initializeWebSocket(callback) {
var secure = location.protocol === 'https:';
var protocol = secure ? 'wss' : 'ws';
var url = protocol + '://' + location.host + '/';
ws = new WebSocket(url);
ws.addEventListener('open', function() {
callback();
});
ws.addEventListener('message', function(evt) {
var remoteid = evt.data;
var mediaConnection =
peer.call(remoteid, localStream);
settingMediaConnection(mediaConnection);
});
}
188. function settingMediaConnection(mediaConnection) {
var remoteid = mediaConnection.peer;
var remoteStream = null;
var video = null;
mediaConnection.on('stream', function(stream) {
video = document.createElement('video');
video.src = URL.createObjectURL(stream);
video.play();
var parent = document.getElementById('remotes');
parent.appendChild(video);
});
mediaConnection.on('close', function() {
URL.revokeObjectURL(video.src);
video.parentNode.removeChild(video);
});
mediaConnection.on('error', function() {
console.error(err);
});
}
189. function settingMediaConnection(mediaConnection) {
var remoteid = mediaConnection.peer;
var remoteStream = null;
var video = null;
mediaConnection.on('stream', function(stream) {
video = document.createElement('video');
video.src = URL.createObjectURL(stream);
video.play();
var parent = document.getElementById('remotes');
parent.appendChild(video);
});
mediaConnection.on('close', function() {
URL.revokeObjectURL(video.src);
video.parentNode.removeChild(video);
});
mediaConnection.on('error', function() {
console.error(err);
});
}
190. function settingMediaConnection(mediaConnection) {
var remoteid = mediaConnection.peer;
var remoteStream = null;
var video = null;
mediaConnection.on('stream', function(stream) {
video = document.createElement('video');
video.src = URL.createObjectURL(stream);
video.play();
var parent = document.getElementById('remotes');
parent.appendChild(video);
});
mediaConnection.on('close', function() {
URL.revokeObjectURL(video.src);
video.parentNode.removeChild(video);
});
mediaConnection.on('error', function() {
console.error(err);
});
}
191. function settingMediaConnection(mediaConnection) {
var remoteid = mediaConnection.peer;
var remoteStream = null;
var video = null;
mediaConnection.on('stream', function(stream) {
video = document.createElement('video');
video.src = URL.createObjectURL(stream);
video.play();
var parent = document.getElementById('remotes');
parent.appendChild(video);
});
mediaConnection.on('close', function() {
URL.revokeObjectURL(video.src);
video.parentNode.removeChild(video);
});
mediaConnection.on('error', function() {
console.error(err);
});
}
192. function settingMediaConnection(mediaConnection) {
var remoteid = mediaConnection.peer;
var remoteStream = null;
var video = null;
mediaConnection.on('stream', function(stream) {
video = document.createElement('video');
video.src = URL.createObjectURL(stream);
video.play();
var parent = document.getElementById('remotes');
parent.appendChild(video);
});
mediaConnection.on('close', function() {
URL.revokeObjectURL(video.src);
video.parentNode.removeChild(video);
});
mediaConnection.on('error', function() {
console.error(err);
});
}
193. function settingMediaConnection(mediaConnection) {
var remoteid = mediaConnection.peer;
var remoteStream = null;
var video = null;
mediaConnection.on('stream', function(stream) {
video = document.createElement('video');
video.src = URL.createObjectURL(stream);
video.play();
var parent = document.getElementById('remotes');
parent.appendChild(video);
});
mediaConnection.on('close', function() {
URL.revokeObjectURL(video.src);
video.parentNode.removeChild(video);
});
mediaConnection.on('error', function() {
console.error(err);
});
}
196. navigator.getUserMedia =
navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia ;
window.URL =
window.URL ||
window.webkitURL ;
var PEERJS_API_KEY = '[PEERJS_API_KEY]';
var ws = null;
var peer = null;
var selfid = null;
var localStream = null;
function initializePeer(callback) {
peer = new Peer({key: PEERJS_API_KEY});
peer.on('open', function(id) {
selfid = id;
callback();
});
peer.on('call', function(mediaConnection) {
mediaConnection.answer(localStream);
settingMediaConnection(mediaConnection);
});
peer.on('close', function() {
peer.destroy();
});
peer.on('error', function(err) {
console.error(err);
});
}
function initializeMedia(callback) {
navigator.getUserMedia(
{audio: true, video: true},
function(stream) {
localStream = stream;
var video = document.getElementById('local');
video.src = URL.createObjectURL(stream);
video.play();
callback();
},
function(error) {
console.error(error);
}
);
}
function initializeWebSocket(callback) {
var secure = location.protocol === 'https:';
var protocol = secure ? 'wss' : 'ws';
var url = protocol + '://' + location.host + '/';
ws = new WebSocket(url);
ws.addEventListener('open', function() {
callback();
});
ws.addEventListener('message', function(evt) {
var remoteid = evt.data;
var mediaConnection =
peer.call(remoteid, localStream);
settingMediaConnection(mediaConnection);
});
}
function settingMediaConnection(mediaConnection) {
var remoteid = mediaConnection.peer;
var remoteStream = null;
var video = null;
mediaConnection.on('stream', function(stream) {
video = document.createElement('video');
video.src = URL.createObjectURL(stream);
video.play();
var parent = document.getElementById('remotes');
parent.appendChild(video);
});
mediaConnection.on('close', function() {
URL.revokeObjectURL(video.src);
video.parentNode.removeChild(video);
});
mediaConnection.on('error', function() {
console.error(err);
});
}
function initialize() {
initializeMedia(function() {
initializePeer(function() {
initializeWebSocket(function() {
ws.send(selfid);
});
});
});
}
window.addEventListener('load', initialize);
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="styles/style.css" />
<script src="http://cdn.peerjs.com/0.3/peer.js"></script>
<script src="scripts/script.js"></script>
<title>PeerJS Sample</title>
</head>
<body>
<video id="local"></video>
<div id="remotes"></div>
</body>
</html>
199. navigator.getUserMedia =
navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia ;
window.URL =
window.URL ||
window.webkitURL ;
var SKYWAY_API_KEY = '[SKYWAY_API_KEY]';
var peer = null;
var selfid = null;
var localStream = null;
function initializePeer(callback) {
peer = new Peer({key: SKYWAY_API_KEY});
peer.on('open', function(id) {
selfid = id;
callback();
});
peer.on('call', function(mediaConnection) {
mediaConnection.answer(localStream);
settingMediaConnection(mediaConnection);
});
peer.on('close', function() {
peer.destroy();
});
peer.on('error', function(err) {
console.error(err);
});
}
function initializeMedia(callback) {
navigator.getUserMedia(
{audio: true, video: true},
function(stream) {
localStream = stream;
var video = document.getElementById('local');
video.src = URL.createObjectURL(stream);
video.play();
callback();
},
function(error) {
console.error(error);
}
);
}
function callRemoteAll() {
peer.listAllPeers(function(remoteids) {
for (var i = 0; i < remoteids.length; i++) {
var remoteid = remoteids[i];
var mediaConnection =
peer.call(remoteid, localStream);
settingMediaConnection(mediaConnection);
}
});
}
function settingMediaConnection(mediaConnection) {
var remoteid = mediaConnection.peer;
var remoteStream = null;
var video = null;
mediaConnection.on('stream', function(stream) {
video = document.createElement('video');
video.src = URL.createObjectURL(stream);
video.play();
var parent = document.getElementById('remotes');
parent.appendChild(video);
});
mediaConnection.on('close', function() {
URL.revokeObjectURL(video.src);
video.parentNode.removeChild(video);
});
mediaConnection.on('error', function() {
console.error(err);
});
}
function initialize() {
initializeMedia(function() {
initializePeer(function() {
callRemoteAll();
});
});
}
window.addEventListener('load', initialize);
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="styles/style.css" />
<script src="https://skyway.io/dist/v2/0.3/peer.js"></
script>
<script src="scripts/script.js"></script>
<title>SkyWay Sample</title>
</head>
<body>
<video id="local"></video>
<div id="remotes"></div>
</body>
</html>
200. navigator.getUserMedia =
navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia ;
window.URL =
window.URL ||
window.webkitURL ;
var SKYWAY_API_KEY = '[SKYWAY_API_KEY]';
var peer = null;
var selfid = null;
var localStream = null;
function initializePeer(callback) {
peer = new Peer({key: SKYWAY_API_KEY});
peer.on('open', function(id) {
selfid = id;
callback();
});
peer.on('call', function(mediaConnection) {
mediaConnection.answer(localStream);
settingMediaConnection(mediaConnection);
});
peer.on('close', function() {
peer.destroy();
});
peer.on('error', function(err) {
console.error(err);
});
}
function initializeMedia(callback) {
navigator.getUserMedia(
{audio: true, video: true},
function(stream) {
localStream = stream;
var video = document.getElementById('local');
video.src = URL.createObjectURL(stream);
video.play();
callback();
},
function(error) {
console.error(error);
}
);
}
function callRemoteAll() {
peer.listAllPeers(function(remoteids) {
for (var i = 0; i < remoteids.length; i++) {
var remoteid = remoteids[i];
var mediaConnection =
peer.call(remoteid, localStream);
settingMediaConnection(mediaConnection);
}
});
}
function settingMediaConnection(mediaConnection) {
var remoteid = mediaConnection.peer;
var remoteStream = null;
var video = null;
mediaConnection.on('stream', function(stream) {
video = document.createElement('video');
video.src = URL.createObjectURL(stream);
video.play();
var parent = document.getElementById('remotes');
parent.appendChild(video);
});
mediaConnection.on('close', function() {
URL.revokeObjectURL(video.src);
video.parentNode.removeChild(video);
});
mediaConnection.on('error', function() {
console.error(err);
});
}
function initialize() {
initializeMedia(function() {
initializePeer(function() {
callRemoteAll();
});
});
}
window.addEventListener('load', initialize);
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="styles/style.css" />
<script src="https://skyway.io/dist/v2/0.3/peer.js"></
script>
<script src="scripts/script.js"></script>
<title>SkyWay Sample</title>
</head>
<body>
<video id="local"></video>
<div id="remotes"></div>
</body>
</html>
201. navigator.getUserMedia =
navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia ;
window.URL =
window.URL ||
window.webkitURL ;
var SKYWAY_API_KEY = '[SKYWAY_API_KEY]';
var peer = null;
var selfid = null;
var localStream = null;
function initializePeer(callback) {
peer = new Peer({key: SKYWAY_API_KEY});
peer.on('open', function(id) {
selfid = id;
callback();
});
peer.on('call', function(mediaConnection) {
mediaConnection.answer(localStream);
settingMediaConnection(mediaConnection);
});
peer.on('close', function() {
peer.destroy();
});
peer.on('error', function(err) {
console.error(err);
});
}
function initializeMedia(callback) {
navigator.getUserMedia(
{audio: true, video: true},
function(stream) {
localStream = stream;
var video = document.getElementById('local');
video.src = URL.createObjectURL(stream);
video.play();
callback();
},
function(error) {
console.error(error);
}
);
}
function callRemoteAll() {
var url = REST_API_LIST + SKYWAY_API_KEY;
var xhr = new XMLHttpRequest();
xhr.addEventListener('readystatechange', function() {
if (xhr.readyState != 4) {return;}
if (xhr.status != 200) {return;}
var remoteids = JSON.parse(xhr.responseText);
for (var i = 0; i < remoteids.length; i++) {
var remoteid = remoteids[i];
var mediaConnection =
peer.call(remoteid, localStream);
settingMediaConnection(mediaConnection);
}
});
xhr.open('GET', url);
xhr.send();
}
function settingMediaConnection(mediaConnection) {
var remoteid = mediaConnection.peer;
var remoteStream = null;
var video = null;
mediaConnection.on('stream', function(stream) {
video = document.createElement('video');
video.src = URL.createObjectURL(stream);
video.play();
var parent = document.getElementById('remotes');
parent.appendChild(video);
});
mediaConnection.on('close', function() {
URL.revokeObjectURL(video.src);
video.parentNode.removeChild(video);
});
mediaConnection.on('error', function() {
console.error(err);
});
}
function initialize() {
initializeMedia(function() {
initializePeer(function() {
callRemoteAll();
});
});
}
window.addEventListener('load', initialize);
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="styles/style.css" />
<script src="https://skyway.io/dist/v2/0.3/peer.js"></
script>
<script src="scripts/script.js"></script>
<title>SkyWay Sample</title>
</head>
<body>
<video id="local"></video>
<div id="remotes"></div>
</body>
</html>
202. ...
<link rel="stylesheet" href="styles/style.css" />
<script src="http://cdn.peerjs.com/0.3/peer.js"></script>
<script src="scripts/script.js"></script>
...
...
<link rel="stylesheet" href="styles/style.css" />
<script src="https://skyway.io/dist/v2/0.3/peer.js"></script>
<script src="scripts/script.js"></script>
...
204. ...
var ws = null;
...
function initializeWebSocket(callback) {
var secure = location.protocol === 'https:';
var protocol = secure ? 'wss' : 'ws';
var url = protocol + '://' + location.host + '/';
ws = new WebSocket(url);
ws.addEventListener('open', function() {
callback();
});
ws.addEventListener('message', function(evt) {
var remoteid = evt.data;
var mediaConnection =
peer.call(remoteid, localStream);
settingMediaConnection(mediaConnection);
});
}
...
205. ...
var ws = null;
...
function initializeWebSocket(callback) {
var secure = location.protocol === 'https:';
var protocol = secure ? 'wss' : 'ws';
var url = protocol + '://' + location.host + '/';
ws = new WebSocket(url);
ws.addEventListener('open', function() {
callback();
});
ws.addEventListener('message', function(evt) {
var remoteid = evt.data;
var mediaConnection =
peer.call(remoteid, localStream);
settingMediaConnection(mediaConnection);
});
}
...
210. function initialize() {
initializeMedia(function() {
initializePeer(function() {
initializeWebSocket(function() {
ws.send(selfid);
});
});
});
}
function initialize() {
initializeMedia(function() {
initializePeer(function() {
callRemoteAll();
});
});
}
211. function initialize() {
initializeMedia(function() {
initializePeer(function() {
initializeWebSocket(function() {
ws.send(selfid);
});
});
});
}
function initialize() {
initializeMedia(function() {
initializePeer(function() {
callRemoteAll();
});
});
}
212. navigator.getUserMedia =
navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia ;
window.URL =
window.URL ||
window.webkitURL ;
var SKYWAY_API_KEY = '[SKYWAY_API_KEY]';
var peer = null;
var selfid = null;
var localStream = null;
function initializePeer(callback) {
peer = new Peer({key: SKYWAY_API_KEY});
peer.on('open', function(id) {
selfid = id;
callback();
});
peer.on('call', function(mediaConnection) {
mediaConnection.answer(localStream);
settingMediaConnection(mediaConnection);
});
peer.on('close', function() {
peer.destroy();
});
peer.on('error', function(err) {
console.error(err);
});
}
function initializeMedia(callback) {
navigator.getUserMedia(
{audio: true, video: true},
function(stream) {
localStream = stream;
var video = document.getElementById('local');
video.src = URL.createObjectURL(stream);
video.play();
callback();
},
function(error) {
console.error(error);
}
);
}
function callRemoteAll() {
peer.listAllPeers(function(remoteids) {
for (var i = 0; i < remoteids.length; i++) {
var remoteid = remoteids[i];
var mediaConnection =
peer.call(remoteid, localStream);
settingMediaConnection(mediaConnection);
}
});
}
function settingMediaConnection(mediaConnection) {
var remoteid = mediaConnection.peer;
var remoteStream = null;
var video = null;
mediaConnection.on('stream', function(stream) {
video = document.createElement('video');
video.src = URL.createObjectURL(stream);
video.play();
var parent = document.getElementById('remotes');
parent.appendChild(video);
});
mediaConnection.on('close', function() {
URL.revokeObjectURL(video.src);
video.parentNode.removeChild(video);
});
mediaConnection.on('error', function() {
console.error(err);
});
}
function initialize() {
initializeMedia(function() {
initializePeer(function() {
callRemoteAll();
});
});
}
window.addEventListener('load', initialize);
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="styles/style.css" />
<script src="https://skyway.io/dist/v2/0.3/peer.js"></
script>
<script src="scripts/script.js"></script>
<title>SkyWay Sample</title>
</head>
<body>
<video id="local"></video>
<div id="remotes"></div>
</body>
</html>
218. navigator.getUserMedia({audio: true},
function(inputStream) {
var audioContext = new AudioContext(); // 要ベンダープレフィックス
var mediastreamsource = audioContext.createMediaStreamSource(inputStream);
var scriptProcessor = audioContext.createScriptProcessor(bufferSize, 1, 1);
var mediastreamdestination = audioContext.createMediaStreamDestination();
scriptProcessor.addEventListener('audioprocess', onAudioProcess);
mediastreamsource.connect(scriptProcessor);
scriptProcessor.connect(mediastreamdestination);
var outputStream = mediastreamdestination.stream;
peer.addStream(outputStream);
},
function(error) {}
);
function onAudioProcess(evt) {
var input = evt.inputBuffer.getChannelData(0);
var output = evt.outputBuffer.getChannelData(0);
var bufferData = new Float32Array(bufferSize);
for (var i = 0; i < bufferSize; i++) {
bufferData[i] = (
(input[(i * 2) % bufferSize] + input[(i * 2 + 1) % bufferSize]) / 2 +
input[Math.floor(i / 2) % bufferSize]
) / 2;
}
output.set(bufferData);
}
219. navigator.getUserMedia({audio: true},
function(inputStream) {
var audioContext = new AudioContext(); // 要ベンダープレフィックス
var mediastreamsource = audioContext.createMediaStreamSource(inputStream);
var scriptProcessor = audioContext.createScriptProcessor(bufferSize, 1, 1);
var mediastreamdestination = audioContext.createMediaStreamDestination();
scriptProcessor.addEventListener('audioprocess', onAudioProcess);
mediastreamsource.connect(scriptProcessor);
scriptProcessor.connect(mediastreamdestination);
var outputStream = mediastreamdestination.stream;
peer.addStream(outputStream);
},
function(error) {}
);
function onAudioProcess(evt) {
var input = evt.inputBuffer.getChannelData(0);
var output = evt.outputBuffer.getChannelData(0);
var bufferData = new Float32Array(bufferSize);
for (var i = 0; i < bufferSize; i++) {
bufferData[i] = (
(input[(i * 2) % bufferSize] + input[(i * 2 + 1) % bufferSize]) / 2 +
input[Math.floor(i / 2) % bufferSize]
) / 2;
}
output.set(bufferData);
}
220. navigator.getUserMedia({audio: true},
function(inputStream) {
var audioContext = new AudioContext(); // 要ベンダープレフィックス
var mediastreamsource = audioContext.createMediaStreamSource(inputStream);
var scriptProcessor = audioContext.createScriptProcessor(bufferSize, 1, 1);
var mediastreamdestination = audioContext.createMediaStreamDestination();
scriptProcessor.addEventListener('audioprocess', onAudioProcess);
mediastreamsource.connect(scriptProcessor);
scriptProcessor.connect(mediastreamdestination);
var outputStream = mediastreamdestination.stream;
peer.addStream(outputStream);
},
function(error) {}
);
function onAudioProcess(evt) {
var input = evt.inputBuffer.getChannelData(0);
var output = evt.outputBuffer.getChannelData(0);
var bufferData = new Float32Array(bufferSize);
for (var i = 0; i < bufferSize; i++) {
bufferData[i] = (
(input[(i * 2) % bufferSize] + input[(i * 2 + 1) % bufferSize]) / 2 +
input[Math.floor(i / 2) % bufferSize]
) / 2;
}
output.set(bufferData);
}
221. navigator.getUserMedia({audio: true},
function(inputStream) {
var audioContext = new AudioContext(); // 要ベンダープレフィックス
var mediastreamsource = audioContext.createMediaStreamSource(inputStream);
var scriptProcessor = audioContext.createScriptProcessor(bufferSize, 1, 1);
var mediastreamdestination = audioContext.createMediaStreamDestination();
scriptProcessor.addEventListener('audioprocess', onAudioProcess);
mediastreamsource.connect(scriptProcessor);
scriptProcessor.connect(mediastreamdestination);
var outputStream = mediastreamdestination.stream;
peer.addStream(outputStream);
},
function(error) {}
);
function onAudioProcess(evt) {
var input = evt.inputBuffer.getChannelData(0);
var output = evt.outputBuffer.getChannelData(0);
var bufferData = new Float32Array(bufferSize);
for (var i = 0; i < bufferSize; i++) {
bufferData[i] = (
(input[(i * 2) % bufferSize] + input[(i * 2 + 1) % bufferSize]) / 2 +
input[Math.floor(i / 2) % bufferSize]
) / 2;
}
output.set(bufferData);
}
222. navigator.getUserMedia({audio: true},
function(inputStream) {
var audioContext = new AudioContext(); // 要ベンダープレフィックス
var mediastreamsource = audioContext.createMediaStreamSource(inputStream);
var scriptProcessor = audioContext.createScriptProcessor(bufferSize, 1, 1);
var mediastreamdestination = audioContext.createMediaStreamDestination();
scriptProcessor.addEventListener('audioprocess', onAudioProcess);
mediastreamsource.connect(scriptProcessor);
scriptProcessor.connect(mediastreamdestination);
var outputStream = mediastreamdestination.stream;
peer.addStream(outputStream);
},
function(error) {}
);
function onAudioProcess(evt) {
var input = evt.inputBuffer.getChannelData(0);
var output = evt.outputBuffer.getChannelData(0);
var bufferData = new Float32Array(bufferSize);
for (var i = 0; i < bufferSize; i++) {
bufferData[i] = (
(input[(i * 2) % bufferSize] + input[(i * 2 + 1) % bufferSize]) / 2 +
input[Math.floor(i / 2) % bufferSize]
) / 2;
}
output.set(bufferData);
}
223. navigator.getUserMedia({audio: true},
function(inputStream) {
var audioContext = new AudioContext(); // 要ベンダープレフィックス
var mediastreamsource = audioContext.createMediaStreamSource(inputStream);
var scriptProcessor = audioContext.createScriptProcessor(bufferSize, 1, 1);
var mediastreamdestination = audioContext.createMediaStreamDestination();
scriptProcessor.addEventListener('audioprocess', onAudioProcess);
mediastreamsource.connect(scriptProcessor);
scriptProcessor.connect(mediastreamdestination);
var outputStream = mediastreamdestination.stream;
peer.addStream(outputStream);
},
function(error) {}
);
function onAudioProcess(evt) {
var input = evt.inputBuffer.getChannelData(0);
var output = evt.outputBuffer.getChannelData(0);
var bufferData = new Float32Array(bufferSize);
for (var i = 0; i < bufferSize; i++) {
bufferData[i] = (
(input[(i * 2) % bufferSize] + input[(i * 2 + 1) % bufferSize]) / 2 +
input[Math.floor(i / 2) % bufferSize]
) / 2;
}
output.set(bufferData);
}
224. navigator.getUserMedia({audio: true},
function(inputStream) {
var audioContext = new AudioContext(); // 要ベンダープレフィックス
var mediastreamsource = audioContext.createMediaStreamSource(inputStream);
var scriptProcessor = audioContext.createScriptProcessor(bufferSize, 1, 1);
var mediastreamdestination = audioContext.createMediaStreamDestination();
scriptProcessor.addEventListener('audioprocess', onAudioProcess);
mediastreamsource.connect(scriptProcessor);
scriptProcessor.connect(mediastreamdestination);
var outputStream = mediastreamdestination.stream;
peer.addStream(outputStream);
},
function(error) {}
);
function onAudioProcess(evt) {
var input = evt.inputBuffer.getChannelData(0);
var output = evt.outputBuffer.getChannelData(0);
var bufferData = new Float32Array(bufferSize);
for (var i = 0; i < bufferSize; i++) {
bufferData[i] = (
(input[(i * 2) % bufferSize] + input[(i * 2 + 1) % bufferSize]) / 2 +
input[Math.floor(i / 2) % bufferSize]
) / 2;
}
output.set(bufferData);
}
225. navigator.getUserMedia({audio: true},
function(inputStream) {
var audioContext = new AudioContext(); // 要ベンダープレフィックス
var mediastreamsource = audioContext.createMediaStreamSource(inputStream);
var scriptProcessor = audioContext.createScriptProcessor(bufferSize, 1, 1);
var mediastreamdestination = audioContext.createMediaStreamDestination();
scriptProcessor.addEventListener('audioprocess', onAudioProcess);
mediastreamsource.connect(scriptProcessor);
scriptProcessor.connect(mediastreamdestination);
var outputStream = mediastreamdestination.stream;
peer.addStream(outputStream);
},
function(error) {}
);
function onAudioProcess(evt) {
var input = evt.inputBuffer.getChannelData(0);
var output = evt.outputBuffer.getChannelData(0);
var bufferData = new Float32Array(bufferSize);
for (var i = 0; i < bufferSize; i++) {
bufferData[i] = (
(input[(i * 2) % bufferSize] + input[(i * 2 + 1) % bufferSize]) / 2 +
input[Math.floor(i / 2) % bufferSize]
) / 2;
}
output.set(bufferData);
}
226. navigator.getUserMedia({audio: true},
function(inputStream) {
var audioContext = new AudioContext(); // 要ベンダープレフィックス
var mediastreamsource = audioContext.createMediaStreamSource(inputStream);
var scriptProcessor = audioContext.createScriptProcessor(bufferSize, 1, 1);
var mediastreamdestination = audioContext.createMediaStreamDestination();
scriptProcessor.addEventListener('audioprocess', onAudioProcess);
mediastreamsource.connect(scriptProcessor);
scriptProcessor.connect(mediastreamdestination);
var outputStream = mediastreamdestination.stream;
peer.addStream(outputStream);
},
function(error) {}
);
function onAudioProcess(evt) {
var input = evt.inputBuffer.getChannelData(0);
var output = evt.outputBuffer.getChannelData(0);
var bufferData = new Float32Array(bufferSize);
for (var i = 0; i < bufferSize; i++) {
bufferData[i] = (
(input[(i * 2) % bufferSize] + input[(i * 2 + 1) % bufferSize]) / 2 +
input[Math.floor(i / 2) % bufferSize]
) / 2;
}
output.set(bufferData);
}
227. navigator.getUserMedia({audio: true},
function(inputStream) {
var audioContext = new AudioContext(); // 要ベンダープレフィックス
var mediastreamsource = audioContext.createMediaStreamSource(inputStream);
var scriptProcessor = audioContext.createScriptProcessor(bufferSize, 1, 1);
var mediastreamdestination = audioContext.createMediaStreamDestination();
scriptProcessor.addEventListener('audioprocess', onAudioProcess);
mediastreamsource.connect(scriptProcessor);
scriptProcessor.connect(mediastreamdestination);
var outputStream = mediastreamdestination.stream;
peer.addStream(outputStream);
},
function(error) {}
);
function onAudioProcess(evt) {
var input = evt.inputBuffer.getChannelData(0);
var output = evt.outputBuffer.getChannelData(0);
var bufferData = new Float32Array(bufferSize);
for (var i = 0; i < bufferSize; i++) {
bufferData[i] = (
(input[(i * 2) % bufferSize] + input[(i * 2 + 1) % bufferSize]) / 2 +
input[Math.floor(i / 2) % bufferSize]
) / 2;
}
output.set(bufferData);
}
228. navigator.getUserMedia({audio: true},
function(inputStream) {
var audioContext = new AudioContext(); // 要ベンダープレフィックス
var mediastreamsource = audioContext.createMediaStreamSource(inputStream);
var scriptProcessor = audioContext.createScriptProcessor(bufferSize, 1, 1);
var mediastreamdestination = audioContext.createMediaStreamDestination();
scriptProcessor.addEventListener('audioprocess', onAudioProcess);
mediastreamsource.connect(scriptProcessor);
scriptProcessor.connect(mediastreamdestination);
var outputStream = mediastreamdestination.stream;
peer.addStream(outputStream);
},
function(error) {}
);
function onAudioProcess(evt) {
var input = evt.inputBuffer.getChannelData(0);
var output = evt.outputBuffer.getChannelData(0);
var bufferData = new Float32Array(bufferSize);
for (var i = 0; i < bufferSize; i++) {
bufferData[i] = (
(input[(i * 2) % bufferSize] + input[(i * 2 + 1) % bufferSize]) / 2 +
input[Math.floor(i / 2) % bufferSize]
) / 2;
}
output.set(bufferData);
}
229. navigator.getUserMedia({audio: true},
function(inputStream) {
var audioContext = new AudioContext(); // 要ベンダープレフィックス
var mediastreamsource = audioContext.createMediaStreamSource(inputStream);
var scriptProcessor = audioContext.createScriptProcessor(bufferSize, 1, 1);
var mediastreamdestination = audioContext.createMediaStreamDestination();
scriptProcessor.addEventListener('audioprocess', onAudioProcess);
mediastreamsource.connect(scriptProcessor);
scriptProcessor.connect(mediastreamdestination);
var outputStream = mediastreamdestination.stream;
peer.addStream(outputStream);
},
function(error) {}
);
function onAudioProcess(evt) {
var input = evt.inputBuffer.getChannelData(0);
var output = evt.outputBuffer.getChannelData(0);
var bufferData = new Float32Array(bufferSize);
for (var i = 0; i < bufferSize; i++) {
bufferData[i] = (
(input[(i * 2) % bufferSize] + input[(i * 2 + 1) % bufferSize]) / 2 +
input[Math.floor(i / 2) % bufferSize]
) / 2;
}
output.set(bufferData);
}
230. navigator.getUserMedia({audio: true},
function(inputStream) {
var audioContext = new AudioContext(); // 要ベンダープレフィックス
var mediastreamsource = audioContext.createMediaStreamSource(inputStream);
var scriptProcessor = audioContext.createScriptProcessor(bufferSize, 1, 1);
var mediastreamdestination = audioContext.createMediaStreamDestination();
scriptProcessor.addEventListener('audioprocess', onAudioProcess);
mediastreamsource.connect(scriptProcessor);
scriptProcessor.connect(mediastreamdestination);
var outputStream = mediastreamdestination.stream;
peer.addStream(outputStream);
},
function(error) {}
);
function onAudioProcess(evt) {
var input = evt.inputBuffer.getChannelData(0);
var output = evt.outputBuffer.getChannelData(0);
var bufferData = new Float32Array(bufferSize);
for (var i = 0; i < bufferSize; i++) {
bufferData[i] = (
(input[(i * 2) % bufferSize] + input[(i * 2 + 1) % bufferSize]) / 2 +
input[Math.floor(i / 2) % bufferSize]
) / 2;
}
output.set(bufferData);
}
231. navigator.getUserMedia({audio: true},
function(inputStream) {
var audioContext = new AudioContext(); // 要ベンダープレフィックス
var mediastreamsource = audioContext.createMediaStreamSource(inputStream);
var scriptProcessor = audioContext.createScriptProcessor(bufferSize, 1, 1);
var mediastreamdestination = audioContext.createMediaStreamDestination();
scriptProcessor.addEventListener('audioprocess', onAudioProcess);
mediastreamsource.connect(scriptProcessor);
scriptProcessor.connect(mediastreamdestination);
var outputStream = mediastreamdestination.stream;
peer.addStream(outputStream);
},
function(error) {}
);
function onAudioProcess(evt) {
var input = evt.inputBuffer.getChannelData(0);
var output = evt.outputBuffer.getChannelData(0);
var bufferData = new Float32Array(bufferSize);
for (var i = 0; i < bufferSize; i++) {
bufferData[i] = (
(input[(i * 2) % bufferSize] + input[(i * 2 + 1) % bufferSize]) / 2 +
input[Math.floor(i / 2) % bufferSize]
) / 2;
}
output.set(bufferData);
}
232. navigator.getUserMedia({audio: true},
function(inputStream) {
var audioContext = new AudioContext(); // 要ベンダープレフィックス
var mediastreamsource = audioContext.createMediaStreamSource(inputStream);
var scriptProcessor = audioContext.createScriptProcessor(bufferSize, 1, 1);
var mediastreamdestination = audioContext.createMediaStreamDestination();
scriptProcessor.addEventListener('audioprocess', onAudioProcess);
mediastreamsource.connect(scriptProcessor);
scriptProcessor.connect(mediastreamdestination);
var outputStream = mediastreamdestination.stream;
peer.addStream(outputStream);
},
function(error) {}
);
function onAudioProcess(evt) {
var input = evt.inputBuffer.getChannelData(0);
var output = evt.outputBuffer.getChannelData(0);
var bufferData = new Float32Array(bufferSize);
for (var i = 0; i < bufferSize; i++) {
bufferData[i] = (
(input[(i * 2) % bufferSize] + input[(i * 2 + 1) % bufferSize]) / 2 +
input[Math.floor(i / 2) % bufferSize]
) / 2;
}
output.set(bufferData);
}
233. navigator.getUserMedia({audio: true},
function(inputStream) {
var audioContext = new AudioContext(); // 要ベンダープレフィックス
var mediastreamsource = audioContext.createMediaStreamSource(inputStream);
var scriptProcessor = audioContext.createScriptProcessor(bufferSize, 1, 1);
var mediastreamdestination = audioContext.createMediaStreamDestination();
scriptProcessor.addEventListener('audioprocess', onAudioProcess);
mediastreamsource.connect(scriptProcessor);
scriptProcessor.connect(mediastreamdestination);
var outputStream = mediastreamdestination.stream;
peer.addStream(outputStream);
},
function(error) {}
);
function onAudioProcess(evt) {
var input = evt.inputBuffer.getChannelData(0);
var output = evt.outputBuffer.getChannelData(0);
var bufferData = new Float32Array(bufferSize);
for (var i = 0; i < bufferSize; i++) {
bufferData[i] = (
(input[(i * 2) % bufferSize] + input[(i * 2 + 1) % bufferSize]) / 2 +
input[Math.floor(i / 2) % bufferSize]
) / 2;
}
output.set(bufferData);
}
234. navigator.getUserMedia({audio: true},
function(inputStream) {
var audioContext = new AudioContext(); // 要ベンダープレフィックス
var mediastreamsource = audioContext.createMediaStreamSource(inputStream);
var scriptProcessor = audioContext.createScriptProcessor(bufferSize, 1, 1);
var mediastreamdestination = audioContext.createMediaStreamDestination();
scriptProcessor.addEventListener('audioprocess', onAudioProcess);
mediastreamsource.connect(scriptProcessor);
scriptProcessor.connect(mediastreamdestination);
var outputStream = mediastreamdestination.stream;
peer.addStream(outputStream);
},
function(error) {}
);
function onAudioProcess(evt) {
var input = evt.inputBuffer.getChannelData(0);
var output = evt.outputBuffer.getChannelData(0);
var bufferData = new Float32Array(bufferSize);
for (var i = 0; i < bufferSize; i++) {
bufferData[i] = (
(input[(i * 2) % bufferSize] + input[(i * 2 + 1) % bufferSize]) / 2 +
input[Math.floor(i / 2) % bufferSize]
) / 2;
}
output.set(bufferData);
}
237. navigator.getUserMedia =
navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia ;
window.URL =
window.URL ||
window.webkitURL ;
function initialize() {
navigator.getUserMedia(
{audio: true, video: true},
function(stream) {
var video = document.getElementById('video');
video.src = URL.createObjectURL(stream);
video.play();
renderStart();
},
function(error) {
console.error(error);
}
);
}
function renderStart() {
var video = document.getElementById('video');
var buffer = document.getElementById('buffer_canvas');
var display = document.getElementById('display_canvas');
var bufferContext = buffer.getContext('2d');
var displayContext = display.getContext('2d');
var render = function() {
requestAnimationFrame(render);
var width = video.videoWidth;
var height = video.videoHeight;
if (width == 0 || height == 0) {return;}
buffer.width = display.width = width;
buffer.height = display.height = height;
bufferContext.drawImage(video, 0, 0);
var imageData = bufferContext.getImageData(0, 0, width, height);
var data = imageData.data;
for (var i = 0; i < data.length; i += 4) {
data[i + 0] = 255 - data[i + 0]; // Red
data[i + 1] = 255 - data[i + 1]; // Green
data[i + 2] = 255 - data[i + 2]; // Blue
}
imageData.data = data;
displayContext.putImageData(imageData, 0, 0);
};
render();
}
window.addEventListener('load', initialize);
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="styles/style.css" />
<script type="text/javascript" src="scripts/script.js"></script>
<title>Reverse with getUserMedia</title>
</head>
<body>
<video id="video"></video>
<canvas id="buffer_canvas"></canvas>
<canvas id="display_canvas"></canvas>
</body>
</html>
238. <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="styles/style.css" />
<script type="text/javascript" src="scripts/script.js"></script>
<title>Reverse with getUserMedia</title>
</head>
<body>
<video id="video"></video>
<canvas id="buffer_canvas"></canvas>
<canvas id="display_canvas"></canvas>
</body>
</html>
239. <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="styles/style.css" />
<script type="text/javascript" src="scripts/script.js"></script>
<title>Reverse with getUserMedia</title>
</head>
<body>
<video id="video"></video>
<canvas id="buffer_canvas"></canvas>
<canvas id="display_canvas"></canvas>
</body>
</html>
245. function renderStart() {
var video = document.getElementById('video');
var buffer = document.getElementById('buffer_canvas');
var display = document.getElementById('display_canvas');
var bufferContext = buffer.getContext('2d');
var displayContext = display.getContext('2d');
var render = function() {
requestAnimationFrame(render);
var width = video.videoWidth;
var height = video.videoHeight;
if (width == 0 || height == 0) {return;}
buffer.width = display.width = width;
buffer.height = display.height = height;
bufferContext.drawImage(video, 0, 0);
var imageData = bufferContext.getImageData(0, 0, width, height);
var data = imageData.data;
for (var i = 0; i < data.length; i += 4) {
data[i + 0] = 255 - data[i + 0]; // Red
data[i + 1] = 255 - data[i + 1]; // Green
data[i + 2] = 255 - data[i + 2]; // Blue
}
imageData.data = data;
displayContext.putImageData(imageData, 0, 0);
};
render();
}
246. function renderStart() {
var video = document.getElementById('video');
var buffer = document.getElementById('buffer_canvas');
var display = document.getElementById('display_canvas');
var bufferContext = buffer.getContext('2d');
var displayContext = display.getContext('2d');
var render = function() {
requestAnimationFrame(render);
var width = video.videoWidth;
var height = video.videoHeight;
if (width == 0 || height == 0) {return;}
buffer.width = display.width = width;
buffer.height = display.height = height;
bufferContext.drawImage(video, 0, 0);
var imageData = bufferContext.getImageData(0, 0, width, height);
var data = imageData.data;
for (var i = 0; i < data.length; i += 4) {
data[i + 0] = 255 - data[i + 0]; // Red
data[i + 1] = 255 - data[i + 1]; // Green
data[i + 2] = 255 - data[i + 2]; // Blue
}
imageData.data = data;
displayContext.putImageData(imageData, 0, 0);
};
render();
}
247. function renderStart() {
var video = document.getElementById('video');
var buffer = document.getElementById('buffer_canvas');
var display = document.getElementById('display_canvas');
var bufferContext = buffer.getContext('2d');
var displayContext = display.getContext('2d');
var render = function() {
requestAnimationFrame(render);
var width = video.videoWidth;
var height = video.videoHeight;
if (width == 0 || height == 0) {return;}
buffer.width = display.width = width;
buffer.height = display.height = height;
bufferContext.drawImage(video, 0, 0);
var imageData = bufferContext.getImageData(0, 0, width, height);
var data = imageData.data;
for (var i = 0; i < data.length; i += 4) {
data[i + 0] = 255 - data[i + 0]; // Red
data[i + 1] = 255 - data[i + 1]; // Green
data[i + 2] = 255 - data[i + 2]; // Blue
}
imageData.data = data;
displayContext.putImageData(imageData, 0, 0);
};
render();
}
248. function renderStart() {
var video = document.getElementById('video');
var buffer = document.getElementById('buffer_canvas');
var display = document.getElementById('display_canvas');
var bufferContext = buffer.getContext('2d');
var displayContext = display.getContext('2d');
var render = function() {
requestAnimationFrame(render);
var width = video.videoWidth;
var height = video.videoHeight;
if (width == 0 || height == 0) {return;}
buffer.width = display.width = width;
buffer.height = display.height = height;
bufferContext.drawImage(video, 0, 0);
var imageData = bufferContext.getImageData(0, 0, width, height);
var data = imageData.data;
for (var i = 0; i < data.length; i += 4) {
data[i + 0] = 255 - data[i + 0]; // Red
data[i + 1] = 255 - data[i + 1]; // Green
data[i + 2] = 255 - data[i + 2]; // Blue
}
imageData.data = data;
displayContext.putImageData(imageData, 0, 0);
};
render();
}
249. function renderStart() {
var video = document.getElementById('video');
var buffer = document.getElementById('buffer_canvas');
var display = document.getElementById('display_canvas');
var bufferContext = buffer.getContext('2d');
var displayContext = display.getContext('2d');
var render = function() {
requestAnimationFrame(render);
var width = video.videoWidth;
var height = video.videoHeight;
if (width == 0 || height == 0) {return;}
buffer.width = display.width = width;
buffer.height = display.height = height;
bufferContext.drawImage(video, 0, 0);
var imageData = bufferContext.getImageData(0, 0, width, height);
var data = imageData.data;
for (var i = 0; i < data.length; i += 4) {
data[i + 0] = 255 - data[i + 0]; // Red
data[i + 1] = 255 - data[i + 1]; // Green
data[i + 2] = 255 - data[i + 2]; // Blue
}
imageData.data = data;
displayContext.putImageData(imageData, 0, 0);
};
render();
}
250. function renderStart() {
var video = document.getElementById('video');
var buffer = document.getElementById('buffer_canvas');
var display = document.getElementById('display_canvas');
var bufferContext = buffer.getContext('2d');
var displayContext = display.getContext('2d');
var render = function() {
requestAnimationFrame(render);
var width = video.videoWidth;
var height = video.videoHeight;
if (width == 0 || height == 0) {return;}
buffer.width = display.width = width;
buffer.height = display.height = height;
bufferContext.drawImage(video, 0, 0);
var imageData = bufferContext.getImageData(0, 0, width, height);
var data = imageData.data;
for (var i = 0; i < data.length; i += 4) {
data[i + 0] = 255 - data[i + 0]; // Red
data[i + 1] = 255 - data[i + 1]; // Green
data[i + 2] = 255 - data[i + 2]; // Blue
}
imageData.data = data;
displayContext.putImageData(imageData, 0, 0);
};
render();
}
251. function renderStart() {
var video = document.getElementById('video');
var buffer = document.getElementById('buffer_canvas');
var display = document.getElementById('display_canvas');
var bufferContext = buffer.getContext('2d');
var displayContext = display.getContext('2d');
var render = function() {
requestAnimationFrame(render);
var width = video.videoWidth;
var height = video.videoHeight;
if (width == 0 || height == 0) {return;}
buffer.width = display.width = width;
buffer.height = display.height = height;
bufferContext.drawImage(video, 0, 0);
var imageData = bufferContext.getImageData(0, 0, width, height);
var data = imageData.data;
for (var i = 0; i < data.length; i += 4) {
data[i + 0] = 255 - data[i + 0]; // Red
data[i + 1] = 255 - data[i + 1]; // Green
data[i + 2] = 255 - data[i + 2]; // Blue
}
imageData.data = data;
displayContext.putImageData(imageData, 0, 0);
};
render();
}
252. function renderStart() {
var video = document.getElementById('video');
var buffer = document.getElementById('buffer_canvas');
var display = document.getElementById('display_canvas');
var bufferContext = buffer.getContext('2d');
var displayContext = display.getContext('2d');
var render = function() {
requestAnimationFrame(render);
var width = video.videoWidth;
var height = video.videoHeight;
if (width == 0 || height == 0) {return;}
buffer.width = display.width = width;
buffer.height = display.height = height;
bufferContext.drawImage(video, 0, 0);
var imageData = bufferContext.getImageData(0, 0, width, height);
var data = imageData.data;
for (var i = 0; i < data.length; i += 4) {
data[i + 0] = 255 - data[i + 0]; // Red
data[i + 1] = 255 - data[i + 1]; // Green
data[i + 2] = 255 - data[i + 2]; // Blue
}
imageData.data = data;
displayContext.putImageData(imageData, 0, 0);
};
render();
}
253. function renderStart() {
var video = document.getElementById('video');
var buffer = document.getElementById('buffer_canvas');
var display = document.getElementById('display_canvas');
var bufferContext = buffer.getContext('2d');
var displayContext = display.getContext('2d');
var render = function() {
requestAnimationFrame(render);
var width = video.videoWidth;
var height = video.videoHeight;
if (width == 0 || height == 0) {return;}
buffer.width = display.width = width;
buffer.height = display.height = height;
bufferContext.drawImage(video, 0, 0);
var imageData = bufferContext.getImageData(0, 0, width, height);
var data = imageData.data;
for (var i = 0; i < data.length; i += 4) {
data[i + 0] = 255 - data[i + 0]; // Red
data[i + 1] = 255 - data[i + 1]; // Green
data[i + 2] = 255 - data[i + 2]; // Blue
}
imageData.data = data;
displayContext.putImageData(imageData, 0, 0);
};
render();
}
254. function renderStart() {
var video = document.getElementById('video');
var buffer = document.getElementById('buffer_canvas');
var display = document.getElementById('display_canvas');
var bufferContext = buffer.getContext('2d');
var displayContext = display.getContext('2d');
var render = function() {
requestAnimationFrame(render);
var width = video.videoWidth;
var height = video.videoHeight;
if (width == 0 || height == 0) {return;}
buffer.width = display.width = width;
buffer.height = display.height = height;
bufferContext.drawImage(video, 0, 0);
var imageData = bufferContext.getImageData(0, 0, width, height);
var data = imageData.data;
for (var i = 0; i < data.length; i += 4) {
data[i + 0] = 255 - data[i + 0]; // Red
data[i + 1] = 255 - data[i + 1]; // Green
data[i + 2] = 255 - data[i + 2]; // Blue
}
imageData.data = data;
displayContext.putImageData(imageData, 0, 0);
};
render();
}
255. function renderStart() {
var video = document.getElementById('video');
var buffer = document.getElementById('buffer_canvas');
var display = document.getElementById('display_canvas');
var bufferContext = buffer.getContext('2d');
var displayContext = display.getContext('2d');
var render = function() {
requestAnimationFrame(render);
var width = video.videoWidth;
var height = video.videoHeight;
if (width == 0 || height == 0) {return;}
buffer.width = display.width = width;
buffer.height = display.height = height;
bufferContext.drawImage(video, 0, 0);
var imageData = bufferContext.getImageData(0, 0, width, height);
var data = imageData.data;
for (var i = 0; i < data.length; i += 4) {
data[i + 0] = 255 - data[i + 0]; // Red
data[i + 1] = 255 - data[i + 1]; // Green
data[i + 2] = 255 - data[i + 2]; // Blue
}
imageData.data = data;
displayContext.putImageData(imageData, 0, 0);
};
render();
}
256. function renderStart() {
var video = document.getElementById('video');
var buffer = document.getElementById('buffer_canvas');
var display = document.getElementById('display_canvas');
var bufferContext = buffer.getContext('2d');
var displayContext = display.getContext('2d');
var render = function() {
requestAnimationFrame(render);
var width = video.videoWidth;
var height = video.videoHeight;
if (width == 0 || height == 0) {return;}
buffer.width = display.width = width;
buffer.height = display.height = height;
bufferContext.drawImage(video, 0, 0);
var imageData = bufferContext.getImageData(0, 0, width, height);
var data = imageData.data;
for (var i = 0; i < data.length; i += 4) {
data[i + 0] = 255 - data[i + 0]; // Red
data[i + 1] = 255 - data[i + 1]; // Green
data[i + 2] = 255 - data[i + 2]; // Blue
}
imageData.data = data;
displayContext.putImageData(imageData, 0, 0);
};
render();
}
257. function renderStart() {
var video = document.getElementById('video');
var buffer = document.getElementById('buffer_canvas');
var display = document.getElementById('display_canvas');
var bufferContext = buffer.getContext('2d');
var displayContext = display.getContext('2d');
var render = function() {
requestAnimationFrame(render);
var width = video.videoWidth;
var height = video.videoHeight;
if (width == 0 || height == 0) {return;}
buffer.width = display.width = width;
buffer.height = display.height = height;
bufferContext.drawImage(video, 0, 0);
var imageData = bufferContext.getImageData(0, 0, width, height);
var data = imageData.data;
for (var i = 0; i < data.length; i += 4) {
data[i + 0] = 255 - data[i + 0]; // Red
data[i + 1] = 255 - data[i + 1]; // Green
data[i + 2] = 255 - data[i + 2]; // Blue
}
imageData.data = data;
displayContext.putImageData(imageData, 0, 0);
};
render();
}
258. function renderStart() {
var video = document.getElementById('video');
var buffer = document.getElementById('buffer_canvas');
var display = document.getElementById('display_canvas');
var bufferContext = buffer.getContext('2d');
var displayContext = display.getContext('2d');
var render = function() {
requestAnimationFrame(render);
var width = video.videoWidth;
var height = video.videoHeight;
if (width == 0 || height == 0) {return;}
buffer.width = display.width = width;
buffer.height = display.height = height;
bufferContext.drawImage(video, 0, 0);
var imageData = bufferContext.getImageData(0, 0, width, height);
var data = imageData.data;
for (var i = 0; i < data.length; i += 4) {
data[i + 0] = 255 - data[i + 0]; // Red
data[i + 1] = 255 - data[i + 1]; // Green
data[i + 2] = 255 - data[i + 2]; // Blue
}
imageData.data = data;
displayContext.putImageData(imageData, 0, 0);
};
render();
}
259. function renderStart() {
var video = document.getElementById('video');
var buffer = document.getElementById('buffer_canvas');
var display = document.getElementById('display_canvas');
var bufferContext = buffer.getContext('2d');
var displayContext = display.getContext('2d');
var render = function() {
requestAnimationFrame(render);
var width = video.videoWidth;
var height = video.videoHeight;
if (width == 0 || height == 0) {return;}
buffer.width = display.width = width;
buffer.height = display.height = height;
bufferContext.drawImage(video, 0, 0);
var imageData = bufferContext.getImageData(0, 0, width, height);
var data = imageData.data;
for (var i = 0; i < data.length; i += 4) {
data[i + 0] = 255 - data[i + 0]; // Red
data[i + 1] = 255 - data[i + 1]; // Green
data[i + 2] = 255 - data[i + 2]; // Blue
}
imageData.data = data;
displayContext.putImageData(imageData, 0, 0);
};
render();
}
260. function renderStart() {
var video = document.getElementById('video');
var buffer = document.getElementById('buffer_canvas');
var display = document.getElementById('display_canvas');
var bufferContext = buffer.getContext('2d');
var displayContext = display.getContext('2d');
var render = function() {
requestAnimationFrame(render);
var width = video.videoWidth;
var height = video.videoHeight;
if (width == 0 || height == 0) {return;}
buffer.width = display.width = width;
buffer.height = display.height = height;
bufferContext.drawImage(video, 0, 0);
var imageData = bufferContext.getImageData(0, 0, width, height);
var data = imageData.data;
for (var i = 0; i < data.length; i += 4) {
data[i + 0] = 255 - data[i + 0]; // Red
data[i + 1] = 255 - data[i + 1]; // Green
data[i + 2] = 255 - data[i + 2]; // Blue
}
imageData.data = data;
displayContext.putImageData(imageData, 0, 0);
};
render();
}
261. function renderStart() {
var video = document.getElementById('video');
var buffer = document.getElementById('buffer_canvas');
var display = document.getElementById('display_canvas');
var bufferContext = buffer.getContext('2d');
var displayContext = display.getContext('2d');
var render = function() {
requestAnimationFrame(render);
var width = video.videoWidth;
var height = video.videoHeight;
if (width == 0 || height == 0) {return;}
buffer.width = display.width = width;
buffer.height = display.height = height;
bufferContext.drawImage(video, 0, 0);
var imageData = bufferContext.getImageData(0, 0, width, height);
var data = imageData.data;
for (var i = 0; i < data.length; i += 4) {
data[i + 0] = 255 - data[i + 0]; // Red
data[i + 1] = 255 - data[i + 1]; // Green
data[i + 2] = 255 - data[i + 2]; // Blue
}
imageData.data = data;
displayContext.putImageData(imageData, 0, 0);
};
render();
}
262. navigator.getUserMedia =
navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia ;
window.URL =
window.URL ||
window.webkitURL ;
function initialize() {
navigator.getUserMedia(
{audio: true, video: true},
function(stream) {
var video = document.getElementById('video');
video.src = URL.createObjectURL(stream);
video.play();
renderStart();
},
function(error) {
console.error(error);
}
);
}
function renderStart() {
var video = document.getElementById('video');
var buffer = document.getElementById('buffer_canvas');
var display = document.getElementById('display_canvas');
var bufferContext = buffer.getContext('2d');
var displayContext = display.getContext('2d');
var render = function() {
requestAnimationFrame(render);
var width = video.videoWidth;
var height = video.videoHeight;
if (width == 0 || height == 0) {return;}
buffer.width = display.width = width;
buffer.height = display.height = height;
bufferContext.drawImage(video, 0, 0);
var imageData = bufferContext.getImageData(0, 0, width, height);
var data = imageData.data;
for (var i = 0; i < data.length; i += 4) {
data[i + 0] = 255 - data[i + 0]; // Red
data[i + 1] = 255 - data[i + 1]; // Green
data[i + 2] = 255 - data[i + 2]; // Blue
}
imageData.data = data;
displayContext.putImageData(imageData, 0, 0);
};
render();
}
window.addEventListener('load', initialize);
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="styles/style.css" />
<script type="text/javascript" src="scripts/script.js"></script>
<title>Reverse with getUserMedia</title>
</head>
<body>
<video id="video"></video>
<canvas id="buffer_canvas"></canvas>
<canvas id="display_canvas"></canvas>
</body>
</html>
