DEV Community

Cover image for Embed FREE video conferencing into your React app in minutes
Justin Ramel
Justin Ramel

Posted on

Embed FREE video conferencing into your React app in minutes

Impossible you say? That's what I thought until I found Jitsi...

What is Jitsi?

Jitsi Meet

More secure, more flexible, and completely free video conferencing.

Is it really possible to get a video conference up and running in minutes? Lets find out...

Dev notes

React Component

There is an (unofficial) React component that wraps the standard Jitsi Meet JS API, we'll use it to speed up the React integration process.

Install

yarn add react-jitsi

Add Jitsi to your index.html in my case public\index.html

<body>
...
  <script src='https://meet.jit.si/external_api.js'></script>
...
</body>

Create a basic meeting window

import React, { useState } from 'react';
import Jitsi from 'react-jitsi';

const roomName = 'my-super-secret-meeting-1234567-e89b-12d3-a456-426655440000';
const userFullName = 'Justin';

export const App = () => (
    <>
        <h2>My First Meeting!</h2>
        <Jitsi roomName={roomName} displayName={userFullName}/>
    </>
)

Run you app and you should have a running video conference πŸ˜€

Conclusion

We got quite a bit done in a few minutes πŸ˜€

If you're looking for an embeddable video conference solution, I say give Jitsi a shot!

  • Easy to setup
  • Easy to integrate with React
  • Open source
  • Free servers all for the cost of the Jitsi logo!

What's not to like?

BONUS End meeting

You may want to run some code when the user clicks End Meeting. You can do that by subscribing to the 'videoConferenceLeft' event.

Here I'm redirecting the user to the root of my site:

  <Jitsi
    ...
    onAPILoad={(api: any) => {
      api.addEventListener('videoConferenceLeft', () => {
        navigate('/');
      });
    }}
    ...
  />

Top comments (6)

Collapse
 
videomeet profile image
VideoMeet - HD Audio Video Conference

Very Nice Post. Here are the best free group video call apps to talk with friends or business colleagues,online teaching without paying a cent!

Collapse
 
fiaz_com profile image
fiaz ahmed

HI it does not render the jitsi component rather the" loading meeting..." remains all the time and does not finish. however the network tab shows success but nothing happen.

Collapse
 
rotimibest profile image
Ibitoye Rotimi Best

Thanks for this article. I only wish they had more docs, it's such a great tool

Collapse
 
dorklord23 profile image
Tri R.A. Wibowo

I can't make videoConferenceLeft to work even though I've use addEventListener, addListener, and on function. Do you experience the same thing?

Collapse
 
dance2die profile image
Sung M. Kim

Nice post, Justin~.

I honestly haven't heart of Jitsi until recently as an alternative to zoom :)

Looks easy to use

Collapse
 
justinramel profile image
Justin Ramel

Thanks Sung Kim! I hadn't heard of Jitsi either until very recently, it's been a great find :)