Host Your own Video Conferencing with Custom GUI using Jitsi

Jitsi is an open-source video conferencing software that you can host yourself. It provides high quality, scalable video conferences, and has great community support. It contains a lot of functionalities including screen share, chat, mail invites, video streaming of high quality. But personally, the best feature which distinguishes jitsi from other video conferencing solutions is privacy and confidentiality.

For people who are in a hurry,you can directly integrate jitsi meet in your application, by using jitsi external api.

  1. First, you need to include the below script in your code:
<script src='https://meet.jit.si/external_api.js'></script>

<script>
	$(document).ready(function(){
  	const domain = 'meet.jit.si';
const options = {
    roomName: 'Example',
    width: 700,
    height: 700,
    parentNode: document.querySelector('#meet')
};
const api = new JitsiMeetExternalAPI(domain, options);
});
</script>
  1. These scripts will target the tag with  id=”meet” in your code, which will be the landing point of your conference room with the name ‘Example’ as mentioned above.

  1. As you can see below, it is the most effortless way of opening a video conference in your web application.

For GUI and functionality changes. There is a little more work.

Prerequisites
  • You need a ubuntu/Debian OS to build and integrate your own custom changes to jitsi
  • Node.js >= 12 and npm >= 6.
  • Knowledge of React.js
Procedure

Since it’s an open-source project, you can tweak the source code according to your own needs.
For this demo, I will show you how to modify the Landing page. But you can do much more with this.

git clone https://github.com/jitsi/jitsi-meet
npm install
make dev

This will launch the jitsi-meet default application:

You can modify the code according to your own need, for instance I have modified the WelcomePage so that a unique room Id is created for each conference and not any random text.

For that, I have mapped UUID for each room in WelcomePage.Web.js

_setRoomId() {
    return ([1e7]+-1e3+-4e3+-8e3+-1e11).replace(/[018]/g, c => (c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> c / 4).toString(16) ); 
  }

  _startNewMeeting(event){
    const roomId=this._setRoomId();
    this.setState({room:roomId},()=>{
      this._onFormSubmit(event);
    })
  }
         <div id="enter_room">
            <div
              className="welcome-page-button"
              id="enter_room_button"
              onClick={this._startNewMeeting}
            >
              {showResponsiveText
                ? "Start a new meeting"
                : ""}
            </div>
          </div>

You can make a lot of other changes as well.

For instance, you can create your google chrome extension through which you can connect your google calendar, can schedule meeting directly without creating the room beforehand or password protect a room dynamically.

Use the below commands to build and deploy

Build Command

make compile

It will create the build folder.

Deploy command

make deploy

It will move the build code to libs and CSS folders

It is a dev instance and it points to jitsi example installation so by default it needs access to the jitsi servers and it runs only on localhost:8080

To host it on your own domain :

1. Modify the webpack.config.js, by adding the host and port of your own domain.

For example:

const config = {
    devServer: {
        https: true,
        inline: true,
        host: 'www.your-own-domain.com',
        port: 123,
        proxy: {
            '/': {
                bypass: devServerProxyBypass,
                secure: false,
                target: devServerProxyTarget,
                headers: {
                    'Host': new URL(devServerProxyTarget).host
                }
            }
        }
    }

Now your code is pointing to your server. Make sure that you have a valid SSL certificate or the browser will mark your domain as unsafe.

In part 2 I will cover, scheduling a meeting, dynamic password generation, modifying mail invite send through Gmail. 

Follow us on LinkedIn to get updates on the new articles

 500 total views,  2 views today

How did you like the article?
+1
0
+1
0
+1
0
+1
0
+1
0
+1
0
+1
0