klaus
/
WebRTC-Example
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

change indentation to 2 spaces

7_ontrack
shane tully 2018-01-07 15:55:57 -08:00
parent 9a06994998
commit 9147238b49
3 changed files with 85 additions and 85 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
client/index.html
View File

@ -1,20 +1,20 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<script src="https://webrtc.github.io/adapter/adapter-latest.js"></script> <script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
<script src="webrtc.js"></script> <script src="webrtc.js"></script>
</head> </head>
<body> <body>
<video id="localVideo" autoplay muted style="width:40%;"></video> <video id="localVideo" autoplay muted style="width:40%;"></video>
<video id="remoteVideo" autoplay style="width:40%;"></video> <video id="remoteVideo" autoplay style="width:40%;"></video>
<br /> <br />
<input type="button" id="start" onclick="start(true)" value="Start Video"></input> <input type="button" id="start" onclick="start(true)" value="Start Video"></input>
<script type="text/javascript"> <script type="text/javascript">
pageReady(); pageReady();
</script> </script>
</body> </body>
</html> </html>

102
client/webrtc.js
View File

@ -6,90 +6,90 @@ var uuid;
var serverConnection; var serverConnection;
var peerConnectionConfig = { var peerConnectionConfig = {
'iceServers': [ 'iceServers': [
{'urls': 'stun:stun.services.mozilla.com'}, {'urls': 'stun:stun.services.mozilla.com'},
{'urls': 'stun:stun.l.google.com:19302'}, {'urls': 'stun:stun.l.google.com:19302'},
] ]
}; };
function pageReady() { function pageReady() {
uuid = createUUID(); uuid = createUUID();
localVideo = document.getElementById('localVideo'); localVideo = document.getElementById('localVideo');
remoteVideo = document.getElementById('remoteVideo'); remoteVideo = document.getElementById('remoteVideo');
serverConnection = new WebSocket('wss://' + window.location.hostname + ':8443'); serverConnection = new WebSocket('wss://' + window.location.hostname + ':8443');
serverConnection.onmessage = gotMessageFromServer; serverConnection.onmessage = gotMessageFromServer;
var constraints = { var constraints = {
video: true, video: true,
audio: true, audio: true,
}; };
if(navigator.mediaDevices.getUserMedia) { if(navigator.mediaDevices.getUserMedia) {
navigator.mediaDevices.getUserMedia(constraints).then(getUserMediaSuccess).catch(errorHandler); navigator.mediaDevices.getUserMedia(constraints).then(getUserMediaSuccess).catch(errorHandler);
} else { } else {
alert('Your browser does not support getUserMedia API'); alert('Your browser does not support getUserMedia API');
} }
} }
function getUserMediaSuccess(stream) { function getUserMediaSuccess(stream) {
localStream = stream; localStream = stream;
localVideo.srcObject = stream; localVideo.srcObject = stream;
} }
function start(isCaller) { function start(isCaller) {
peerConnection = new RTCPeerConnection(peerConnectionConfig); peerConnection = new RTCPeerConnection(peerConnectionConfig);
peerConnection.onicecandidate = gotIceCandidate; peerConnection.onicecandidate = gotIceCandidate;
peerConnection.onaddstream = gotRemoteStream; peerConnection.onaddstream = gotRemoteStream;
peerConnection.addStream(localStream); peerConnection.addStream(localStream);
if(isCaller) { if(isCaller) {
peerConnection.createOffer().then(createdDescription).catch(errorHandler); peerConnection.createOffer().then(createdDescription).catch(errorHandler);
} }
} }
function gotMessageFromServer(message) { function gotMessageFromServer(message) {
if(!peerConnection) start(false); if(!peerConnection) start(false);
var signal = JSON.parse(message.data); var signal = JSON.parse(message.data);
// Ignore messages from ourself // Ignore messages from ourself
if(signal.uuid == uuid) return; if(signal.uuid == uuid) return;
if(signal.sdp) { if(signal.sdp) {
peerConnection.setRemoteDescription(new RTCSessionDescription(signal.sdp)).then(function() { peerConnection.setRemoteDescription(new RTCSessionDescription(signal.sdp)).then(function() {
// Only create answers in response to offers // Only create answers in response to offers
if(signal.sdp.type == 'offer') { if(signal.sdp.type == 'offer') {
peerConnection.createAnswer().then(createdDescription).catch(errorHandler); peerConnection.createAnswer().then(createdDescription).catch(errorHandler);
} }
}).catch(errorHandler); }).catch(errorHandler);
} else if(signal.ice) { } else if(signal.ice) {
peerConnection.addIceCandidate(new RTCIceCandidate(signal.ice)).catch(errorHandler); peerConnection.addIceCandidate(new RTCIceCandidate(signal.ice)).catch(errorHandler);
} }
} }
function gotIceCandidate(event) { function gotIceCandidate(event) {
if(event.candidate != null) { if(event.candidate != null) {
serverConnection.send(JSON.stringify({'ice': event.candidate, 'uuid': uuid})); serverConnection.send(JSON.stringify({'ice': event.candidate, 'uuid': uuid}));
} }
} }
function createdDescription(description) { function createdDescription(description) {
console.log('got description'); console.log('got description');
peerConnection.setLocalDescription(description).then(function() { peerConnection.setLocalDescription(description).then(function() {
serverConnection.send(JSON.stringify({'sdp': peerConnection.localDescription, 'uuid': uuid})); serverConnection.send(JSON.stringify({'sdp': peerConnection.localDescription, 'uuid': uuid}));
}).catch(errorHandler); }).catch(errorHandler);
} }
function gotRemoteStream(event) { function gotRemoteStream(event) {
console.log('got remote stream'); console.log('got remote stream');
remoteVideo.srcObject = event.stream; remoteVideo.srcObject = event.stream;
} }
function errorHandler(error) { function errorHandler(error) {
console.log(error); console.log(error);
} }
// Taken from http://stackoverflow.com/a/105074/515584 // Taken from http://stackoverflow.com/a/105074/515584

