Today we are relying a lot on Video based chats everywhere. Due to the ongoing pandemic, video conferencing has become very important. All corporate offices are relying on video conferencing for meetings. With the advent of WebRTC, video messages across browsers have become very easy now. Plenty of libraries exist that we can leverage to provide this capability. In this blog post we intend to use Tokbox, now called Vonage video API.
What is WebRTC
But before we go into the API, let us get some understanding on WebRTC. WebRTC is a open web standard for enabling real time communication (RTC) across browsers. It is supported by Apple, Google, Microsoft and Mozilla among others. This technology is available on most modern browsers as well on native clients for all major platforms.
Audio/ Video transfer used RTMP (Real Time Messaging Protocol), a proprietary protocol introduced by Macromedia for quite a long time. Flash was the de-facto standard for displaying video in a browser.
A competing standard at that time was RTSP (Real Time Streaming Protocol), again a proprietary protocol developed by Real Network. However, both of these protocols needed special server to serve data. Today, CCTV cameras still commonly use RTSP.
WebRTC works over browser socket implementation and only needs access to media capture and streaming. It establishes peer to peer connection with other peers in the network. We need an intermediary server during initial connection establishment. To establish communication between parties, metadata information about the network is exchanged. This is known as signaling. WebRTC also specifies use of STUN/ TURN servers when firewalls or NATs restrict use of RTC communications. Network information discovery for WebRTC is based on JSEP (JavaScript Session Establishment Protocol). Please refer this page for more details on WebRTC.
Project Creation
First step is project creation on Tokbox/ Vonage Video website and login to your account. Select a custom project and create as shown above. This should give you an API Key and secret for this project. You will require this information for calling from Java application.
Please make a note of the API Key and Secret. You do not need to copy it as it is available in the project page at all times.
Service code
To keep code short, we will be using Spark Java. We add the following pom imports.
<dependencies>
<dependency>
<groupId>com.sparkjava</groupId>
<artifactId>spark-core</artifactId>
<version>2.9.1</version>
</dependency>
<dependency>
<groupId>org.slf4j</groupId>
<artifactId>slf4j-simple</artifactId>
<version>1.7.30</version>
</dependency>
<dependency>
<groupId>com.google.code.gson</groupId>
<artifactId>gson</artifactId>
<version>2.8.6</version>
</dependency>
<dependency>
<groupId>com.tokbox</groupId>
<artifactId>opentok-server-sdk</artifactId>
<version>4.3.1</version>
</dependency>
</dependencies>The library of interest above is opentok-server-sdk. This provides the functions needed to get session and token information for each subscribing clients. Before going into more details let’s understand the basic flow of messages.
Let’s say a client requests a new video chat. In this case, API creates a new session and assigns to this channel. You can consider this to be similar to rooms in chat. A new token gets created within this session and given to the user. Any new user trying to join this session will need the session created. A new token is created and assigned to this user. This establishes the communication channel. Each new call will need a different session ID to be created.
For this purpose of this project, I will be maintaining all sessions in a singleton. For our convenience, I am associating sessions to a room name. Following is the relevant servlet part,
get("/room/:name", (req, res) -> {
res.type("application/json");
final TokboxSession sess = new TokboxSession();
final SessionBean seb = sess.getSessionInfo(":name");
return seb;
}, json());This is the only servlet call we will need. It needs a Room Name to be passed from calling application. From UI perspective, jquery calls this API and get the token.
$.ajax({
type: 'GET',
dataType: "json",
accept: "application/json",
url: 'http://localhost:4567/room/' + $('#idRoom').val(),
success: function (data) {
if (data === null) {
alert('Error getting valid response from server');
} else {
$('#idKey').val(data.keyId);
$('#idSession').val(data.sessionId);
$('#idToken').val(data.tokenId);
}
},
error: function(xhr, stat, err) {
console.error(stat + " -> " + err);
}
});From Java perspective, we create an instance of OpenTok. If this is a new room, we create an instance of Session. From session, we then create a Token and send these back to the calling program.
final OpenTok ot = new OpenTok(API_CODE, API_SECRET);
::: :::
session = ot.createSession();
final String sessionId = session.getSessionId();
final String token =
ot.generateToken(sessionId,
new TokenOptions.Builder()
// 15 minutes expiry
.expireTime((System.currentTimeMillis() / 1000L) + (60*15))
.build()
);For an existing room, we get the session and create a token from it. Additionally, TokBox also allows archiving video chats, managing roles, using custom STUN/ TURN servers etc. You can get more information from API located here.
Building the UI
I needed an UI so that I can view playing videos. For this, I built a quick and dirty video UI using Bulma and jquery. We display messages including API Key, Session ID and generated token ID for reference. Get Token button gets Session and token from the server and displays on the screen. Start Video uses this information to start a video using opentok API.
Code for this project is available at https://github.com/chakrab/suturf-com.ibrave.host/tree/master/tokbox. You will need to create an account with Vonage Video to use this project.
Hope you found this useful. Ciao for now!