The The tools we are going to use to build our application are:<\/p>\n Node.js is all about JavaScript running on the server. We will use Node.js and Express Module to quickly spin up a web server for our application. Visual Studio Code IDE is one of many IDE available for Node development, you can choose any other preferred one.<\/p>\n The screenshot below shows the layout of the project we are building. Below the screenshot is a brief description of each artifact.<\/p>\n js<\/em><\/strong> Let us begin by trying to write code to access the local webcam feed from a webpage. Edit the Here we have added a webrtc.demo.js<\/em><\/span><\/p>\n The Run the code now using the commands below and navigate to To begin with connecting two separate clients, we start with creating a small signalling server of our own using index.js<\/em><\/span><\/p>\n All we are doing is attaching the socket module to our web server so that it could listen to incoming connection requests and take action. Once a connection is established we can pass messages to any of the connected peers. The peers can also communicate through the same semantics with the server.<\/p>\n We are leveraging this to facilitate the initial handshake between the two peers we will create. Once the peers are connected they no longer need to use this signalling server and can talk directly to each other exchanging data.<\/p>\n Let us create two peers which will connect and exchange video feed with each other. Each peer resides in a separate Html file and has the below markup.<\/p>\n The above markup creates a couple of video elements with ids webrtc.server.js<\/em><\/span><\/p>\n The functions with names starting with Now that we have seen the To demonstrate the API, let us write an example of its use to send and receive text messages back and forth between two peers. We create two Html pages to host each peer, namely RTCChannelDemo1.html, RTCChannelDemo2.html<\/em><\/span><\/p>\n In these pages we have a couple of This code like in the previous section establishes a To see all of this in action we need to run the following commands at the root of the project:<\/p>\n followed by<\/p>\n To look at the This was an example of the WebRTC APIs.<\/p>\ngetUserMedia<\/code> API call in JavaScript allows access to the local webcam and audio devices. Once we have access to the audio and video feed we can display the same on our page. We can use RTCPeerConnection<\/code> APIs to establish a connection with a remote peer and share the local feed to implement a video call. To establish a connection we do need a server but once a connection is established there is no need for a server anymore as we exchange data directly. Although the way things stand right now, we do need STUN, TURN<\/code> servers to penetrate through firewalls and Netstats.
\nThis is not all we can use the RTCDataChannel<\/code> API to send and receive arbitrary data to\/from a remote peer using a connection established with RTCPeerConnection<\/code> API. The capabilities of these APIs opens up a world of possibilities and applications that can be created.<\/p>\n2. Tools & Technologies<\/h2>\n
\n
3. Project Structure<\/h2>\n
![\"\"](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2017\/08\/WEBRTCProjectLayout.jpg\")
<\/a>
\nWe place our JavaScript code files here.
\nindex.html<\/em><\/strong>
\nThis file is demo page for getUserMedia<\/code>.
\nRTCDemo1.html<\/em><\/strong>
\nThis file contains the markup for one of our video chat clients.
\nRTCDemo2.html<\/em><\/strong>
\nThis is the other client in our video chat sample.
\nwebrtc.server.js<\/em><\/strong>
\nThis is our Socket.io based signalling server.
\nindex.js<\/em><\/strong>
\nThis is our basic web server created using express module.
\nRTCChannelDemo1.html<\/em><\/strong>
\nThis page acts as one of the peers in our RTCDataChannel<\/code> demo.
\nRTCChannelDemo2.html<\/em><\/strong>
\nThis page also acts as one of the peers in our RTCDataChannel<\/code> demo.<\/p>\n4. Capturing Audio & Video<\/h2>\n
index.html<\/code> file to add the following HTML Markup:<\/p>\n<video autoplay><\/video>\r\n<button type=\"button\" id=\"btnShowCamera\" >Show Webcam<\/button>\r\n<\/pre>\n
video<\/code> element to display the stream from webcam. Notice the attribute autoplay<\/code>. This is critical as otherwise you would only see a static capture from the webcam, if at all. Let us add an event handler for the button<\/code> element placed on the page. Add the following JavaScript to the webrtc.demo.js<\/code> file. Do not forget to refer to it in the index.html page as well using a script tag.<\/p>\nfunction GetUserMedia(){\r\n navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia\r\n || navigator.mozGetUserMedia || navigator.msGetUserMedia;\r\n return navigator.getUserMedia;\r\n}\r\n\r\nfunction showWebcam(){\r\n var userMedia = GetUserMedia();\r\n if(userMedia){ \r\n navigator.getUserMedia({video: true, audio: true}, function(stream){\r\n \r\n document.getElementsByTagName(\"video\")[0].src = window.URL.createObjectURL(stream);\r\n \r\n }, function(error){\r\n console.log(\"There was an error in GetUserMedia!!!\");\r\n });\r\n }\r\n}\r\ndocument.getElementById(\"btnShowCamera\").addEventListener(\"click\", function(event){\r\n showWebcam();\r\n});\r\n<\/pre>\nGetUserMedia<\/code> function in the code above tries to shield our code from the cross browser differences in implementations. Like I noted before, WebRTC is still in progress but as things get standardized you can expect the vendor prefixed versions to go away. When we call the getUserMedia<\/code> function we pass a constraint object indicating the streams we want to request, viz., Audio, Video. The next argument is a callback to handle the returned stream object with the third argument acting as an error handler.<\/p>\nhttp:\/\/localhost:8090\/<\/code>. Click on the Show Webcam button and reply yes or grant permission to allow access to webcam in the prompt that comes up. You should be able to see the video feed from the webcam on the page.<\/p>\n![\"\"](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2017\/08\/UserMediaDemo.jpg\")
<\/a>5. Setting up Peer to Peer Connection<\/h2>\n
socket.io<\/code> Module. This will allow us to act as an intermediary to introduce the two clients we will create shortly. The code to handle the forwarding of signals on the server looks like below:<\/p>\nconst express = require(\"express\");\r\nconst app = express();\r\nconst hostname = \"127.0.0.1\";\r\nconst port = 8090;\r\n\r\nvar http = require('http').Server(app);\r\nvar io = require(\"socket.io\")(http);\r\napp.use(express.static('.'));\r\n\r\nio.on('connection', function(client){\r\n console.log(\"Connection established!\");\r\n client.on(\"candidate\", function(msg){\r\n console.log(\"candidate message recieved!\");\r\n client.broadcast.emit(\"candidate\", msg);\r\n });\r\n client.on(\"sdp\", function(msg){\r\n console.log(\"sdp message broadcasted!\");\r\n client.broadcast.emit(\"sdp\", msg);\r\n });\r\n client.on(\"desc\", function(desc){\r\n console.log(\"description received!\");\r\n client.broadcast.emit(\"desc\", desc);\r\n });\r\n client.on(\"answer\", function(answer){\r\n console.log(\"answer broadcasted\");\r\n client.broadcast.emit(\"answer\", answer);\r\n });\r\n});\r\n\r\nhttp.listen(port, hostname);\r\n<\/pre>\n<!DOCTYPE html>\r\n<html lang=\"eng\">\r\n <head>\r\n <title>WCG -- WebRTC Tutorial For Beginners<\/title>\r\n <\/head>\r\n<body>\r\n <video id=\"remoteview\" autoplay><\/video>\r\n <video id=\"selfview\" autoplay><\/video>\r\n <button type=\"button\" id=\"makeCall\">Make Call<\/button>\r\n \r\n <script src=\"\/socket.io\/socket.io.js\"><\/script>\r\n <script>\r\n var socket = io();\r\n <\/script>\r\n <script src=\"\/js\/webrtc.server.js\"><\/script>\r\n\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
remoteview & selfview<\/code>. There is also a button that says “Make Call” and initiates the video call. We also call in the client library of Socket.io<\/code> which enables us to signal via the server to the other peer to establish a connection. We instantiate the socket and connect to the signalling server in the next script block. Finally we call our own webrtc.server.js<\/code> JS file which has the following JavaScript code.<\/p>\n\/\/To iron over browser implementation inconsistencies like prefixed naming conventions\r\nGetUserMedia();\r\nGetRTCPeerConnection();\r\nGetRTCSessionDescription();\r\nGetRTCIceCandidate();\r\n\r\n\/\/Initializing a peer connection\r\nvar caller = new window.RTCPeerConnection();\r\n\r\n\/\/Listen for ICE Candidates and send them to remote peers\r\ncaller.onicecandidate = function(evt){\r\n if(!evt.candidate) return;\r\n console.log(\"onicecandidate called\");\r\n onIceCandidate(caller, evt); \r\n};\r\n\r\n\/\/onaddstream handler to receive remote feed and show in remoteview video element\r\ncaller.onaddstream = function(evt){\r\n console.log(\"onaddstream called\");\r\n if(window.URL){\r\n document.getElementById(\"remoteview\").src = window.URL.createObjectURL(evt.stream);\r\n } else {\r\n document.getElementById(\"remoteview\").src = evt.stream;\r\n }\r\n}; \r\n\/\/Get local audio\/video feed and show it in selfview video element \r\nnavigator.getUserMedia({video: true, audio: true}, function(stream){\r\n if(window.URL){\r\n document.getElementById(\"selfview\").src = window.URL.createObjectURL(stream);\r\n } else {\r\n document.getElementById(\"selfview\").src = stream;\r\n }\r\n caller.addStream(stream); \r\n\r\n}, function(evt){\r\n console.log(\"Error occurred!\");\r\n});\r\nfunction GetRTCIceCandidate(){\r\n window.RTCIceCandidate = window.RTCIceCandidate || window.webkitRTCIceCandidate\r\n || window.mozRTCIceCandidate || window.msRTCIceCandidate;\r\n\r\n return window.RTCIceCandidate;\r\n}\r\nfunction GetUserMedia(){\r\n navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia\r\n || navigator.mozGetUserMedia || navigator.msGetUserMedia;\r\n return navigator.getUserMedia;\r\n}\r\nfunction GetRTCPeerConnection(){\r\n window.RTCPeerConnection = window.RTCPeerConnection || window.webkitRTCPeerConnection\r\n || window.mozRTCPeerConnection || window.msRTCPeerConnection;\r\n return window.RTCPeerConnection;\r\n}\r\nfunction GetRTCSessionDescription(){\r\n window.RTCSessionDescription = window.RTCSessionDescription || window.webkitRTCSessionDescription\r\n || window.mozRTCSessionDescription || window.msRTCSessionDescription;\r\n return window.RTCSessionDescription;\r\n}\r\n\r\n\/\/Create and send offer to remote peer on button click\r\ndocument.getElementById(\"makeCall\").addEventListener(\"click\", function(){ \r\n caller.createOffer().then(function(desc){\r\n caller.setLocalDescription(new RTCSessionDescription(desc));\r\n socket.emit(\"sdp\", JSON.stringify({\"sdp\": desc}));\r\n });\r\n});\r\n\r\n\/\/Send the ICE Candidate to the remote peer\r\nfunction onIceCandidate(peer, evt){\r\n if(evt.candidate){ \r\n socket.emit(\"candidate\", JSON.stringify({\"candidate\": evt.candidate}));\r\n }\r\n}\r\n\r\n\/\/Communications with the remote peer through signaling server\r\nsocket.on(\"connect\", function(client){\r\n \/\/Connection established with the signaling server\r\n console.log(\"connected!\");\r\n\r\n \/\/Listening for the candidate message from a peer sent from onicecandidate handler\r\n socket.on(\"candidate\", function(msg){\r\n console.log(\"candidate received\");\r\n caller.addIceCandidate(new RTCIceCandidate(JSON.parse(msg).candidate));\r\n \r\n });\r\n\r\n \/\/Listening for Session Description Protocol message with session details from remote peer\r\n socket.on(\"sdp\", function(msg){\r\n console.log(\"sdp received\");\r\n var sessionDesc = new RTCSessionDescription(JSON.parse(msg).sdp);\r\n caller.setRemoteDescription(sessionDesc);\r\n caller.createAnswer().then(function(sdp){\r\n caller.setLocalDescription(new RTCSessionDescription(sdp));\r\n socket.emit(\"answer\", JSON.stringify({\"sdp\": sdp}));\r\n }); \r\n });\r\n\r\n \/\/Listening for answer to offer sent to remote peer\r\n socket.on(\"answer\", function(answer){\r\n console.log(\"answer received\");\r\n caller.setRemoteDescription(new RTCSessionDescription(JSON.parse(answer).sdp));\r\n });\r\n});\r\n<\/pre>\nGet*<\/code> are needed to protect our code due to cross browser compatibility issues. Like I said before that WebRTC is still being standardized and browser vendors have prefixed their implementations with prefixes. Apart from this we instantiate an RTCPeerConnection<\/code> on load and register a handler for ice candidates<\/code> and stream<\/code>. ICE Candidates are the peers available in the network. Streams are added to the RTCPeerConnection<\/code> object for sharing with remote peers. The flow of the whole operation is as follows:<\/p>\n\n
RTCPeerConnection<\/code> and register onicecandidate<\/code> and onaddstream<\/code> event handlers. <\/li>\ngetUserMedia<\/code> API call and add to the RTCPeerConnection<\/code> object.<\/li>\n![\"\"](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2017\/08\/RTCPeerConnectionDemo.jpg\")
<\/a>6. Exchanging Data<\/h2>\n
RTCPeerConnection<\/code> and getUserMedia<\/code> APIs in action let us look at RTCDataChannel<\/code> API. Although is less glamorous than the other two in terms of output, it can lay its own claim to fame by providing arbitrary data exchange channel among peers. This gives us a lot of abilities to write multi player online games with a RTCDataChannel<\/code> providing superior performance since the players are connected directly to each other.<\/p>\nRTCChannelDemo1.html<\/code> and RTCChannelDemo2.html<\/code>. The markup of both these pages should be as follows:<\/p>\n<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n <title>WCG -- WebRTC Tutorial for Beginners<\/title>\r\n<\/head>\r\n<body>\r\n <textarea id=\"remoteUser\" rows=\"10\" disabled ><\/textarea>\r\n <textarea id=\"self\" rows=\"10\"><\/textarea>\r\n <button id=\"makeCall\" type=\"button\" >Connect<\/button>\r\n <script src=\"\/socket.io\/socket.io.js\"><\/script>\r\n <script>\r\n var socket = io();\r\n <\/script>\r\n <script src=\"\/js\/webrtc.datachannel.js\"><\/script>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
textarea<\/code> elements. The first one shows the text received from the remote peer and we type text to send in the second one. There is also a button<\/code> element to start connecting with remote peer. The script tags include the Socket.io.js<\/code> file, instantiating the socket and our JavaScript file webrtc.datachannel.js<\/code>. All the code to establish a connection and exchange data resides in our JavaScript file which looks like below:<\/p>\n\/\/To iron over browser implementation anomalies like prefixes\r\nGetUserMedia();\r\nGetRTCPeerConnection();\r\nGetRTCSessionDescription();\r\nGetRTCIceCandidate();\r\n\r\n\/\/Initializing a peer connection\r\nvar caller = new window.RTCPeerConnection();\r\nvar remoteCaller = new window.RTCPeerConnection();\r\nvar dataChannel = caller.createDataChannel('myChannel');\r\nvar remoteDataChannel;\r\nvar remoteUserMessage = document.getElementById(\"remoteUser\");\r\nvar sendMessage = document.getElementById(\"self\");\r\n\r\n\/\/Handler for receiving remote channel\r\ncaller.ondatachannel = function(channel){\r\n remoteDataChannel = channel.channel;\r\n};\r\ndataChannel.onopen = function(){\r\n console.log(\"Channel Opened\");\r\n};\r\n\r\ndataChannel.onclose = function(){\r\n console.log(\"Channel Closed\");\r\n};\r\n\r\ndataChannel.onmessage = function(event){\r\n remoteUserMessage.value = event.data;\r\n};\r\n\r\ndataChannel.onerror = function(){\r\n\r\n};\r\n\/\/Listen for ICE Candidates and send them to remote peers\r\ncaller.onicecandidate = function(evt){\r\n if(!evt.candidate) return;\r\n console.log(\"onicecandidate called\");\r\n onIceCandidate(caller, evt); \r\n};\r\n\r\n\/\/onaddstream handler to receive remote feed and show in remoteview video element\r\ncaller.onaddstream = function(evt){\r\n console.log(\"onaddstream called\");\r\n \r\n}; \r\n\r\nfunction GetRTCIceCandidate(){\r\n window.RTCIceCandidate = window.RTCIceCandidate || window.webkitRTCIceCandidate\r\n || window.mozRTCIceCandidate || window.msRTCIceCandidate;\r\n\r\n return window.RTCIceCandidate;\r\n}\r\nfunction GetUserMedia(){\r\n navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia\r\n || navigator.mozGetUserMedia || navigator.msGetUserMedia;\r\n return navigator.getUserMedia;\r\n}\r\nfunction GetRTCPeerConnection(){\r\n window.RTCPeerConnection = window.RTCPeerConnection || window.webkitRTCPeerConnection\r\n || window.mozRTCPeerConnection || window.msRTCPeerConnection;\r\n return window.RTCPeerConnection;\r\n}\r\nfunction GetRTCSessionDescription(){\r\n window.RTCSessionDescription = window.RTCSessionDescription || window.webkitRTCSessionDescription\r\n || window.mozRTCSessionDescription || window.msRTCSessionDescription;\r\n return window.RTCSessionDescription;\r\n}\r\n\r\n\/\/Create and send offer to remote peer on button click\r\ndocument.getElementById(\"makeCall\").addEventListener(\"click\", function(){ \r\n caller.createOffer().then(function(desc){\r\n caller.setLocalDescription(new RTCSessionDescription(desc));\r\n socket.emit(\"sdp\", JSON.stringify({\"sdp\": desc}));\r\n });\r\n});\r\n\r\nsendMessage.addEventListener(\"keyup\", function(evt){\r\n \r\n remoteDataChannel.send(sendMessage.value);\r\n});\r\n\/\/Send the ICE Candidate to the remote peer\r\nfunction onIceCandidate(peer, evt){\r\n if(evt.candidate){ \r\n socket.emit(\"candidate\", JSON.stringify({\"candidate\": evt.candidate}));\r\n }\r\n}\r\n\r\n\/\/Communications with the remote peer through signaling server\r\nsocket.on(\"connect\", function(client){\r\n \/\/Connection established with the signaling server\r\n console.log(\"connected!\");\r\n\r\n \/\/Listening for the candidate message from a peer sent from onicecandidate handler\r\n socket.on(\"candidate\", function(msg){\r\n console.log(\"candidate received\");\r\n caller.addIceCandidate(new RTCIceCandidate(JSON.parse(msg).candidate));\r\n \r\n });\r\n\r\n \/\/Listening for Session Description Protocol message with session details from remote peer\r\n socket.on(\"sdp\", function(msg){\r\n console.log(\"sdp received\");\r\n var sessionDesc = new RTCSessionDescription(JSON.parse(msg).sdp);\r\n caller.setRemoteDescription(sessionDesc);\r\n caller.createAnswer().then(function(sdp){\r\n caller.setLocalDescription(new RTCSessionDescription(sdp));\r\n socket.emit(\"answer\", JSON.stringify({\"sdp\": sdp}));\r\n }); \r\n });\r\n\r\n \/\/Listening for answer to offer sent to remote peer\r\n socket.on(\"answer\", function(answer){\r\n console.log(\"answer received\");\r\n caller.setRemoteDescription(new RTCSessionDescription(JSON.parse(answer).sdp));\r\n });\r\n});\r\n<\/pre>\nRTCPeerConnection<\/code> between peers. It then creates a data channel from the RTCPeerConnection<\/code> object. It also waits for the remote channel to be passed into the ondatachannel<\/code> handler. Furthermore, the code sends the text from the second textarea<\/code> element through the remote channel in the keyup<\/code> event handler.<\/p>\n![\"\"](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2017\/08\/RTCDataChannelPeer1.jpg\")
<\/a>![\"\"](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2017\/08\/RTCDataChannelPeer2.jpg\")
<\/a>7. Code in Action<\/h2>\n
> npm install\r\n<\/pre>\n
> node index.js\r\n<\/pre>\n
getUserMedia<\/code> demo we navigate to the http:\/\/localhost:8090<\/code> URL and click the Show Webcam<\/code> button.
\nFor the RTCPeerConnection<\/code> API demo we need to navigate to http:\/\/localhost:8090\/RTCDemo1.html<\/code> in one tab and http:\/\/localhost:8090\/RTCDemo2.html<\/code> in the other. We need to click the Make Call<\/code> button.
\nAnd lastly, for the RTCDataChannel<\/code> API demo we need to navigate to http:\/\/localhost:8090\/RTCChannelDemo1.html<\/code> and http:\/\/localhost:8090\/RTCChannelDemo2.html<\/code> in two separate tabs.<\/p>\n8. Download the Source Code<\/h2>\n