42
server/server.js
View File

@ -7,24 +7,24 @@ const WebSocketServer = WebSocket.Server;
// Yes, TLS is required // Yes, TLS is required
const serverConfig = { const serverConfig = {
key: fs.readFileSync('key.pem'), key: fs.readFileSync('key.pem'),
cert: fs.readFileSync('cert.pem'), cert: fs.readFileSync('cert.pem'),
}; };
// ---------------------------------------------------------------------------------------- // ----------------------------------------------------------------------------------------
// Create a server for the client html page // Create a server for the client html page
const handleRequest = function(request, response) { const handleRequest = function(request, response) {
// Render the single client html file for any request the HTTP server receives // Render the single client html file for any request the HTTP server receives
console.log('request received: ' + request.url); console.log('request received: ' + request.url);
if(request.url === '/') { if(request.url === '/') {
response.writeHead(200, {'Content-Type': 'text/html'}); response.writeHead(200, {'Content-Type': 'text/html'});
response.end(fs.readFileSync('client/index.html')); response.end(fs.readFileSync('client/index.html'));
} else if(request.url === '/webrtc.js') { } else if(request.url === '/webrtc.js') {
response.writeHead(200, {'Content-Type': 'application/javascript'}); response.writeHead(200, {'Content-Type': 'application/javascript'});
response.end(fs.readFileSync('client/webrtc.js')); response.end(fs.readFileSync('client/webrtc.js'));
} }
}; };
const httpsServer = https.createServer(serverConfig, handleRequest); const httpsServer = https.createServer(serverConfig, handleRequest);
@ -36,19 +36,19 @@ httpsServer.listen(HTTPS_PORT, '0.0.0.0');
const wss = new WebSocketServer({server: httpsServer}); const wss = new WebSocketServer({server: httpsServer});
wss.on('connection', function(ws) { wss.on('connection', function(ws) {
ws.on('message', function(message) { ws.on('message', function(message) {
// Broadcast any received message to all clients // Broadcast any received message to all clients
console.log('received: %s', message); console.log('received: %s', message);
wss.broadcast(message); wss.broadcast(message);
}); });
}); });
wss.broadcast = function(data) { wss.broadcast = function(data) {
this.clients.forEach(function(client) { this.clients.forEach(function(client) {
if(client.readyState === WebSocket.OPEN) { if(client.readyState === WebSocket.OPEN) {
client.send(data); client.send(data);
} }
}); });
}; };
console.log('Server running. Visit https://localhost:' + HTTPS_PORT + ' in Firefox/Chrome.\n\n\ console.log('Server running. Visit https://localhost:' + HTTPS_PORT + ' in Firefox/Chrome.\n\n\