Jitsi is a set of open-source projects that allows you to easily build and deploy secure videoconferencing solutions.
To embed Jitsi Meet into your application you have to add the Jitsi Meet API library:
<script src='https://meet.jit.si/external_api.js'></script>
You can place the script just before the closing of the body tag.
<body>
<div id="root"></div>
<script src='https://meet.jit.si/external_api.js'></script>
</body>
Lets make a React component for loading Jitsi Meet in it.
import React, { useState, useEffect } from 'react';
import ProgressComponent from '@material-ui/core/CircularProgress';
function JitsiMeetComponent() {
const [loading, setLoading] = useState(true);
const containerStyle = {
width: '800px',
height: '400px',
};
const jitsiContainerStyle = {
display: (loading ? 'none' : 'block'),
width: '100%',
height: '100%',
}
function startConference() {
try {
const domain = 'meet.jit.si';
const options = {
roomName: 'roomName',
height: 400,
parentNode: document.getElementById('jitsi-container'),
interfaceConfigOverwrite: {
filmStripOnly: false,
SHOW_JITSI_WATERMARK: false,
},
configOverwrite: {
disableSimulcast: false,
},
};
const api = new JitsiMeetExternalAPI(domain, options);
api.addEventListener('videoConferenceJoined', () => {
console.log('Local User Joined');
setLoading(false);
api.executeCommand('displayName', 'MyName');
});
} catch (error) {
console.error('Failed to load Jitsi API', error);
}
}
useEffect(() => {
// verify the JitsiMeetExternalAPI constructor is added to the global..
if (window.JitsiMeetExternalAPI) startConference();
else alert('Jitsi Meet API script not loaded');
}, []);
return (
<div
style={containerStyle}
>
{loading && <ProgressComponent />}
<div
id="jitsi-container"
style={jitsiContainerStyle}
/>
</div>
);
}
export default JitsiMeetComponent;
If you don’t set the parentNode property value, the Jitsi iFrame element will append as a child component of the document’s body tag.
Then place the component, where you want to render the conference. Since this is a functional component, the component uses useEffect hook for initializing the Jitsi Meet. If you are building class-based component, place initializing code inside the componentDidMount lifecycle method. Otherwise, the multiple conferences will render on the view when every time re-renders the component.
Leave a Comment