Impossible you say? That's what I thought until I found Jitsi...
What is Jitsi?
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)
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!
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.
Thanks for this article. I only wish they had more docs, it's such a great tool
I can't make videoConferenceLeft to work even though I've use addEventListener, addListener, and on function. Do you experience the same thing?
Nice post, Justin~.
I honestly haven't heart of Jitsi until recently as an alternative to zoom :)
Looks easy to use
Thanks Sung Kim! I hadn't heard of Jitsi either until very recently, it's been a great find :)