Making Videoconferences with React and Jitsi!

Recently, in our "Product discovery" week, a new functionality raises up: Implement videoconferences inside our webapp. After some research we ended up choosing Jitsi as our tool.

The reason behind this decision were pretty solid:

• It's open source
• Has support for web and mobile.
• Has plugins for frameworks like React, Angular, even Flutter.

So, before all, we needed to make a small PoC to learn about the tool and how we can implement it inside a real world application. If you need more info about Jitsi for web, please check it's repository.

The first thing we need to do is get Jitsi. Currently, there is no an official NPM package available, so, we need to use a script tag as old days. For performance reasons, we don't put the tag inside the HTML, instead, we put it inside the React component.

So, let's hands on it.

First, create a jitsi instance variable state.

Then, we need to add the script when the component mounts.

The loadScript function inserts the script in the body and returns a promise that will be solved after the script loads.

Once jitsi script loaded, we need to instanciate the JitsiMeetExternalAPI class with the following parameters:

• host: url where the videoconference call is hosted.
• params: all the params available here.

For example, we gonna use roomName and displayName. The first one is the name of the room we want to join and the second the user's mame. Note that both values will be received as props.

The parentNode option tell us which element will be used to insert the Jitsi iframe. So, we provided the div we are returning also.

The last step is save the JitsiMeetExternalAPI instance inside jitsi variable state and a method to destroy it once the component is unmounted.

Then you just need to call the component passing the room and your name to join to a videoconference:

<JitsiMeet roomName="MyRoonName" displayName="Gus" />

And tha'ts all! Pretty simple, right? There is a demo below to check out this code working. You need to create a meet using https://meet.jit.si and connecting using the component 😜