jutsu

Filipe Herculano, March 27, 2020

random image from unsplash

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 here