Jitsi with multiple UI

• 1. About
• 2. Custom UI with embedded Jitsi
• 3. Jitsi with multiple index pages
  • 3.1 Custom Jitsi URL
  • 3.2 Nginx configuration for custom index pages
  • 3.3 Custom index pages
  • 3.4 Nginx configuration for custom config.js
  • 3.5 Custom config.js
• 4. Nginx Configuration for custom welcome page
• 5. Limitations
• 6. iFrame vs multiple index pages
• 7. Links

1. About

This repo contains documents/files/config to support multiple UIs on a single Jitsi setup. This implementation only works for web clients, it has no effect for mobile applications.

2. Custom UI with embedded Jitsi

Create a custom user interface for each domain (or category or group). This UI may be a simple HTML page or a dynamic page generated by a server-side service such as nodejs, PHP, etc. No need to host these UI pages on the Jitsi server.

Jitsi will be embedded into custom user interfaces using Jitsi iFrame API. This is the first layer of customization in our implementation and mostly involves customizing the outer space and adjusting some Jitsi behavior by overwriting the configuration parameters.

Check custom-ui.html for a sample page with embedded Jitsi. Click this link to see it in action.

Check custom-ui-2.html for a sample page with some advanced features. Click this link to see it in action.

3. Jitsi with multiple index pages

Jitsi publishes the same index page with the same feature set for all participants and for all meeting rooms by default. The following changes allow Jitsi to publish different index pages for different user groups.

3.1 Custom Jitsi URL

We need a code section in URL to select a custom index page with its own feature set for Jitsi. The last two sections of path have a special meaning for Jitsi. The last one is room and the other one is tenant (isolated room group).

Therefore we need a third section in path to put the code. So we are using a path with three subsections in our implementation.

See Nginx internal flow

3.2 Nginx configuration for custom index pages

Nginx redirects users to index.html which is located in /usr/share/jitsi-meet/ by default and this index page sets most of the runtime features of Jitsi. We don't want to use the same index page and the same feature set for all users. Therefore we will select different index pages for different user groups depending on the code from the URL.

We are adding the following location block into the Nginx configuration to catch the code from the URL and to select a custom index page for the request:

# nordeck: index selection
location ~ ^/([^/?&:'"]+)/([^/?&:'"]+)/(.*)$ {
    set $index "index-$1.html";
    rewrite ^/([^/?&:'"]+)/(.*)$ /$2;
}

And we are customizing the default @root_path block to apply redirection:

# nordeck: customized @root_path
location @root_path {
    # rewrite ^/(.*)$ / break;
    rewrite ^/(.*)$ /$index break;
}

See jms.conf as a customized Nginx config example.

3.3 Custom index pages

Create an additional index page in /usr/share/jitsi-meet/ for each user group. The custom index page should be named as index-CODE.hmtl. You may copy the original index.html file as a starting point.

cd /usr/share/jitsi-meet

CODE="moderator"
cp index.html index-$CODE.html

CODE="guest"
cp index.html index-$CODE.html

The index page sets most of the runtime features by including some config files (such as config.js, interface_config.js, etc.) into itself. Customize the index pages according to needs. For example set custom config files in it.

Check custom index pages for more info.

3.4 Nginx configuration for custom config.js

config.js sets most of the runtime features and it is located in /etc/jitsi/meet/ folder. Nginx uses a hard-coded alias to point it. Since there will be multiple config.js in our implementation, we need to update Nginx config to point to right location for the additional config.js files.

Add the following location block into the Nginx configuration:

# nordeck: custom config files
location ~ /([a-zA-Z0-9-]+)-config.js {
    alias /etc/jitsi/meet/$1-config.js;
}

See jms.conf as a customized Nginx config example.

3.5 Custom config.js

Create an additional config.js file in /etc/jitsi/meet/ for each feature set. The custom config.js file should be named as PREFIX-config.js. PREFIX must be a combination of letters and digits and -. The file name must match the one used in the index page. You may copy the original config.js file as a starting point.

PREFIX="moderator"

cd /etc/jitsi/meet
cp YOUR-DOMAIN-config.js $PREFIX-config.js

Check custom config.js for more info.

See also custom interface_config.js.

4. Nginx configuration for custom welcome page

As an option, it is possible to change the default landing page. This may be a static HTML page in Jitsi server or another page hosted on a different web server.

# nordeck: welcome page
location = / {
    return 302 https://$host/static/welcome.html
}

See jms.conf as a customized Nginx config example.

5. Limitations

This implementation has some limitations:

• Works on mobile browsers but not on mobile Jitsi applications.

• Not very flexible if frequent changes to Jitsi configuration are required.

• Configuration parameters are not always backward compatible. They must be checked and tested before each upgrade.

• Nginx config may be different in new releases. It must be checked and tested with our custom changes before each upgrade.

• A path with three subsections is mandatory as the meeting address.

6. iFrame vs multiple index pages

• Both methods can set the configuration parameters but there is no need to update UI codes in the second option.

• For the first option, the developer can decide how to configure Jitsi. For the second option, the Jitsi admin can decide how to configure Jitsi.

• The second option allows to use custom server-side include files (such as body.html, head.html, css) for each group.

• iFrame allows to create custom actions and much more integrations with the custom UI.

7. Links

• Jitsi iFrame API
• Default index.html
• Default config.js
• Whitelisted config keys
• Default interface_config.js
• Whitelisted interface_config keys
• Default Nginx Config
• Customized Nginx Config
• Jitsi URL Generator