Category: webrtc

WebRTC – Environment ”; Previous Next Before we start building our WebRTC applications, we should set our coding environment. First of all, you should have a text editor or IDE where you can edit HTML and Javascript. There are chances that you have already chosen the preferred one as you are reading this tutorial. As for me, I”m using WebStorm IDE. You can download its trial version at https://www.jetbrains.com/webstorm/. I”m also using Linux Mint as my OS of choice. The other requirement for common WebRTC applications is having a server to host the HTML and Javascript files. The code will not work just by double-clicking on the files because the browser is not allowed to connect to cameras and microphones unless the files are being served by an actual server. This is done obviously due to the security issues. There are tons of different web servers, but in this tutorial, we are going to use Node.js with node-static − Visit https://nodejs.org/en/ and download the latest Node.js version. Unpack it to the /usr/local/nodejs directory. Open the /home/YOUR_USERNAME/.profile file and add the following line to the end − export PATH=$PATH:/usr/local/nodejs/bin The you can restart your computer or run source /home/YOUR_USERNAME/.profile Now the node command should be available from the command line. The npm command is also available. NMP is the package manager for Node.js. You can learn more at https://www.npmjs.com/. Open up a terminal and run sudo npm install -g node-static. This will install the static web server for Node.js. Now navigate to any directory containing the HTML files and run the static command inside the directory to start your web server. You can navigate to http://localhost:8080 to see your files. There is another way to install nodejs. Just run sudo apt-get install nodejs in the terminal window. To test your Node.js installation open up your terminal and run the node command. Type a few commands to check how it works − Node.js runs Javascript files as well as commands typed in the terminal. Create an index.js file with the following content − console.log(“Testing Node.js”); Then run the node index command. You will see the following − When building our signaling server we will use a WebSockets library for Node.js. To install in run npm install ws in the terminal. For testing our signaling server, we will use the wscat utility. To install it run npm install -g wscat in your terminal window. S.No Protocols & Description 1 WebRTC Protocols WebRTC applications use UDP (User Datagram Protocol) as the transport protocol. Most web applications today are built with the using of the TCP (Transmission Control Protocol) 2 Session Description Protocol The SDP is an important part of the WebRTC. It is a protocol that is intended to describe media communication sessions. 3 Finding a Route In order to connect to another user, you should find a clear path around your own network and the other user”s network. But there are chances that the network you are using has several levels of access control to avoid security issues. 4 Stream Control Transmission Protocol With the peer connection, we have the ability to send quickly video and audio data. The SCTP protocol is used today to send blob data on top of our currently setup peer connection when using the RTCDataChannel object. Summary In this chapter, we covered several of the technologies that enable peer connections, such as UDP, TCP, STUN, TURN, ICE, and SCTP. You should now have a surface-level understanding of how SDP works and its use cases. Print Page Previous Next Advertisements ”;

