DEV Community

Filipe Herculano
Filipe Herculano

Posted on • Updated on

Video Conferencing App using React and Jitsi

#react #webrtc #video #call

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
Enter fullscreen mode Exit fullscreen mode

Add the Jitsi Meet API js file to the html body 

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

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
Enter fullscreen mode Exit fullscreen mode

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'>
Enter fullscreen mode Exit fullscreen mode

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

Loading Component 

<Jutsu loadingComponent={<ProgressBar />}>
Enter fullscreen mode Exit fullscreen mode

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

Styles 

<div
  style={{...containerStyle, ...containerStyles}}
>
  <div
    style={{...jitsiContainerStyle, ...jitsiContainerStyles}}
  />
</div>
Enter fullscreen mode Exit fullscreen mode

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%'
}
Enter fullscreen mode Exit fullscreen mode

An example override could be

<Jutsu containerStyles={{ width: '1200px', height: '800px' }}>
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Add the Jitsi Meet API js file to the html body

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

You can choose to load the script another way, the hook will return an error until the jitsi API is available in window scope.

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
Enter fullscreen mode Exit fullscreen mode

Sample Usage (Hook)

import React, { useEffect } from 'react'
import { useJitsi } from 'react-jutsu'
const App = () => {
  const jitsiConfig = {
    roomName: 'konoha',
    displayName: 'Naruto Uzumaki',
    password:
…
Enter fullscreen mode Exit fullscreen mode
View on GitHub

Top comments (5)

Collapse
 
ramprits profile image
Ramprit Sahani • • Edited

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

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
…
View on GitHub
Collapse
 
victorjordan95 profile image
Victor Jordan •

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

Thanks for the great post! :)

Collapse
 
fifo profile image
Filipe Herculano •

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

Some comments may only be visible to logged-in visitors. Sign in to view all comments.

Read next

ramadhan002 profile image

Cara Penggunaan Axios di ReactJS - GET dan POST Request

ramadhan.dev -

abdulnasirolcan profile image

React Native 0.76: The New Architecture That Takes Performance and Efficiency to the Next Level πŸš€

AbdulnasΔ±r Olcan -

bhargavditani profile image

Understanding State Variables in React: Why and How

Bhargav Ditani -

designly profile image

How to Create a Scroll Progress Bar in Next.js/React

Jay @ Designly -