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.

Enabling Controls
Now Jitsi is integrated in to your application

Updated:

Leave a Comment