WebRTC – Voice Demo ”; Previous Next In this chapter, we are going to build a client application that allows two users on separate devices to communicate using WebRTC audio streams. Our application will have two pages. One for login and the other for making an audio call to another user. The two pages will be the div tags. Most input is done through simple event handlers. Signaling Server To create a WebRTC connection clients have to be able to transfer messages without using a WebRTC peer connection. This is where we will use HTML5 WebSockets − a bidirectional socket connection between two endpoints − a web server and a web browser. Now let”s start using the WebSocket library. Create the server.js file and insert the following code − //require our websocket library var WebSocketServer = require(”ws”).Server; //creating a websocket server at port 9090 var wss = new WebSocketServer({port: 9090}); //when a user connects to our sever wss.on(”connection”, function(connection) { console.log(“user connected”); //when server gets a message from a connected user connection.on(”message”, function(message) { console.log(“Got message from a user:”, message); }); connection.send(“Hello from server”); }); The first line requires the WebSocket library which we have already installed. Then we create a socket server on the port 9090. Next, we listen to the connection event. This code will be executed when a user makes a WebSocket connection to the server. We then listen to any messages sent by the user. Finally, we send a response to the connected user saying “Hello from server”. In our signaling server, we will use a string-based username for each connection so we know where to send messages. Let”s change our connection handler a bit − connection.on(”message”, function(message) { var data; //accepting only JSON messages try { data = JSON.parse(message); } catch (e) { console.log(“Invalid JSON”); data = {}; } }); This way we accept only JSON messages. Next, we need to store all connected users somewhere. We will use a simple Javascript object for it. Change the top of our file − //require our websocket library var WebSocketServer = require(”ws”).Server; //creating a websocket server at port 9090 var wss = new WebSocketServer({port: 9090}); //all connected to the server users var users = {}; We are going to add a type field for every message coming from the client. For example if a user wants to login, he sends the login type message. Let”s define it − connection.on(”message”, function(message) { var data; //accepting only JSON messages try { data = JSON.parse(message); } catch (e) { console.log(“Invalid JSON”); data = {}; } //switching type of the user message switch (data.type) { //when a user tries to login case “login”: console.log(“User logged:”, data.name); //if anyone is logged in with this username then refuse if(users[data.name]) { sendTo(connection, { type: “login”, success: false }); } else { //save user connection on the server users[data.name] = connection; connection.name = data.name; sendTo(connection, { type: “login”, success: true }); } break; default: sendTo(connection, { type: “error”, message: “Command no found: ” + data.type }); break; } }); If the user sends a message with the login type, we − Check if anyone has already logged in with this username. If so, then tell the user that he hasn”t successfully logged in. If no one is using this username, we add username as a key to the connection object. If a command is not recognized we send an error. The following code is a helper function for sending messages to a connection. Add it to the server.js file − function sendTo(connection, message) { connection.send(JSON.stringify(message)); } When the user disconnects we should clean up its connection. We can delete the user when the close event is fired. Add the following code to the connection handler− connection.on(“close”, function() { if(connection.name) { delete users[connection.name]; } }); After successful login the user wants to call another. He should make an offer to another user to achieve it. Add the offer handler − case “offer”: //for ex. UserA wants to call UserB console.log(“Sending offer to: “, data.name); //if UserB exists then send him offer details var conn = users[data.name]; if(conn != null) { //setting that UserA connected with UserB connection.otherName = data.name; sendTo(conn, { type: “offer”, offer: data.offer, name: connection.name }); } break; Firstly, we get the connection of the user we are trying to call. If it exists we send him offer details. We also add otherName to the connection object. This is made for the simplicity of finding it later. Answering to the response has a similar pattern that we used in the offer handler. Our server just passes through all messages as answer to another user. Add the following code after the offer handler − case “answer”: console.log(“Sending answer to: “, data.name); //for ex. UserB answers UserA var conn = users[data.name]; if(conn != null) { connection.otherName = data.name; sendTo(conn, { type: “answer”, answer: data.answer }); } break; The final part is handling ICE candidate between users. We use the same technique just passing messages between users. The main difference is that candidate messages might happen multiple times per user in any order. Add the candidate handler − case “candidate”: console.log(“Sending candidate to:”,data.name); var conn = users[data.name]; if(conn != null) { sendTo(conn, { type: “candidate”, candidate: data.candidate }); } break; To allow our users to disconnect from another user we should implement the hanging up function. It will also tell the server to delete all user references. Add the leave handler − case “leave”: console.log(“Disconnecting from”, data.name); var conn = users[data.name]; conn.otherName = null; //notify the other user so he can disconnect his peer connection if(conn != null) { sendTo(conn, { type: “leave” }); } break; This will also send the other user the leave event so he can disconnect his peer connection accordingly. We should also handle the case when a user drops his connection from the signaling server. Let”s modify our close handler − connection.on(“close”, function() { if(connection.name) { delete users[connection.name]; if(connection.otherName) { console.log(“Disconnecting from “, connection.otherName); var conn = users[connection.otherName];

