iFrame API - webinar solution - more then one moderator visible, while participants deactivated

Hello there,
i created a webinar room via iframe api. Do you know if it´s possible to make more then one moderator visible for participants? The problem is that, if i log in with another user, all the participants are visible. With one moderator it does work fine.I deactivated everything for visitors except the chat.
Would be great, if someone knows a solution.
Best regards,
Alvaro

Would you mind sharing how you accomplished the Webinar via iframe API? I have done something similar and solved the visible issue by using the hiddenDomain parameter as the guest domain in prosody. Everyone that joins without being authenticated is hidden from everyone but the moderator.

1 Like

brilliant :+1:

Thank you! Now I am trying to figure out if there is a way to start meetings with the A/V moderation enabled so if someone wanted to ask a question the Webinar Presenter could allow them to unmute. For now just removing the buttons and startSilent works.

Create an index.html. Paste the code in and change everyting to your needs. Upload to server.

Here´s the code:

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>Webinar</title>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="https://your-jitsi-installation-domain/external_api.js"></script>

<script>

$(document).ready(function() {

 var domain = "your-jitsi-installation-domain";

var options = {

    roomName: "roomname",
    parentNode: document.querySelector("#Jitsimeet"),
	configOverwrite: {startWithAudioMuted: true, startWithVideoMuted: true, enableNoAudioDetection: false, requireDisplayName: false, enableWelcomePage: false},
	resolution: 1080, constraints: {video: {height: {ideal: 1080,max: 1080,min: 1080}}},
    interfaceConfigOverwrite: {TOOLBAR_BUTTONS: ['chat'], DISABLE_JOIN_LEAVE_NOTIFICATIONS: true, HIDE_INVITE_MORE_HEADER: true, FILM_STRIP_MAX_HEIGHT: 0, VIDEO_QUALITY_LABEL_DISABLED: true, RECENT_LIST_ENABLED: false, prejoinPageEnabled: false}   
}

var api = new JitsiMeetExternalAPI(domain, options);

});

</script>

	<style>
		body {
 font-family: Arial, Helvetica, sans-serif;
 font-size: 14px;
}

		.vk-head {
			background: #000;
			color: #fff;
			padding: 10px 0;
			margin: 0px;
		}

		

		.vk-link, .vk-link a {
			background: red;
			text-align: center;
			color: #fff;
			font-weight: bold;
			margin: 0;
			padding: 12px;
			cursor: pointer;
			text-decoration: none;
			text-transform: uppercase;
		}

		

	#wrapper{  
    width: 100%;   
    padding-top: 56.25%;    
    position: relative;  
}  
    #Jitsimeet{  
    position: absolute;   
    top: 0;    
    left: 0;   
    bottom: 0;   
    right: 0;
	text-align: center;
	vertical-align: center;
}
	.footer-nav {
	background: #000;
	color: #fff;
	padding: 20px 0;
	margin: 0;
	text-align: center;
	text-transform: uppercase;
	font-size: 12px!important;
}
	.footer-nav a {
	color: #fff!important;
	text-decoration: none!important;
}
	</style>

</head>



<body>

	<div class="vk-head"><h1 style="text-align: center;">Your Site</h1>

	</div>
	
<div id="wrapper"> 

<div id="Jitsimeet"></div>

</div>

<div class="vk-link">

	<a href="https://yourlink.com">Leave Webinar</a>

</div>
	
<div class="footer-nav">
<a href="https://your-link.com">Imprint</a> | <a href="https://your-link.com">Privacy</a>	
	
</div>

</body>

</html>

Does your prosody solution provide a second moderator? If yes, that would be the solution for me. Could you show how you did it exactly?

Considering the moderator is in jicofo, you can customize it

I use it very often with Iframe API & self installation but you need to control everything from your application.

  • Let your moderators join from say https://yourjutsidomain/moderator
    -Let attendees join from say https://yourjutsidomain/
  • Disable camera & Mic of participants so they can not start
  • Create custom css which will be applied to participants & not to moderator ( and with this hide tiles or all participants, including moderators whoese camera are off). This can be achieved using referral
    This way participants will only see moderators as they only can start camera.
1 Like

Hello kkd,

that sounds good.
What i dont understand how you let only moderators be visible. In my index.html i´m able to add custom css and exclude buttons, camera and mic. But when i follow your steps (moderators come from main installation, participants from index.html) and two moderators are active, all the participants are visible too. There must be something crucial i´m doing wrong. Could you give me an advice? What code exactly do you use to hide everything in your index file?

Hello KiemVM,
thanks for your reply. Where exactly do i find this code? Or is it custom?

1 Like

The way I have been testing it is using a secure domain setup where moderators come in via IAmModerator.jitsi.com with a valid JWT and then participants join from IAmParticipant.jitsi.com. When moderators join we do not modify the interface but from the participant side we send the iframe parameters to remove all the interface options and use the parameter hiddenDomain to put the value of the anonymousdomain that is configured in the meet config.js file. This creates a scenario where participants are hidden from one another but all moderators are able to see everyone and each other. It also means everyone can chat and the Moderators are able to see the user’s name while everyone else just see’s “guest” in the chat.

In the screen shot below you can see the two moderators on the left able to see everyone while the participants on the right are only able to see the moderators and themselves.

1 Like

So one issue I have found with this method is that Jibri records the moderators view which won’t be great if you are wanting to send the webinar out after the presentation. Anyone have any suggestions on this one?

Jibri records active speaker.
So you will always record active speaker in full window along with filmstrip on the right.
You can use follow me so it will record whatever you want to record.
Or hide filmstrip on load for everyone which will hide filmstrip and just record active speaker

We’ve modified jitsi-meet so we can hide participants without camera activated.

That’s how we achieve a “webinar mode”. It only works on web version, but it’s handy. You can create a second URL or JWT without camera, so spectators don’t show off.

Then we have another UI for “meeting staff” where we show everyone and we can open/close cameras remotely to make visible someone doing questions & so.

PS: @emrah we just got funding to implement simultaneous translation channels for multi-lingual meetings & human-made transcription (like in Zoom). Our customer wants it to be opensourced. Shoud we stick to some guidelines in order to do a pull request with these features?

Kind regards,

Could you share how you modified Jitsi or will it be a problem? What you are telling is right that what i´m looking for.

Your second point about transcription is intereseting too. We have a client with transcription by google, but with the new Jitsi-Version it is not running anymore. What kind of solution did you create?

It does not appear there is any built in function to hide the filmstrip that I can find. Do you know of anyway without modifying the source?

Haven’t tried it, but I suspect you can achieve this by:

  1. toggling the filmstrip visibility onload
  2. Removing “filmstrip” from toolbarButtons in config.js so the arrow button to manually toggle filmstrip is not shown to users.

N.B. Here, we’re hiding but not really disabling the filmstrip, so users who know their way around Jitsi would still be able to bring up the filmstrip using the the dev console if they are inclined to.

What I do it hide filmstrip by iframe API.
And hide button for toggle filmstrip with css for participants, as I noticed filmstrip button could not be hidden, I use little older version. Not sure if this is rectified now.
I can share the code no prob, let me know if you need help.
I have not made any changes to jitsi, and everything is done outside.

Yes please. Let me know.