WebRTC Real time chat...................
Chatting with friends a lot? Mats Tage Axelsson shows you how to use WebRTC to set up direct contact with friends.
Chatting with friends a lot? Mats Axelsson explains how to use WebRTC to set up a direct contact with friends.
Put simply, WebRTC will enable your browser to send data over the web without having to send the data through a server first, removing the ‘middle man’. When we talk about WebRTC, we are referring to a set of APIs that include MediaStream, RtcPeer-Connection and RTCDataChannel. These APIs are designed to make your browser send data directly to another browser without using plug-ins or other servers. In practice, other servers will be involved for signalling but the data you want to share will be routed as peer-to-peer traffic, avoiding the necessity of any servers to handle your data, another win for privacy.
WebRTC doesn’t do signalling, and leaves it to the developer to use other techniques to set up the call. That also gives us regular users a way to connect directly to each other without ever having the data pass through any service provider. For this, good old SIP can be used, but it’s not the most commonly used method and web sockets are a hot contender for many developments.
Consider Google Hangouts: all your video is going up to Google and right back down to your friend through Google servers. The only reason for this is that Google made the connection and it owns the servers. Google realised that this is a waste of resources especially for one-on-one conversations. The other problem is that we have extra applications or plug-ins for this to work causing increased resource usage. For these reasons the WebRTC project was started with the aim of making it a standard part of most browsers. At the time of writing the browsers that support this are: Chrome, Firefox and Opera.
Why WebRTC?
A detailed view of the current state of support for different browsers can be found at http://iswebrtcreadyyet.com. In the Firefox browser you have the Hello utility to start a WebRTC session. Simply look for the smiley face in the upper right corner, click the icon and the browser will then make you a link to send to whomever you want to have a conversation with. When you have allowed access to your web cam and microphone you are ready to go, watch out, you are now sharing your audio and video for all to see and hear.
This nifty tool can, among other things, be used to share the current web page you are browsing. When you have shared the link, a pop-up will appear in the right-lower corner showing that you are sharing the current tab and the pop-up is your control panel for the session. Here you can turn on and off both video and audio. You also have an information bar at the top of the browser screen to keep you aware that you are sharing both tab, audio and video. When you are done and want to stay private, click the white arrow on red background to close the connection.
The simplest way to make your own web page is to use code already available on the web and adjust a little. Many examples can be found on GitHub. This is a bit of a cheat since you only cut and paste so to learn, make sure to play around a little with the code.
We’ve set up a page ourselves to demonstrate how you can do it. This test was purely copy and paste into my own web page. The file (from http://pastebin.com/BMj978vj) is
webRTC.html. When the page is opened you see a very simple and boring button that states ‘Setup New Conference’. Being the geeks we are this is actually exciting, let’s see what is on the page.
The beginning of the page doesn’t even need to be a correct HTML tag, though proud web developers would put it in and add CSS in a separate page and so on. However here we are studying the JavaScript for this page.
The first three statements are <script src = ...> statements referring to the scripts as implemented by the web page it is coming from, in this case cdn.webrtcexperiment.com. The ones called are: socket.io.js,
RTCPeerConnection-v1.5.js and conference.js. The socket.io.js script is to make it possible to find your peer. Remember that WebRTC doesn’t signal so this is one solution to find others and signal for setting up a connection. We can actually choose SIP here, which is the old style signalling. Using these statements will include all the classes needed by the page.
Fun experiment for you. If you try to copy the code to your desktop and open it as a web page, there will be an error saying ‘conference is not defined’. This is because the classes have not been imported and the code is calling the conference class from conference.js, which isn’t loaded. Try loading it from your own web page and then disconnecting the network, open the page again and the video will still show up. Obviously, you will not be able to connect anywhere.
The conference.js isn’t a WebRTC API. Instead, this is an additional API specifically for conferencing. This is just another example that shows that to make use of WebRTC, you will need many additional APIs to extend the pure communications nature of WebRTC. The only WebRTC API imported in this code is RTCPeerConnection, needed for connecting with the correct parameters to your peer.
Native WebRTC in Linux
To use WebRTC in a Linux distribution (distro) we can use a web browser, with Firefox and Chrome being the most common. If you want to write your own application you need to install some of the Chromium depot tools. To do this you
need git 2.2.1 or higher. Here is how to fetch depot_tools: $ git clone https://chromium.googlesource.com/chromium/ tools/depot_tools.git Add depot_tools to your PATH: $ export PATH=`pwd`/depot_tools:"$PATH”
An interesting quirk is that one of the tools is named gcl which is the same name as the GNU Common Lisp Compiler, so you need to put depot_tools first in your PATH variable.
When you get really serious, you will want to put this path statement in your .bashrc file or the equivalent for your favourite shell. To activate the tools you will need to synchronise your Git client: $ gclient sync Next you need to install all your dependencies, using the below script that is available after your first gclient sync. $ ./build/install-build-deps.sh
With this done, you are ready to make your first native application under Linux.
Do remember that these instructions are actually made for Ubuntu so if you run into problems you need to follow the instructions for installing the Chromium tools at https:// chromium.googlesource.com.
For true excitement, and if your computer can muster up the performance, try installing the Java OpenJDK according to the ‘Chromium Android prerequisites’ to compile for your Android phone or tablet. You are now ready to get developing. Who knows maybe you will contribute a new grand idea to the development of the web. What ideas do you have? There are already examples of new chat solutions, conferencing solutions and also games that rely on the direct exchange of data between web browsers! LXF