Background

Video Conferencing Tools

Video conferencing is a live video-based meeting between two or more people in different locations using video-enabled devices. Video conferencing allows people to meet and collaborate face to face long-distance by transmitting audio, video, text, and sometimes other content in real-time through the internet. It also promotes productivity, time management, reduced travel expenses, communication skills, and better collaboration.

Video conferencing is practiced in remote communications and also with the pandemic conditions many organizations started to use video conferencing tools for day-to-day tasks.

There are both proprietary and open-source tools available for video conferencing. There is a huge competition between the conferencing tool vendors such that different tools offer different capabilities.

WebRTC

WebRTC is the most popular and widely used solution of all for implementing real-time communication applications. Developed by Google, WebRTC allows the users to do real-time communication with web applications that work on top of an open standard. It supports video, voice, and generic data to be sent between peers. This technology is available on almost every platform including all modern browsers and native clients. Various clients have their own APIs to access webRTC features.

The WebRTC project is open source and supported by Apple, Google, Microsoft, and Mozilla, amongst others.

There are many applications for WebRTC, including basic chat applications to complex video conferencing applications. Any webRTC application will have some basic features like accessing the media devices, opening peer connections, keeping connections alive, and streaming media.

Open Source Video Conferencing Tools

There are many applications that provide video conferencing and they range from paid solutions to open source solutions. Following are a few brand names that dominate the domain as paid/limited applications

  • Zoom
  • Google Hangouts
  • Skype
  • Microsoft Teams
  • GoToMeeting.

Following are some open source projects that are video conferencing solutions.

  • Jitsi Meet
  • Janus
  • Vonage
  • BigBlueButton

We will take a look into Jitsi Meet in this series.

Jitsi Meet

Jitsi is an open-source project that provides top-level video conferencing capabilities. Jitsi can also be depicted as a collection of modules that are easy to use and dependant on each other to make up a total Jitsi system.

Jitsi Modules and Architecture

Jitsi application comprises a set of modules.

  • Jitsi Meet - Javascript application created using React to provide video conferencing.
  • Jitsi Videobridge - Routes video streams amongst the conference participants.
  • Jitsi Conference Focus - Server-side component that manages media sessions and acts as a load balancer.
  • Jitsi Gateway to SIP - Server-side application that allows regular SIP clients to connect.
  • Jitsi Broadcasting Infrastructure - Set of tools that are there for recording and streaming.
  • Prosody - External application used for signaling.
jitsi-architecture

This is an architectural diagram from the Jitsi developers’ website to understand how a set of modules work together to create the system.

lib-jitsi-meet Interface

The lib-jitsi-meet interface is a frontend API to create Jitsi Meet conferences with a custom GUI. Using this we can replicate all the features of the Jitsi Meet application.

Repository for lib-jitsi-meet: https://github.com/jitsi/lib-jitsi-meet

This is an npm project that can be easily started. If we focus on the Jitsi architecture this project is just the component named ‘jitsi meet’. In this series, we are going to extend the API library for a fully-featured conferencing application. Jitsi developers have already done this but we will create a frontend application that will be more optimized for performance.

Jitsi Meet application: https://meet.jit.si/

lib-jitsi-meet with React

An example application of the lib-jitsi-meet is included in the repository https://github.com/jitsi/lib-jitsi-meet/tree/master/doc/example. This is a simple javascript application. But in this series, we will create a React application with lib-jitsi-meet features.

Project Structure

First, we’ll create the project structure. Note the example lib-jitsi-meet project. There we have two main components.

index.html - This is the initiation point for the application.
index.js - This initiates the Jitsi connection.

We will map these into the correct places in the React application.

Index.html has to contain the container <div> for the React application.

<!DOCTYPE  html>
<html  lang="en">
	<head>
		<meta  charset="utf-8"  />
		<link  rel="icon"  href="%PUBLIC_URL%/favicon.ico"  />
		<meta  name="viewport"  content="width=device-width, initial-scale=1"  />
		<meta  name="theme-color"  content="#000000"  />
		<meta  name="description"  content="Web site created using create-react-app"  />
		
        <link  rel="apple-touch-icon"  href="%PUBLIC_URL%/logo192.png"  />
		<link  href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"  rel="stylesheet" />
		<link  rel="manifest"  href="%PUBLIC_URL%/manifest.json"  />
		
        <script  src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
		<script  src="https://meet.jit.si/libs/lib-jitsi-meet.min.js"></script>
		<link  rel="manifest"  id="manifest-placeholder">

		<title>React App</title>

	</head>

	<body>
		<noscript>You need to enable JavaScript to run this app.</noscript>
		<div  id="react-root"></div>
	</body>

</html>

At the start of the React application, we initiate the connection with the conference.

import  React  from  'react';
import  ReactDOM  from  'react-dom';
import  App  from  './App';
import { store } from  './store/Store';
import { Provider } from  'react-redux';
import { initConference } from  './services/ConferenceService';

initConference(() => {
    //load the react application after the local tracks have been loaded
    ReactDOM.render(
	    <React.StrictMode>
		    <Provider store={store}>
			    <App />
		    </Provider>
	    </React.StrictMode>, document.getElementById('react-root')
	);
});

initConference will have the code related to the initialization of the conference. (Eventually the code in the index.js file from the example.)

Creating the Connection

Creating the connection is done at the initConference function. The React application is started after the connection with the conference. We can initiate the React application after having the remote tracks.

JitsiMeetJS.createLocalTracks({ devices: ['audio', 'video']}).then((tracks) => {
    onLocalTracks(tracks);
    reactDomRenderCallback();
}).catch(error  => {
    throw  error;
});

Listeners

lib-jitsi-meet API has a lot of listeners to get the state changes from the conference components. To view, a full list of conference components and the listeners refer to the official documentation.

https://jitsi.github.io/handbook/docs/dev-guide/dev-guide-ljm-api

This is a two-part article series to show how we can implement a fully
featured conferencing application. Let's meet up in the next part to
understand how to make use of the other features of lib-jitsi-meet.

We are a development company specialized in Real-Time Communication. If you need a custom video application to be build please contact us via support@telzee.io