DEV Community

loading...
Cover image for Embed FREE video conferencing into your React app in minutes

Embed FREE video conferencing into your React app in minutes

Justin Ramel
・2 min read

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('/');
      });
    }}
    ...
  />

Discussion (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 Author

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