A videocall in 11 lines of code with OpenVidu

This post demonstrates how you can implement a videoconference web application with just 11 lines of JavaScript code with OpenVidu. We just need to import our client side library openvidu-browser.js to be used in our JS file and we are ready to get started.

So, first of all we initialize our OpenVidu object, and with it a Session object. This represents a video call room where we will connect.

var OV = new OpenVidu(); // Imported from openvidu-browser.js
var session = OV.initSession();

We then configure just one session event: streamCreated event will tell us when some user published a video to the session. So we subscribe to the Stream, inserting the video in the HTML element with id “subscribers”.

session.on(‘streamCreated’, event => {
    session.subscribe(event.stream, “subscribers”);
});

We then connect to the session. If success, we just need to initialize a Publisher and publish it to the session. We will see our local video inside HTML element with id “publisher”. Ignore “TOKEN” parameter in the first line, we will understand it later.

session.connect(TOKEN).then(() => {
    var publisher = OV.initPublisher(“publisher”);
    session.publish(publisher);
}).catch(error => {
    console.log(“Error connecting to the session”, error.message);
});

And… that’s all. This code is enough to connect N users to a video call, where each one of them will publish their webcam and receive all other user’s webcams.

11 lines of JavaScript code are enough

This could be the simplest HTML

Securing your OpenVidu sessions

Remember the TOKEN parameter when calling Session.connect(TOKEN) method? That’s the way OpenVidu secures your video calls. You need to generate this token in your application server by consuming OpenVidu Server REST API. You can do it in three different ways: by directly calling the REST API, or if your appication server is Java or Node, you can use OpenVidu Java Client or OpenVidu Node Client SDKs.

In the snippets below, we just have to change parameters OPENVIDU_URL and OPENVIDU_SECRET with the proper ones: the url where our OpenVidu Server is deployed and its secret configured during deployment.

REST API (we’ll use curl for the sample code)

1. Initalize a Session in OpenVidu Server

curl -H “Accept: application/json” -H “Content-type: application/json” -X POST https://OPENVIDUAPP:OPENVIDU_SECRET@OPENVIDU_URL/api/sessions

2. Generate tokens for this session (use as “session” parameter the id returned by the previous call)

curl -H "Accept: application/json" -H "Content-type: application/json" -X POST -d '{"session":"SESSION_ID"}' https://OPENVIDUAPP:OPENVIDU_SECRET@OPENVIDU_URL/api/tokens

Java

1. Initalize a Session in OpenVidu Server

OpenVidu openvidu = new OpenVidu(OPENVIDU_URL, OPENVIDU_SECRET);
SessionProperties properties = new SessionProperties.Builder().build();
Session session = openVidu.createSession(properties);

2. Generate tokens for this session

TokenOptions tokenOptions = new TokenOptions.Builder()
    .role(OpenViduRole.PUBLISHER)
    .data("user_data")
    .build();
String token = session.generateToken(tokenOptions);

Node

1. Initalize a Session in OpenVidu Server

var openvidu = new OpenVidu(OPENVIDU_URL, OPENVIDU_SECRET);
var properties = {};
openVidu.createSession(properties).then(session => { ... });

2. Generate tokens for this session

var tokenOptions = {
    role: "PUBLISHER",
    data: "user_data"
};
session.generateToken(tokenOptions).then(token => { ... });

Whatever method we use, we just need to send back the newly created token to our client, where we just have to call Session.connect(TOKEN) as seen above. We need one token for each client, so we must generate as many tokens for that session as users are going to connect to it.

And that’s it! We have gone through the most important concepts of programming with Openvidu: we generate tokens for a specific session in our server application by consuming OpenVidu Server REST API. Then we pass these tokens to our clients to connect them to the session, so they can start publishing and subscribing to the video streams of this specific session.

Easy, right? For a similar tutorial that is actually prepared to be executed, take a look to our openvidu-hello-world tutorial.

Stay tuned for next iterations! You can follow us on Twitter and a Star in GitHub is always welcome :)