Overview of the Project and Redux

The overall system is a conferencing system for the telemedicine domain, based on Jitsi video conferencing library. Integrating the Jitsi meet in an iframe element gets the job done but there are some pros and cons into that.

Pros Cons
There is little to handle after integrating inside an iframe. Changing the UI requires a lot of work.
Connection and the listeners are handled by the Jitsi meet. Disconnections are handled separately inside the embedded meeting.
We can reuse the UI features provided by the library creators. Unwanted features can be included.
Feature size cannot be minimal.

We can avoid most of the downsides using the lib-jitsi-meet javascript library since we are developing on our own.

This is an article which tries to give you an overview of the project.

Main Application Components

We recognise some main application components at this project such as the user interface, authentication service, jitsi conference service, redux storage, etc. These are separated across several projects and run separately.

Interacting with the Jitsi Conference

Connection and Listeners

We discussed how to initiate a connection with Jitsi in the previous article. This Jitsi connection is the initial step of going for a conference. After establishing a connection the connection reference is stored at the window scope for accessibility.

As the documentation (https://jitsi.github.io/handbook/docs/dev-guide/dev-guide-ljm-api#jitsiconference) indicates, there are different types of object attributes and various functions exposed to manipulate the conference. Also there are numerous listener functions to identify changes done in the conference. After establishing the Jitsi connection, listeners can be used to manipulate the user’s side of the application.

Using Array.map() vs ReactDOM.render()

Consider the example where a user joins the conference. The list of participants’ video streams are shown either in a tile view or a speaker view. The list of participants may change on a participant join, participant leave, pin participant or a participant speaking event.

Array.map()

The participants list can be implemented with an Array.map() using a simple logic.

Components will be rendered as the array of participants change for various reasons. One downside is that this will re-render all the participants’ components for one change. For a large group of participants this is not effective.

ReactDOM.render()

This method is based on writing a new component into the DOM when necessary. When a participant joins we can write a new participant component into the DOM and when leaving we can remove the participant from the DOM. This avoids modifying unwanted elements like in the previous method.

We have to highly depend on the element id structure here in this approach because we have to write components into target containers. Jquery can be used as a DOM manipulation library. Also react provides ReactDOM.render() function to directly assign a react component to an existing component.

In the scenario, the USER_JOINED listener will be called.

room.on(JitsiMeetJS.events.conference.USER_JOINED, (id, user) => {
    const  displayName = user.getDisplayName();
    
    if (!$(`videoContainer-${id}`)[0]) {
	    $('.filmstrip-in-speaker-view').append(`<div id='videoContainer-${id}'></div>`);
	    
	    ReactDOM.render(
		    <React.StrictMode>
			    <Provider  store={store}>
				    <Thumbnail  portrait={false}  idSuffix={id}  id={'videoThumbnail-' + id}  displayName={displayName}  />
			    </Provider>
		    </React.StrictMode>, document.getElementById(`videoContainer-${id}`)
	    );
    }
    
    //update redux store
});

Redux architecture

Keeping the most important attributes in the redux storage in slices is helpful. Slices are sections of the redux state which accept a name, an initial state, a set of reducer functions and generate a set of action functions.

It is better if we can separate slices based on the main components of the application such as the authentication, UI, chat, participants, etc.

Git Management

For better project management, it is better to maintain multiple projects with regards to the simplicity. Here we have used a separate project for UI updates and set it as upstream. We have kept the idea of having a pluggable conferencing library while maintaining the same UI features. The main project will be the origin project and the UI project will be the upstream project.