Setup Jitsi component; Initialize Jitsi Meet API library scripts that embeds Jitsi Meet IFrame API functionality in React.

jitsi.js

import React from "react";
import * as Mui from "@mui/material";

const Jitsi = ({ uuid }) => {
  const containerId = "react-jitsi-meet-container";
  const [jitsiObj, setJitsiObj] = React.useState({});

  const loadScript = () => {
    let resolveloadScriptPromise = null;

    const loadScriptPromise = new Promise((resolve) => {
      resolveloadScriptPromise = resolve;
    });

    const script = document.createElement("script");
    script.src = "https://meet.jit.si/external_api.js";
    script.async = true;
    script.onload = resolveloadScriptPromise;
    document.body.appendChild(script);

    return loadScriptPromise;
  };

  const initialise = async () => {
    if (!window.JitsiMeetExternalAPI) {
      await loadScript();
    }

    const _jitsi = new window.JitsiMeetExternalAPI("meet.jit.si", {
      roomName: uuid,
      userInfo: {
        email: "kidin88118@alfaceti.com",
        displayName: "John",
      },
      parentNode: document.getElementById(containerId),
      interfaceConfigOverwrite: {
        APP_NAME: "ReactJitsiMeet",
        AUDIO_LEVEL_PRIMARY_COLOR: "rgba(91,202,221,0.4)",
        AUDIO_LEVEL_SECONDARY_COLOR: "rgba(91,202,221,0.2)",
        DEFAULT_BACKGROUND: "#004e70",
        DISPLAY_WELCOME_PAGE_CONTENT: false,
        MOBILE_APP_PROMO: false,
        PROVIDER_NAME: "ReactJitsiMeet",
      },
    });

    _jitsi.addEventListener("videoConferenceLeft", (info) => {
      _jitsi.dispose();
    });

    setJitsiObj(_jitsi);
  };

  React.useEffect(() => {
    initialise();
    return () => jitsiObj?.dispose?.();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  return (
    <main className={"jitsi-room"}>
      <Mui.AppBar className="jitsi-room__head" position="static" elevation={0}>
        <Mui.Toolbar>
          <Mui.Typography className="jitsi-room__head__title">
            React Jitsi Meet
          </Mui.Typography>
        </Mui.Toolbar>
      </Mui.AppBar>
      <Mui.Box
        width="100%"
        height="100%"
        display="flex"
        flexDirection="column"
        justifyContent="center"
        alignItems="center"
        flex="1"
      >
        <div id={containerId} className={`confrence`}></div>
      </Mui.Box>
    </main>
  );
};
export default Jitsi;