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.

 <div id="root"></div>
 <script src='https://meet.jit.si/external_api.js'></script>

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,
    configOverwrite: {
     disableSimulcast: false,

   const api = new JitsiMeetExternalAPI(domain, options);
   api.addEventListener('videoConferenceJoined', () => {
    console.log('Local User Joined');
    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 (
   {loading && <ProgressComponent />}

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


Leave a Comment