WebRTC – Useful Resources ”; Previous Next The following resources contain additional information on WebRTC. Please use them to get more in-depth knowledge on this. Useful Video Courses Full Stack Web Development Course Best Seller 208 Lectures 33 hours Eduonix Learning Solutions More Detail Advanced Google Search Operators: Web Research Like the Pros 26 Lectures 1.5 hours Sasha Miller More Detail Web Application Hacking with Burp Suite 16 Lectures 2 hours Scott Cosentino More Detail Setup a Virtual Web Server using Linode or Digital Ocean 39 Lectures 2 hours YouAccel More Detail Full-Stack web app development with Angular 12, .NET Core Web API & Mongo DB Most Popular 20 Lectures 49 mins Vinay Kumar More Detail Angular 12, .NET Core Web API & Microsoft SQL Full Stack Web Development 21 Lectures 55 mins Vinay Kumar More Detail Print Page Previous Next Advertisements ”;

WebRTC – Quick Guide ”; Previous Next WebRTC – Overview The Web is no more a stranger to real-time communication as WebRTC (Web Real-Time Communication) comes into play. Although it was released in May 2011, it is still developing and its standards are changing. A set of protocols is standardized by Real-Time Communication in WEB-browsers Working group at http://tools.ietf.org/wg/rtcweb/ of the IETF (Internet Engineering Task Force) while new sets of APIs are standardized by the Web Real-Time Communications Working Groupe at http://www.w3.org/2011/04/webrtc/ of the W3C (World Wide Web Consortium). With the appearance of WebRTC, modern web applications can easily stream audio and video content to millions of people. Basic Scheme WebRTC allows you to set up peer-to-peer connections to other web browsers quickly and easily. To build such an application from scratch, you would need a wealth of frameworks and libraries dealing with typical issues like data loss, connection dropping, and NAT traversal. With WebRTC, all of this comes built-in into the browser out-of-the-box. This technology doesn”t need any plugins or third-party software. It is open-sourced and its source code is freely available at http://www.webrtc.org/. The WebRTC API includes media capture, encoding and decoding audio and video, transportation layer, and session management. Media Capture The first step is to get access to the camera and microphone of the user”s device. We detect the type of devices available, get user permission to access these devices and manage the stream. Encoding and Decoding Audio and Video It is not an easy task to send a stream of audio and video data over the Internet. This is where encoding and decoding are used. This is the process of splitting up video frames and audio waves into smaller chunks and compressing them. This algorithm is called codec. There is an enormous amount of different codecs, which are maintained by different companies with different business goals. There are also many codecs inside WebRTC like H.264, iSAC, Opus and VP8. When two browsers connect together, they choose the most optimal supported codec between two users. Fortunately, WebRTC does most of the encoding behind the scenes. Transportation Layer The transportation layer manages the order of packets, deal with packet loss and connecting to other users. Again the WebRTC API gives us an easy access to events that tell us when there are issues with the connection. Session Management The session management deals with managing, opening and organizing connections. This is commonly called signaling. If you transfer audio and video streams to the user it also makes sense to transfer collateral data. This is done by the RTCDataChannel API. Engineers from companies like Google, Mozilla, Opera and others have done a great job to bring this real-time experience to the Web. Browser Compatibility The WebRTC standards are one of the fastest evolving on the web, so it doesn”t mean that every browser supports all the same features at the same time. To check whether your browser supports WebRTC or not, you may visit http://caniuse.com/#feat=rtcpeerconnection. Throughout all the tutorials, I recommend you to use Chrome for all the examples. Trying out WebRTC Let”s get started using WebRTC right now. Click the “JOIN” button. You should see a drop-down notification. Click the “Allow” button to start streaming your video and audio to the web page. You should see a video stream of yourself. Now open the URL you are currently on in a new browser tab and click on “JOIN”. You should see two video streams − one from your first client and another from the second one. Now you should understand why WebRTC is a powerful tool. Use Cases The real-time web opens the door to a whole new range of applications, including text-based chat, screen and file sharing, gaming, video chat, and more. Besides communication you can use WebRTC for other purposes like − real-time marketing real-time advertising back office communications (CRM, ERP, SCM, FFM) HR management social networking dating services online medical consultations financial services surveillance multiplayer games live broadcasting e-learning Summary Now you should have a clear understanding of the term WebRTC. You should also have an idea of what types of applications can be built with WebRTC, as you have already tried it in your browser. To sum up, WebRTC is quite a useful technology. WebRTC – Architecture The overall WebRTC architecture has a great level of complexity. Here you can find three different layers − API for web developers − this layer contains all the APIs web developer needed, including RTCPeerConnection, RTCDataChannel, and MediaStrean objects. API for browser makers Overridable API, which browser makers can hook. Transport components allow establishing connections across various types of networks while voice and video engines are frameworks responsible for transferring audio and video streams from a sound card and camera to the network. For Web developers, the most important part is WebRTC API. If we look at the WebRTC architecture from the client-server side we can see that one of the most commonly used models is inspired by the SIP(Session Initiation Protocol) Trapezoid. In this model, both devices are running a web application from different servers. The RTCPeerConnection object configures streams so they could connect to each other, peer-to-peer. This signaling is done via HTTP or WebSockets. But the most commonly used model is Triangle − In this model both devices use the same web application. It gives web developer more flexibility when managing user connections. The WebRTC API It consists of a few main javascript objects − RTCPeerConnection MediaStream RTCDataChannel The RTCPeerConnection object This object is the main entry point to the WebRTC API. It helps us connect to peers, initialize connections and attach media streams. It also manages a UDP connection with another user. The main task of the RTCPeerConnection object is to setup and create a peer connection. We can easily hook keys points of the connection because this object fires a set of events when they appear. These events give you access to the configuration of our connection − The

