Skip to main content
Videolink Platform

How to build simple video chatting web app with VideolinkPlatform

Every day in-browser video communication getting more and more popular among web apps and services. Video calling and messaging makes old-fashioned contact form or support chat look modern and renewed as it brings new experience for instant communication — the same way as we ask shop assistant to help us with selecting new TV we can ask support engineer to help us with making purchase and describe delivery policy of web shop. And what is even more thrilling, is that this communication is just few clicks away.

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.

Comments