Custom video layout across all users

Hi everyone !

With the lockdown, I want to develop new ways of doing interactive dance performances that everyone can watch from their own homes. I want to perform a show from my home, and the audience would be present through a jitsi call and also share their video with everyone. The audience members will do actions that everyone else will see, thus making the “stage design” of the show. For this to work, I would need a specific layout for all video call participants, where I know in advance where each participant is and where the same custom layout appears on each participant’s screen.

I would like to use a gallery layout as drawn in the attached image. The performer would take a larger space in the middle of the layout, and each audience member would have a space around the performer. The specificity is that I need to assign a position to each audience member before the video conference / performance starts. When each audience member registers for the performance, I send them a meeting link that will assign them a specific number. So I would know that Mr X will appear in the audience slot number 4, and Ms Y in slot number 12, etc. The layout needs to appear in this ordered way for myself and for all the meeting participants.

Do you think that I could use lib-jitsi-meet for that ? Are there enough options already implemented inside to make a custom UI or would I need other tools ?

Thanks in advance !

Lucile

9 Likes

Yes you can, this is what jitsi-meet uses.

1 Like

Hi Damian,
when you say “you can” does it mean we need to code this layout (changing the current layout) on server side or there are some parameters that we can change.
I will appreciate your guidance since we also need a custom layout, but not sure if we are trying to reinvent the wheel :slight_smile:

Regards.

Well, using the lib is starting from scratch and you can look in jitsi-meet as an example.

Thanks Damian, I guessed so, we already started working on it :slight_smile:

For me it would even be sufficiant when each person in a video call has the same gallery position across all screens.

We do our Dailys with Jitsi and normally we would go around as we stand. So the way how we “stand” should be the same for all.

Is that an expensive feature?

See also Assigned Video positions in gallery

Hi,

I just want say that this is indeed possible to implement such features in a custom jitsi meet instance.

I did something similar in my own instance, trying to implement a ‘Fishbowl’ mecanism.
You can have a peek on https://jitsi.retrolution.co/FrontDiscsRideAnnually?tableViewEnabled=true

I am using custom participant attributes to share location with all users.

Here what it looks like

3 Likes

Hi Damian,

I’m attempting a similar layout change also. I’ve located the lib-jitsi-meet file under /user/share/jitsi-meet/libs

When you refer to the jitsi-meet as an example, which file(s) are you referencing?

I’ve made small changes through the interface_config.js and -config.js files, but nothing that impacts layout.

Thanks.

Hi Jrobot,

I guess what Damian mean was that https://github.com/jitsi/jitsi-meet , which is the code deployed on meet.jit.si is one implementation of a web interface on top to lib-jitsi-meet.

The doc to follow to create your own would be https://github.com/jitsi/lib-jitsi-meet/blob/master/doc/API.md#installation.

Otherwise, as already mentioned in another discussion,
I have created a minimalist sample that can be used to develop your own interface.
Code :https://github.com/maxired/jitsi-standup/
Demo : https://maxired.github.io/jitsi-standup/

1 Like

Hi maxired,

Thanks, that’s what I was looking for :grinning:

Hi maxired,

I just visited your site and I’m very impressed. As a new developer to react I was wondering do you provide any tutorials or any support on how to implement these features for our own jitsi instance? For example like sending a file to the chat? Congrats on a great site and appreciate the help if you can!

Hi Ky123,

Unfortunatly, I did not took the time to extract such features.
I really hope Jitsi Meet will come with a plugins architecture so it’s easy share this kind of extensions.

What I did in instead of sending plain text as chat message, send JSON object.
Each message as a type (‘TEXT’, ‘IMAGE’…) and a payload.
And then in the chat I use differents components depending of the message type.
For sending file, ideally you could use webrtc. For now, I simply use the chat mecanisme, and send the file encoded in base64.
This is not a good idea to send big file with it :wink:

2 Likes

Hi maxired,

Thanks for your info! This seems so easy to do but I am still lost as I really am a beginner with jitsi :sweat_smile: but I will try and take a dive into it!

Actually though I have this requirement from my manager to implement a feature where the moderator of the meeting can disable all the audio and video of participants in a meeting and can enable their audio and video back again when he/she wants to and like wise for enabling/disabling the chat.

I’m wondering from your opinion is this easy to implement and if so could you possibly provide a tutorial for me on how to do this like for example show me which files to change etc.? I’d be willing to pay a fee if this is possible as I’m so interested in this application but i’m not sure on where to start with development as I’m still a student so I still don’t have much knowledge. Thanks again for your quick response! :slightly_smiling_face:

You probably don’t want do that for privacy reasons.
You will find on that forum some posts related to that type of features.

Regarding paid consultancy, I will be happy to discuss privately

This is a terrific idea.

1 Like

Hi maxired,

sorry for the confusion I meant like the moderator having the ability to allow guests to talk or not. It’s similar to your concept on your site if that makes sense?

also do you have an email I could contact perhaps? Thanks!

Hi Maxired. This looks very interesting.

all I need to know is that how are you muting the participants who are outside the circle and not seated in the chair.

which API to call/configure to make that happen.

Thanks in advance if you can give some pointers for it.

hey Anshuman,

sorry for the late reply.
Probably that would help Assigned Video positions in gallery

Great Work!! Thank you for sharing with everyone.

Hey @maxired i saw your work on the fishbowl. Great work. Thank you very much for sharing that with us.
I am new to Jitsi and i’ve configured it on DigOcean server. Everthing working fine. I want to change layout of my app. I see everyone suggesting to use lib-jitsi-meet, but m not quite sure how to begin with it.
Do i need to configure anything on the jitsi-server for this ? I have enabled module in prosody module mod_presence_identity and VirtualHost "jitmeet.example.com" have added modules_enabled = { "presence_identity" }
And on the client side how do i start with it. I couldn’t find any documentations that very clear for a beginer like me and there’s no step-by-step guide.
I’d very helpful if you could just point me to a direction.
Thanks & Kind Regards
Puneet