So what do we have after 3 years of evolving? Well, the current situation is not so good as most of optimists expected. But at least, it’s more clear now what might happen in the future.

Browser vendors divided into 3 tribes: - those who already implemented WebRTC according to specification (at least enough to be compatible with others). Here we have Firefox and all Webkit based browsers, such as Chrome (including version for Android), Chromium and Opera. - Microsoft didn’t surprise anybody with idea to make it’s own, “better” WebRTC. - Apple has just ignored this “hipster” movement.

It doesn’t look good, does it? So how can companies deliver the software, which uses WebRTC, to their customers now?

Most of them decided to follow an easy way and just ask users to use Chrome or Firefox. Even though it sounds lame, that’s pretty smart solution, when taking into consideration latest browser usage statistics.

According to StatCounter research (based on desktop users statistics), 70% of the market share belongs to the WebRTC supported browsers. Also we can assume that at least biggest part of other 30% users will be able to setup Chrome or FF, if needed. So actually, the situation is not that bad and it may have quite promising outcome.

From the other hand, WebRTC by itself isn’t a Holy Grail, but just a tool, which provides developers with the great power of bringing communication into their products. But here the important question pops-up: do the features (natively provided by WebRTC) cover all user needs?

Definitely no! So far most of WebRTC frameworks provide only video/audio calling with some interface for direct data transfers, but we believe this pause in evolution is just temporal.

The same way as old good Web became a basement for rich and talkative Web 2.0, WebRTC shall begin more advanced communication era — WebRTC 2.0. The number of features that can be built on top of WebRTC is only limited by human mind: file transfer, remote photo demonstration, presentations, Internet of Things etc. Peer-to-peer data transfers play key role here, since they take huge load out of service provider shoulders and eliminate high costs of keeping complicated infrastructure distributed around the globe. It cuts the price of service for end user as well.

WebRTC 2.0 will bring real life communication experience to web. For example, let’s imagine that during conversation you decided to show photos from last holiday to your friend. Important here is word “show”. It doesn’t mean sending bunch of files in zip, but showing picture by picture and telling the story at the same time. So as in real life conversation. Also it’s not a secret that with WebRTC we can transfer data directly (even without quality loss), securely, and provide synchronised demonstration. So in the end it will look like you are showing the photos in person. Here’s a short video trailer of such service prototype.

Amazing, right? And that’s only beginning! I believe, that Web can go further than just writing comments and chatting, especially when having such great technology in disposal. And since the Web is becoming more and more about communication, WebRTC can be good platform for a new era.

There are already some projects that built rich functionality on top of WebRTC: CDN networks, Internet of Things communication frameworks and even games (CubeSlam is good example).

So the next years are going to be even more exciting!

Data channel is basically a one direction stream which is used to share data in peer-to-peer connection. For example during video call data is sent via 2 channels: one for outgoing video stream and other for audio. Optionally we can create additional data channels (up to 65535 per connection), for instance to send file to other peers.

How does it work?

After establishing peer-to-peer connection, application creates at least one data channel to share video, audio or pure data. By default data channel uses SRTP (Secure Real-time Transport Protocol), which doesn’t require packet retransmission, so stream continues as fast as connection permits; in the other side when we need to share reliable data like an image or a file, data channel can transport information through SCTP (Stream Control Transmission Protocol) which has control over packet retransmission and ordering. Both protocol works over UDP.

Is that secure?

Security is one of the most important topics in WebRTC, no matter which transport protocol we use, both implement DTLS (Datagram Transport Layer Security) to encrypt data, which is similar to SSL/HTTPS but for UDP instead of TCP.

How can I use data channels without diving into WebRTC specification?

Abstraction of data channels is already implemented in VideoLinkPlatform API, so you can only use simple API functions to transfer data directly between peers.

tl;dr

RTC data channel provides the way to share data in peer-to-peer connection. All data is sent over UDP (which makes communication fast) and depending on kind of data we need to share, channel will transport everything over SRTP or SCTP. First one doesn’t require packet retransmission when a packet is lost, which is useful when we need to share a video or audio stream (so realtime is more important than reliability), when the other protocol (SCTP) guarantees data delivery by requesting packet retransmission (when needed) and keeps ordering, so is useful when all packets must be received in the same order they were sent (for example file transmission).

Data channels are supported by almost all modern browsers and VideoLinkPlatform API provides a simple way to use them as well as seamless fallback for old ones.

Let’s make simple javascript web app that will provide peer-to-peer file sharing via WebRTC

