DEV Community

Discussion on: Video Conferencing App using React and Jitsi

Collapse
 
fifo profile image
Filipe Herculano

Hey, I can't see your attachment, but I recommend you checkout the github repo for more information and open an issue there if you still can't do what you are attempting to do

GitHub logo this-fifo / jutsu

A jitsi meet component wrapper and custom hook moulded with react's chakra 💠

<Jutsu />

A jitsi meet component wrapper and custom hook moulded with react's chakra 💠

View live demo

NPM

Install

yarn add react-jutsu

Add the Jitsi Meet API js file to the html body

<body>
  <script src='https://meet.jit.si/external_api.js'></script>
</body>

Two options

You can use the provided component for simple scenarios or the hook for access to the jitsi meet api

import { Jutsu } from 'react-jutsu' // Component
import { useJitsi } from 'react-jutsu' // Custom hook

Sample Usage (Hook)

import React, { useEffect } from 'react'
import { useJitsi } from 'react-jutsu'
const App = () => {
  const roomName = 'konoha'
  const parentNode = 'jitsi-container'
  const jitsi = useJitsi({ roomName, parentNode })
  useEffect(() => {
    if (jitsi) {
      jitsi.addEventListener('videoConferenceJoined