loading...

Video Conferencing App using React and Jitsi

fifo profile image Filipe Herculano Updated on ・2 min read

I have been reading a bit about WebRTC and how those video conferencing apps work given the situation we're all in due COVID-19

One project that caught my attention recently was jitsi

They're open source and quite nice to work with, in their api docs they go over how to embed jitsi in your application

I decided to use that in a React project I am currently working on and made that into a shared component since I didn't find anything out there

You can see a live demo using the public jitsi domain here

Note: this is intended to be used on the desktop browser for now, to join a Jitsi room on mobile you will need their app, although checkout this PR for more information

How to use it

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>

Sample Usage

import React, { useState } from 'react'

import Jutsu from 'react-jutsu'

const App = () => {
  const [room, setRoom] = useState('')
  const [name, setName] = useState('')
  const [call, setCall] = useState(false)

  const handleClick = event => {
    event.preventDefault()
    if (room && name) setCall(true)
  }

  return call ? (
    <Jutsu
      roomName={room}
      userName={name}
      loadingComponent={<p>loading ...</p>} />
  ) : (
    <form>
      <input id='room' type='text' placeholder='Room' value={room} onChange={(e) => setRoom(e.target.value)} />
      <input id='name' type='text' placeholder='Name' value={name} onChange={(e) => setName(e.target.value)} />
      <button onClick={handleClick} type='submit'>
        Start / Join
      </button>
    </form>
  )
}

export default App

Supported Configuration

Check the Jitsi Meet API docs for more

Room Name

The meeting room name

This prop is required for jitsi to load

User Name

The participant's name

This prop is required for jitsi to load

Domain

<Jutsu domain='my-custom-domain.com'>

Your Jitsi domain to use, the default value is meet.jit.si

Loading Component

<Jutsu loadingComponent={<ProgressBar />}>

An optional loading component, the default value is <p>Loading ...</p>

Styles

<div
  style={{...containerStyle, ...containerStyles}}
>
  <div
    style={{...jitsiContainerStyle, ...jitsiContainerStyles}}
  />
</div>

Internally Jutsu is constructed inside 2 containers, you can add custom styles for each by specifying containerStyles and jitsiContainerstyles

The default values are

const containerStyle = {
  width: '800px',
  height: '400px'
}

const jitsiContainerStyle = {
  display: loading ? 'none' : 'block', // <- used for loadingComponent logic
  width: '100%',
  height: '100%'
}

An example override could be

<Jutsu containerStyles={{ width: '1200px', height: '800px' }}>

Feel free to grab it out for your next project or help me modify it to suit your needs, the code is open source and you can find it on github

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
…

Posted on by:

fifo profile

Filipe Herculano

@fifo

Hi. I like web dev, music, rock climbing and gymnastics. πŸ‘‹

Discussion

markdown guide
 

How to add options here .
Not working while adding like =>
Please see attachment image

 

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
…
 

Hi! Nice article! Just one point, is it right "yarn add react-jutsu"? Or it'd be react-jitsi?

Thanks for the great post! :)

 

Hey, it is indeed react-jutsu, it was supposed to be some wordplay joke but not many people get it and it was terrible too πŸ˜‚

Here's the npm package npmjs.com/package/react-jutsu