Integrate Jitsi Meet IFrame API in React

Jitsi is a set of open-source projects that allows you to easily build and deploy secure videoconferencing solutions.

We’ll be using IFrame API to embed Jitsi Meet functionality in React application.

A peak at final UI!

Let’s Start!

Step1 — Start Basic CRA

npx create-react-app react-jitsi-meet
cd react-jitsi-meet
npm install @mui/material @emotion/react @emotion/styled

We also installed MUI 5 for creating UI components.

Step 2 — Setup Jitsi component; Initialize Jitsi Meet API library scripts

A container element with pre-defined height and width is must for Jitsi iframe to render into.

If you have self-hosted Jitsi server in your domain, you can specify its URL endpoint instead of meet.jit.si.

Note thatinitialise function is called only once when the component is first rendered, and Jitsi’s dispose() method is called when the component is destroyed.

Also the object from instantiating JitsiMeetExternalAPI provides methods and event listeners to configure and control the Jitsi interface. For example: interfaceConfigOverwrite allows to overrides options such as APP_NAME, DEFAULT_BACKGROUND.

Step 3— Import Jisti Component in App.js

import React from “react”;
import Jitsi from “./components/jitsi”;
function App() {
  return <Jitsi uuid=”1be9b511-eb38–4a97–909b-d70ee03a9501" />;
}
export default App;

This is it.

Source Code!

all the source code is available at — https://github.com/anlisha-maharjan/react-jitsi-meet

More Info!

Have a look at Jitsi’s docs for all the options, commands, methods and events available.

The post Integrate Jitsi Meet IFrame API in React first appeared on Anlisha Maharjan.