WebRTC Tutorial PDF Version Quick Guide Resources Job Search Discussion With Web Real-Time Communication (WebRTC), modern web applications can easily stream audio and video content to millions of people. In this tutorial, we would explain how you can use WebRTC to set up peer-to-peer connections to other web browsers quickly and easily. Audience This tutorial is going to help all those developers who would like to learn how to build applications such as real-time advertising, multiplayer games, live broadcasting, e-learning, to name a few, where the action takes place in real time. Prerequisites WebRTC is a powerful tool that can be used to infuse Real-Time Communications (RTC) capabilities into browsers and mobile applications. This tutorial covers only the basics of WebRTC and any regular developer with some level of exposure to real-time session management can easily grasp the concepts discussed here. Print Page Previous Next Advertisements ”;

WebRTC – Video Demo ”; Previous Next In this chapter, we are going to build a client application that allows two users on separate devices to communicate using WebRTC. Our application will have two pages. One for login and the other for calling another user. The two pages will be the div tags. Most input is done through simple event handlers. Signaling Server To create a WebRTC connection clients have to be able to transfer messages without using a WebRTC peer connection. This is where we will use HTML5 WebSockets − a bidirectional socket connection between two endpoints − a web server and a web browser. Now let”s start using the WebSocket library. Create the server.js file and insert the following code − //require our websocket library var WebSocketServer = require(”ws”).Server; //creating a websocket server at port 9090 var wss = new WebSocketServer({port: 9090}); //when a user connects to our sever wss.on(”connection”, function(connection) { console.log(“user connected”); //when server gets a message from a connected user connection.on(”message”, function(message) { console.log(“Got message from a user:”, message); }); connection.send(“Hello from server”); }); The first line requires the WebSocket library which we have already installed. Then we create a socket server on the port 9090. Next, we listen to the connection event. This code will be executed when a user makes a WebSocket connection to the server. We then listen to any messages sent by the user. Finally, we send a response to the connected user saying “Hello from server”. In our signaling server, we will use a string-based username for each connection so we know where to send messages. Let”s change our connection handler a bit − connection.on(”message”, function(message) { var data; //accepting only JSON messages try { data = JSON.parse(message); } catch (e) { console.log(“Invalid JSON”); data = {}; } }); This way we accept only JSON messages. Next, we need to store all connected users somewhere. We will use a simple Javascript object for it. Change the top of our file − //require our websocket library var WebSocketServer = require(”ws”).Server; //creating a websocket server at port 9090 var wss = new WebSocketServer({port: 9090}); //all connected to the server users var users = {}; We are going to add a type field for every message coming from the client. For example if a user wants to login, he sends the login type message. Let”s define it − connection.on(”message”, function(message) { var data; //accepting only JSON messages try { data = JSON.parse(message); } catch (e) { console.log(“Invalid JSON”); data = {}; } //switching type of the user message switch (data.type) { //when a user tries to login case “login”: console.log(“User logged:”, data.name); //if anyone is logged in with this username then refuse if(users[data.name]) { sendTo(connection, { type: “login”, success: false }); } else { //save user connection on the server users[data.name] = connection; connection.name = data.name; sendTo(connection, { type: “login”, success: true }); } break; default: sendTo(connection, { type: “error”, message: “Command no found: ” + data.type }); break; } }); If the user sends a message with the login type, we − Check if anyone has already logged in with this username If so, then tell the user that he hasn”t successfully logged in If no one is using this username, we add username as a key to the connection object. If a command is not recognized we send an error. The following code is a helper function for sending messages to a connection. Add it to the server.js file − function sendTo(connection, message) { connection.send(JSON.stringify(message)); } When the user disconnects we should clean up its connection. We can delete the user when the close event is fired. Add the following code to the connection handler − connection.on(“close”, function() { if(connection.name) { delete users[connection.name]; } }); After successful login the user wants to call another. He should make an offer to another user to achieve it. Add the offer handler − case “offer”: //for ex. UserA wants to call UserB console.log(“Sending offer to: “, data.name); //if UserB exists then send him offer details var conn = users[data.name]; if(conn != null) { //setting that UserA connected with UserB connection.otherName = data.name; sendTo(conn, { type: “offer”, offer: data.offer, name: connection.name }); } break; Firstly, we get the connection of the user we are trying to call. If it exists we send him offer details. We also add otherName to the connection object. This is made for the simplicity of finding it later. Answering to the response has a similar pattern that we used in the offer handler. Our server just passes through all messages as answer to another user. Add the following code after the offer handler − case “answer”: console.log(“Sending answer to: “, data.name); //for ex. UserB answers UserA var conn = users[data.name]; if(conn != null) { connection.otherName = data.name; sendTo(conn, { type: “answer”, answer: data.answer }); } break; The final part is handling ICE candidate between users. We use the same technique just passing messages between users. The main difference is that candidate messages might happen multiple times per user in any order. Add the candidate handler − case “candidate”: console.log(“Sending candidate to:”,data.name); var conn = users[data.name]; if(conn != null) { sendTo(conn, { type: “candidate”, candidate: data.candidate }); } break; To allow our users to disconnect from another user we should implement the hanging up function. It will also tell the server to delete all user references. Add the leave handler − case “leave”: console.log(“Disconnecting from”, data.name); var conn = users[data.name]; conn.otherName = null; //notify the other user so he can disconnect his peer connection if(conn != null) { sendTo(conn, { type: “leave” }); } break; This will also send the other user the leave event so he can disconnect his peer connection accordingly. We should also handle the case when a user drops his connection from the signaling server. Let”s modify our close handler − connection.on(“close”, function() { if(connection.name) { delete users[connection.name]; if(connection.otherName) { console.log(“Disconnecting from “, connection.otherName); var conn = users[connection.otherName]; conn.otherName = null; if(conn !=

