commit 27ab13cd632d3b70c157598f736cc2f9f4c20aef Author: Shane Tully Date: Mon Sep 15 09:01:01 2014 -0700 created repo diff --git a/README.md b/README.md new file mode 100644 index 0000000..ee631c1 --- /dev/null +++ b/README.md @@ -0,0 +1,24 @@ +WebRTC Example +============== + +#### shane tully +#### shanetully.com + +An 'as simple as it gets' WebRTC example. + +See LINK for a detailed walkthrough of the code. + +### Usage + +The signaling server uses Node.js and `ws` and can be started as such: + +``` +$ npm install ws +$ node server/server.js +``` + +With the client running, open `client/index.html` in a recent version of either Firefox or Chrome. + +### License + +MIT diff --git a/client/index.html b/client/index.html new file mode 100755 index 0000000..1c60c2f --- /dev/null +++ b/client/index.html @@ -0,0 +1,18 @@ + + + + + + + + + +
+ + + + + + diff --git a/client/webrtc.js b/client/webrtc.js new file mode 100755 index 0000000..372e6ef --- /dev/null +++ b/client/webrtc.js @@ -0,0 +1,89 @@ +var localVideo; +var remoteVideo; +var peerConnection; +var peerConnectionConfig = {'iceServers': [{'url': 'stun:stun.services.mozilla.com'}, {'url': 'stun:stun.l.google.com:19302'}]}; + +navigator.getUserMedia = navigator.getUserMedia || navigator.mozGetUserMedia || navigator.webkitGetUserMedia; +window.RTCPeerConnection = window.RTCPeerConnection || window.mozRTCPeerConnection || window.webkitRTCPeerConnection; +window.RTCIceCandidate = window.RTCIceCandidate || window.mozRTCIceCandidate || window.webkitRTCIceCandidate; +window.RTCSessionDescription = window.RTCSessionDescription || window.mozRTCSessionDescription || window.webkitRTCSessionDescription; + +function pageReady() { + localVideo = document.getElementById('localVideo'); + remoteVideo = document.getElementById('remoteVideo'); + + serverConnection = new WebSocket('ws://127.0.0.1:3434'); + serverConnection.onmessage = gotMessageFromServer; + + var constraints = { + video: true, + audio: true, + }; + + if(navigator.getUserMedia) { + navigator.getUserMedia(constraints, getUserMediaSuccess, getUserMediaError); + } else { + alert('Your browser does not support getUserMedia API'); + } +} + +function getUserMediaSuccess(stream) { + localStream = stream; + localVideo.src = window.URL.createObjectURL(stream); +} + +function start(isCaller) { + peerConnection = new RTCPeerConnection(peerConnectionConfig); + peerConnection.onicecandidate = gotIceCandidate; + peerConnection.onaddstream = gotRemoteStream; + peerConnection.addStream(localStream); + + if(isCaller) { + peerConnection.createOffer(gotDescription, createOfferError); + } +} + +function gotMessageFromServer(message) { + if(!peerConnection) start(false); + + var signal = JSON.parse(message.data); + if(signal.sdp) { + peerConnection.setRemoteDescription(new RTCSessionDescription(signal.sdp), function() { + peerConnection.createAnswer(gotDescription, createAnswerError); + }); + } else if(signal.ice) { + peerConnection.addIceCandidate(new RTCIceCandidate(signal.ice)); + } +} + +function gotIceCandidate(event) { + if(event.candidate != null) { + serverConnection.send(JSON.stringify({'ice': event.candidate})); + } +} + +function gotDescription(description) { + console.log('got description'); + peerConnection.setLocalDescription(description, function () { + serverConnection.send(JSON.stringify({'sdp': description})); + }, function() {console.log('set description error')}); +} + +function gotRemoteStream(event) { + console.log("got remote stream"); + remoteVideo.src = window.URL.createObjectURL(event.stream); +} + +// Error functions.... + +function getUserMediaError(error) { + console.log(error); +} + +function createOfferError(error) { + console.log(error); +} + +function createAnswerError(error) { + console.log(error); +} diff --git a/server/server.js b/server/server.js new file mode 100644 index 0000000..aaf8c9b --- /dev/null +++ b/server/server.js @@ -0,0 +1,16 @@ +var WebSocketServer = require('ws').Server; + +var wss = new WebSocketServer({port: 3434}); + +wss.broadcast = function(data) { + for(var i in this.clients) { + this.clients[i].send(data); + } +}; + +wss.on('connection', function(ws) { + ws.on('message', function(message) { + console.log('received: %s', message); + wss.broadcast(message); + }); +});