First let’s make sure to have VideoLinkPlatform JS SDK included into your page

1

<script src="//cdn.videolinkplatform.com/vl_api.js"></script>

Then you need to initialize connector object with own API key and desired connection type (which determines what kind of data we’re going to work with). All available parameters can be found in documentation.

Connector object establishes connection to VideolinkPlatform Signaling Cloud and provides API for managing rooms.

1
2
3
4

new VideolinkPlatformConnector({
  apiKey: '<your API key>',
  connectionType: 'chat-only'
}, function success(connector){...}, function failure(error){...})

Constructor takes success callback as second argument, that will receive initialized connector when it’s ready. As soon as we get connector object we can create a room:

1
2
3

connector.createRoom({name: 'file-share'}, function(room){
  vlpRoom = room; //we can use object vlpRoom to access room API
  ...

All peers should join room with the same name (in our case “file-share”) to be able to exchange data.

Files are shared via FileSharingService which is also used to work with file sharing events and can be retrieved from room object:

1

var fileSharingService = vlpRoom.getFileSharingService();

There are plenty number of events in the file sharing process (as you can see here), but for this example we just need to handle onFileRequest and onDownloadCompleted.

1
2
3
4
5
6
7
8

 fileSharingService.onFileRequest(function(fileTransferId, name) {
    if (confirm('Would you like to download file: ' + name)) {
      fileSharingService.acceptFileSharingRequest(fileTransferId);
    }
  });
  fileSharingService.onDownloadCompleted(function(fileId, name, fileData, type, mime) {
    addDownloadedFile(fileId, name, fileData, type, mime);
  });

Now, when we have room and file sharing events configured, we just need to pass selected file to fileSharingService.startFileSharing(file) to start sharing:

1
2
3
4
5
6

function sendP2PFile (file) {
  if (!!vlpRoom){
    var fileSharingService = vlpRoom.getFileSharingService();
    fileSharingService.startFileSharing(file);
  }
}

And that’s it, we have our file sharing js app.

Here’s full source code with some comments:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68

$(function() {
    //We will save File Sharing Service to this variable as soon as room will be created
    var fileSharingService;

    /**
     * This method is called by Drag'n'drop interface when user droped file into container
     * and receives selected files as argument.
     * (it can also be called when file is selected in <input type="file">)
     */
    function sendP2PFile(file) {
        if ( !! fileSharingService) {
            fileSharingService.startFileSharing(file);
        } else {
            alert('File Sharing Service is not ready yet');
        }
    }

    /**
     * Called by onDownloadCompleted event, to show info about downloaded file
     */
    function addDownloadedFile(fileId, name, fileData, type, mime) {
        $('#transmited-files').append('<a target="_blank" href="' + fileData +
            '" class="file-thumbnail col-sm-3"><i class="glyphicon glyphicon-file"></i> Open ' +
            name + '</a>');
    }

    /**
     * Initialize connection to VideolinkPlatform Signaling Cloud and
     * establish text/data connection (so no video and audio stream will be sent)
     */
    var vlpConnector = new VideolinkPlatformConnector({
        apiKey: '58109df59af3c725f8ed0f2a0c65e341',
        connectionType: 'chat-only'
    }, function(connector) {
        /**
         * Create room with name "file-share". If room already exists we will just join it,
         * otherwise it will be created first.
         */
        var roomName = 'file-share';
        connector.createRoom({
            name: roomName
        }, function(room) {
            /**
             * Room is ready, so we can retrieve File Sharing Service and prepare to file transfer
             */
            fileSharingService = room.getFileSharingService();

            /**
             * This event is fired when remote peer initiates file transfer
             */
            fileSharingService.onFileRequest(function(fileTransferId, name) {
                if (confirm('Would you like to download file: ' + name)) {
                    fileSharingService.acceptFileSharingRequest(fileTransferId);
                }
            });

            /**
             * This event is fired when download is completed and we can show file info
             */
            fileSharingService.onDownloadCompleted(function(fileId, name, fileData, type, mime) {
                addDownloadedFile(fileId, name, fileData, type, mime);
            });

        })
    }, function(error) {
        console.log(error);
    })
})

Now if we add some basic layout with ability to drag'n'drop files into web page, we’ll get pretty cool file sharing service: http://rawgit.com/VideolinkPlatform/vlp-samples/master/file-sharing/index.html.

So as you can see, apart of video and audio abilities, WebRTC also provides rich data transfer functionality, which simplifies life of developer, as supports security and different types of transfers out of the box.

Hope you enjoyed reading. Questions and suggestions in comments are appreciated.

Full source code (together with layout, styles and drag'n'drop) is available on GitHub.

Last generation video services created big overhead in call setup — all participants must have the same software (often even same version), installation of which is always a headache for regular users. So they thought twice before using online calls for contact.

But thankfully to fast evolving browsers and web technology, it’s not a problem anymore. With technologies like WebRTC, users can arrange calls directly in web browser, without installation of any additional software (just check Videolink2.me to see how easy it is). So now when client wants to contact support engineer of web shop, just few clicks needed to start it directly in browser without any hassle.

Last few years we were creating services with web based video conferences, and one day we decided to merge all our knowledge and experience into one tool, which is called VideolinkPlatform.

What is VideolinkPlatform?

VideolinkPlatform is a combination of tools and services for developers to simplify building of seamless video calling experience in web browser.

It basically consists of 2 parts: Javascript SDK and Signalling Cloud. First one runs in web browser and receives instructions from web app, when Signalling Cloud is used to setup connection between all participants and manage the call.

The core communication technology that stands behind is WebRTC, which allows to setup peer-to-peer connections between multiple users and transfer audio/video and data streams over that connections. WebRTC is supported by majority of modern web browsers (Chrome, Firefox and Opera) and for browsers that don’t support it VideolinkPlatform provides fallback to peer-to-peer connections over Flash. Such solution lets us support all desktop browsers and recent Android devices.

Why does peer-to-peer matters? Problem of security and data privacy is very important these days. Keeping your personal and professional communication private becomes critical requirement for communication tools. That’s why using peer-to-peer connections is one of our core functionality. Such connection creates direct communication channel between web browsers of call participants and doesn’t send important data trough other servers in a middle. So there is no way to intercept the call by hacking or getting access to servers of communication service provider, since all data travels directly from one participant to another.

Let’s try it in action

It’s always better to see once then hear 10 times. Example below demonstrates the easiest way to add video conference into your web page.

Let’s say that we have a container with id “conference-scene” where we want to put our conference. So page source code looks like:

1
2
3
4
5
6

<html>
<head><title>Video conference example</title></head>
<body>
     <div id="converence-scene"></div>
</body>
</html>

To start using VideolinkPlatform we need to import library to our webpage, which is basically external javascript file:

1

<script src="http://cdn.videolinkplatform.com/vl_api.js"></script>

After that, we need to add javascript code, that will initialise VideolinkPlatform SDK after page is loaded. To run actions after page load is completed, we’ll use javascript “window.onload” event which will create connection to Signalling Cloud:

1
2
3
4
5
6
7
8
9
10

<script>
    window.onload = function() {
        new VideolinkPlatformConnector(
            {container: 'conference-scene', apiKey: '58109df59af3c725f8ed0f2a0c65e341'},
            function(connector) {
                vlRoom = connector.createRoom({name: 'test room'});
            }
        )
    }
</script>

So at 2nd line we added “onload” event handler which connects to Signalling Cloud by creating VideolinkPlatformConnector object. In configuration of that object (line 4) we specified that video streams should be placed in container with id “conference-scene”. At lines 5-7 created conference room with name “test room” (if it haven’t existed before) and immediately joined that room, after connection was established.

Here’s how initialisation process looks in terms of connections:

This few lines of code is basically all what’s needed to create video conference on your page. Below you can find full source code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<html>
<head><title>Video conference example</title></head>
<body>
    <div id="converence-scene"></div>

    <script>
        window.onload = function() {
            new VideolinkPlatformConnector(
                {container: 'conference-scene', apiKey: '58109df59af3c725f8ed0f2a0c65e341'},
                function(connector) {
                    vlRoom = connector.createRoom({name: 'test room'});
                }
            )
        }
    </script>
</body>
</html>

So as you can see, building video conferences is not as complicated as it used to be. The process doesn’t require any field specific skills anymore — just few lines of javascript code and a bit of configuration.

You can find more information about features of JS SDK in our API documentation: http://videolinkplatform.com/apidocs.html

In this blog we’re going to write more about in-browser web conferencing and how VideolinkPlatform can make life of web developer a bit more easy. So if you’re interesting to receive updates, you can subscribe to RSS or follow us in Twitter @VLPlatform.

Also fill free to drop a comment below the post if you have any question or suggestion or contact us directly via email: info@videolink2.me.