Discuss WebRTC ”; Previous Next With Web Real-Time Communication (WebRTC), modern web applications can easily stream audio and video content to millions of people. In this tutorial, we would explain how you can use WebRTC to set up peer-to-peer connections to other web browsers quickly and easily. Print Page Previous Next Advertisements ”;

WebRTC – Sending Messages ”; Previous Next Now let”s create a simple example. Firstly, run the signaling server we created in the “signaling server” tutorial via “node server”. There will be three text inputs on the page, one for a login, one for a username, and one for the message we want to send to the other peer. Create an index.html file and add the following code − <html lang = “en”> <head> <meta charset = “utf-8” /> </head> <body> <div> <input type = “text” id = “loginInput” /> <button id = “loginBtn”>Login</button> </div> <div> <input type = “text” id = “otherUsernameInput” /> <button id = “connectToOtherUsernameBtn”>Establish connection</button> </div> <div> <input type = “text” id = “msgInput” /> <button id = “sendMsgBtn”>Send text message</button> </div> <script src = “client.js”></script> </body> </html> We”ve also added three buttons for login, establishing a connection and sending a message. Now create a client.js file and add the following code − var connection = new WebSocket(”ws://localhost:9090”); var name = “”; var loginInput = document.querySelector(”#loginInput”); var loginBtn = document.querySelector(”#loginBtn”); var otherUsernameInput = document.querySelector(”#otherUsernameInput”); var connectToOtherUsernameBtn = document.querySelector(”#connectToOtherUsernameBtn”); var msgInput = document.querySelector(”#msgInput”); var sendMsgBtn = document.querySelector(”#sendMsgBtn”); var connectedUser, myConnection, dataChannel; //when a user clicks the login button loginBtn.addEventListener(“click”, function(event) { name = loginInput.value; if(name.length > 0) { send({ type: “login”, name: name }); } }); //handle messages from the server connection.onmessage = function (message) { console.log(“Got message”, message.data); var data = JSON.parse(message.data); switch(data.type) { case “login”: onLogin(data.success); break; case “offer”: onOffer(data.offer, data.name); break; case “answer”: onAnswer(data.answer); break; case “candidate”: onCandidate(data.candidate); break; default: break; } }; //when a user logs in function onLogin(success) { if (success === false) { alert(“oops…try a different username”); } else { //creating our RTCPeerConnection object var configuration = { “iceServers”: [{ “url”: “stun:stun.1.google.com:19302” }] }; myConnection = new webkitRTCPeerConnection(configuration, { optional: [{RtpDataChannels: true}] }); console.log(“RTCPeerConnection object was created”); console.log(myConnection); //setup ice handling //when the browser finds an ice candidate we send it to another peer myConnection.onicecandidate = function (event) { if (event.candidate) { send({ type: “candidate”, candidate: event.candidate }); } }; openDataChannel(); } }; connection.onopen = function () { console.log(“Connected”); }; connection.onerror = function (err) { console.log(“Got error”, err); }; // Alias for sending messages in JSON format function send(message) { if (connectedUser) { message.name = connectedUser; } connection.send(JSON.stringify(message)); }; You can see that we establish a socket connection to our signaling server. When a user clicks on the login button the application sends his username to the server. If login is successful the application creates the RTCPeerConnection object and setup onicecandidate handler which sends all found icecandidates to the other peer. It also runs the openDataChannel() function which creates a dataChannel. Notice that when creating the RTCPeerConnection object the second argument in the constructor optional: [{RtpDataChannels: true}] is mandatory if you are using Chrome or Opera. The next step is to create an offer to the other peer. Add the following code to your client.js file− //setup a peer connection with another user connectToOtherUsernameBtn.addEventListener(“click”, function () { var otherUsername = otherUsernameInput.value; connectedUser = otherUsername; if (otherUsername.length > 0) { //make an offer myConnection.createOffer(function (offer) { console.log(); send({ type: “offer”, offer: offer }); myConnection.setLocalDescription(offer); }, function (error) { alert(“An error has occurred.”); }); } }); //when somebody wants to call us function onOffer(offer, name) { connectedUser = name; myConnection.setRemoteDescription(new RTCSessionDescription(offer)); myConnection.createAnswer(function (answer) { myConnection.setLocalDescription(answer); send({ type: “answer”, answer: answer }); }, function (error) { alert(“oops…error”); }); } //when another user answers to our offer function onAnswer(answer) { myConnection.setRemoteDescription(new RTCSessionDescription(answer)); } //when we got ice candidate from another user function onCandidate(candidate) { myConnection.addIceCandidate(new RTCIceCandidate(candidate)); } You can see that when a user clicks the “Establish connection” button the application makes an SDP offer to the other peer. We also set onAnswer and onCandidate handlers. Finally, let”s implement the openDataChannel() function which creates our dataChannel. Add the following code to your client.js file − //creating data channel function openDataChannel() { var dataChannelOptions = { reliable:true }; dataChannel = myConnection.createDataChannel(“myDataChannel”, dataChannelOptions); dataChannel.onerror = function (error) { console.log(“Error:”, error); }; dataChannel.onmessage = function (event) { console.log(“Got message:”, event.data); }; } //when a user clicks the send message button sendMsgBtn.addEventListener(“click”, function (event) { console.log(“send message”); var val = msgInput.value; dataChannel.send(val); }); Here we create the dataChannel for our connection and add the event handler for the “send message” button. Now open this page in two tabs, login with two users, establish a connection, and try to send messages. You should see them in the console output. Notice that the above example is tested in Opera. Now you may see that RTCDataChannel is extremely powerful part of the WebRTC API. There are a lot of other use cases for this object, like peer-to-peer gaming or torrent-based file sharing. Print Page Previous Next Advertisements ”;

WebRTC – Overview ”; Previous Next The Web is no more a stranger to real-time communication as WebRTC (Web Real-Time Communication) comes into play. Although it was released in May 2011, it is still developing and its standards are changing. A set of protocols is standardized by Real-Time Communication in WEB-browsers Working group at http://tools.ietf.org/wg/rtcweb/ of the IETF (Internet Engineering Task Force) while new sets of APIs are standardized by the Web Real-Time Communications Working Groupe at http://www.w3.org/2011/04/webrtc/ of the W3C (World Wide Web Consortium). With the appearance of WebRTC, modern web applications can easily stream audio and video content to millions of people. Basic Scheme WebRTC allows you to set up peer-to-peer connections to other web browsers quickly and easily. To build such an application from scratch, you would need a wealth of frameworks and libraries dealing with typical issues like data loss, connection dropping, and NAT traversal. With WebRTC, all of this comes built-in into the browser out-of-the-box. This technology doesn”t need any plugins or third-party software. It is open-sourced and its source code is freely available at http://www.webrtc.org/. The WebRTC API includes media capture, encoding and decoding audio and video, transportation layer, and session management. Media Capture The first step is to get access to the camera and microphone of the user”s device. We detect the type of devices available, get user permission to access these devices and manage the stream. Encoding and Decoding Audio and Video It is not an easy task to send a stream of audio and video data over the Internet. This is where encoding and decoding are used. This is the process of splitting up video frames and audio waves into smaller chunks and compressing them. This algorithm is called codec. There is an enormous amount of different codecs, which are maintained by different companies with different business goals. There are also many codecs inside WebRTC like H.264, iSAC, Opus and VP8. When two browsers connect together, they choose the most optimal supported codec between two users. Fortunately, WebRTC does most of the encoding behind the scenes. Transportation Layer The transportation layer manages the order of packets, deal with packet loss and connecting to other users. Again the WebRTC API gives us an easy access to events that tell us when there are issues with the connection. Session Management The session management deals with managing, opening and organizing connections. This is commonly called signaling. If you transfer audio and video streams to the user it also makes sense to transfer collateral data. This is done by the RTCDataChannel API. Engineers from companies like Google, Mozilla, Opera and others have done a great job to bring this real-time experience to the Web. Browser Compatibility The WebRTC standards are one of the fastest evolving on the web, so it doesn”t mean that every browser supports all the same features at the same time. To check whether your browser supports WebRTC or not, you may visit http://caniuse.com/#feat=rtcpeerconnection. Throughout all the tutorials, I recommend you to use Chrome for all the examples. Trying out WebRTC Let”s get started using WebRTC right now. Click the “JOIN” button. You should see a drop-down notification. Click the “Allow” button to start streaming your video and audio to the web page. You should see a video stream of yourself. Now open the URL you are currently on in a new browser tab and click on “JOIN”. You should see two video streams − one from your first client and another from the second one. Now you should understand why WebRTC is a powerful tool. Use Cases The real-time web opens the door to a whole new range of applications, including text-based chat, screen and file sharing, gaming, video chat, and more. Besides communication you can use WebRTC for other purposes like − real-time marketing real-time advertising back office communications (CRM, ERP, SCM, FFM) HR management social networking dating services online medical consultations financial services surveillance multiplayer games live broadcasting e-learning Summary Now you should have a clear understanding of the term WebRTC. You should also have an idea of what types of applications can be built with WebRTC, as you have already tried it in your browser. To sum up, WebRTC is quite a useful technology. Print Page Previous Next Advertisements ”;

WebRTC – Signaling ”; Previous Next Most WebRTC applications are not just being able to communicate through video and audio. They need many other features. In this chapter, we are going to build a basic signaling server. Signaling and Negotiation To connect to another user you should know where he is located on the Web. The IP address of your device allows Internet-enabled devices to send data directly between each other. The RTCPeerConnection object is responsible for this. As soon as devices know how to find each other over the Internet, they start exchanging data about which protocols and codecs each device supports. To communicate with another user you simply need to exchange contact information and the rest will be done by WebRTC. The process of connecting to the other user is also known as signaling and negotiation. It consists of a few steps − Create a list of potential candidates for a peer connection. The user or an application selects a user to make a connection with. The signaling layer notifies another user that someone want to connect to him. He can accept or decline. The first user is notified of the acceptance of the offer. The first user initiates RTCPeerConnection with another user. Both users exchange software and hardware information through the signaling server. Both users exchange location information. The connection succeeds or fails. The WebRTC specification does not contain any standards about exchanging information. So keep in mind that the above is just an example of how signaling may happen. You can use any protocol or technology you like. Building the Server The server we are going to build will be able to connect two users together who are not located on the same computer. We will create our own signaling mechanism. Our signaling server will allow one user to call another. Once a user has called another, the server passes the offer, answer, ICE candidates between them and setup a WebRTC connection. The above diagram is the messaging flow between users when using the signaling server. First of all, each user registers with the server. In our case, this will be a simple string username. Once users have registered, they are able to call each other. User 1 makes an offer with the user identifier he wishes to call. The other user should answers. Finally, ICE candidates are sent between users until they can make a connection. To create a WebRTC connection clients have to be able to transfer messages without using a WebRTC peer connection. This is where we will use HTML5 WebSockets – a bidirectional socket connection between two endpoints – a web server and a web browser. Now let”s start using the WebSocket library. Create the server.js file and insert the following code − //require our websocket library var WebSocketServer = require(”ws”).Server; //creating a websocket server at port 9090 var wss = new WebSocketServer({port: 9090}); //when a user connects to our sever wss.on(”connection”, function(connection) { console.log(“user connected”); //when server gets a message from a connected user connection.on(”message”, function(message){ console.log(“Got message from a user:”, message); }); connection.send(“Hello from server”); }); The first line requires the WebSocket library which we have already installed. Then we create a socket server on the port 9090. Next, we listen to the connection event. This code will be executed when a user makes a WebSocket connection to the server. We then listen to any messages sent by the user. Finally, we send a response to the connected user saying “Hello from server”. Now run node server and the server should start listening for socket connections. To test our server, we”ll use the wscat utility which we also have already installed. This tool helps in connecting directly to the WebSocket server and test out commands. Run our server in one terminal window, then open another and run the wscat -c ws://localhost:9090 command. You should see the following on the client side − The server should also log the connected user − User Registration In our signaling server, we will use a string-based username for each connection so we know where to send messages. Let”s change our connection handler a bit − connection.on(”message”, function(message) { var data; //accepting only JSON messages try { data = JSON.parse(message); } catch (e) { console.log(“Invalid JSON”); data = {}; } }); This way we accept only JSON messages. Next, we need to store all connected users somewhere. We will use a simple Javascript object for it. Change the top of our file − //require our websocket library var WebSocketServer = require(”ws”).Server; //creating a websocket server at port 9090 var wss = new WebSocketServer({port: 9090}); //all connected to the server users var users = {}; We are going to add a type field for every message coming from the client. For example if a user wants to login, he sends the login type message. Let”s define it − connection.on(”message”, function(message){ var data; //accepting only JSON messages try { data = JSON.parse(message); } catch (e) { console.log(“Invalid JSON”); data = {}; } //switching type of the user message switch (data.type) { //when a user tries to login case “login”: console.log(“User logged:”, data.name); //if anyone is logged in with this username then refuse if(users[data.name]) { sendTo(connection, { type: “login”, success: false }); } else { //save user connection on the server users[data.name] = connection; connection.name = data.name; sendTo(connection, { type: “login”, success: true }); } break; default: sendTo(connection, { type: “error”, message: “Command no found: ” + data.type }); break; } }); If the user sends a message with the login type, we − Check if anyone has already logged in with this username If so, then tell the user that he hasn”t successfully logged in If no one is using this username, we add username as a key to the connection object. If a command is not recognized we send an error. The following code is a helper function for sending messages to a connection. Add it to the server.js file − function