DEV Community

Cover image for Completely Free Meeting Api --> step by step implemetation
Rizmy Abdulla 🎖️
Rizmy Abdulla 🎖️

Posted on

Completely Free Meeting Api --> step by step implemetation

If you're looking for a completely free meeting API for your web application, Jitsi Meet is an excellent option. This open-source platform allows you to easily add video conferencing capabilities to your web app with just a few lines of code. Here's a step-by-step guide on how to implement Jitsi Meet in your web application.

Step 1: Create a Jitsi Meet instance

The first step is to create a Jitsi Meet instance, which is essentially a virtual room where users can join and participate in a video conference. You can do this by visiting the Jitsi Meet website and selecting "Create a new conference." Once you've created your instance, you'll be given a unique URL that you can use to access the virtual room.

Step 2: Embed the Jitsi Meet API

Next, you'll need to embed the Jitsi Meet API in your web application. To do this, you'll need to include the Jitsi Meet JavaScript library in your HTML file. You can do this by adding the following code to the head of your HTML file:

<script src='https://meet.jit.si/external_api.js'></script>
Enter fullscreen mode Exit fullscreen mode

Step 3: Create a container for the Jitsi Meet video

Once the Jitsi Meet API is embedded in your web application, you'll need to create a container where the video will be displayed. This can be done by adding a div element with an id to your HTML file. For example:

<div id='jitsi-container'></div>
Enter fullscreen mode Exit fullscreen mode

Step 4: Initialize the Jitsi Meet API

Now that you have a container for the Jitsi Meet video, you can initialize the API by adding the following JavaScript code to your application:

var domain = 'meet.jit.si';
var options = {
roomName: 'Your-Unique-Room-Name',
width: '100%',
height: '100%',
parentNode: document.querySelector('#jitsi-container')
};
var api = new JitsiMeetExternalAPI(domain, options);
Enter fullscreen mode Exit fullscreen mode

Step 5: Customize the Jitsi Meet instance

Finally, you can customize the Jitsi Meet instance by adding additional options to the options object. For example, you can enable or disable certain features such as microphone or camera, change the layout of the video conference, and more.

That's it! With just a few lines of code, you've successfully implemented Jitsi Meet in your web application. Your users can now join a video conference by visiting the unique URL that you created in step 1. And you didn't pay a dime for it!

Thanks!!

Top comments (0)