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