Interface Config Overwrite about capacitor-jitsi-meet

[calvinckho]

The web iFrame API is more advanced than the mobile SDKs and allows users to use executeCommand to overwrite the config.js. According to the web iFrame doc, interfaceConfigOverwrite can only be set at the launch of a meeting using new JitsiMeetExternalAPI() and not dynamically.

To see the limitation of the mobile SDKs, see the two commands available on Android, which are 1) join, and 2) dispose. https://jitsi.github.io/handbook/docs/dev-guide/dev-guide-android-sdk#jitsimeetview

The iOS offers a few more commands but those are not used to change the interface on-the-fly. https://jitsi.github.io/handbook/docs/dev-guide/dev-guide-ios-sdk#jitsimeetview-class

I offer customization service for the UI interface of the mobile SDKs. Let me know if I can be of help. My customization is only for static customization and not for on-the-fly UI customization.

For the web IFrame interface customization, you need to be hosting your own server so you can edit the core files such as config.js / interface_config.js. see jitsi/jitsi-meet#7354 (comment)

[bugrasercanseker]

Can I modify the interface configuration before initializing a meeting?

For instance, in the iFrame API, we're able to configure settings and incorporate interfaceConfigOverwrite using various variables for customizing the toolbar.

We have the capability to enable or disable toolbar functionalities like the microphone, camera, and hangup, among others. You can refer to this link: "https://github.com/jitsi/jitsi-meet/blob/master/interface_config.js"

Here's an example code snippet:

jitsiOptions: {
    configOverwrite: {
        enableNoisyMicDetection: true,
        startAudioOnly: this.appointment.type === 1, // If the appointment is a VOICE CALL, start with audio only
        enableWelcomePage: false,
        enableClosePage: true,
        prejoinConfig: {
            enabled: false,
        },
    },
    interfaceConfigOverwrite: {
        APP_NAME: "APP NAME HERE",
        DEFAULT_LOGO_URL: 'DEFAULT LOGO HERE',
        SHOW_BRAND_WATERMARK: false,
        SHOW_JITSI_WATERMARK: false,
        SHOW_WATERMARK_FOR_GUESTS: false,
        SHOW_CHROME_EXTENSION_BANNER: false,
        MOBILE_APP_PROMO: false,
        SHOW_PROMOTIONAL_CLOSE_PAGE: false,
        TOOLBAR_BUTTONS: [
            'microphone',
            this.appointment.type === 1 ? '' : 'camera', // If the appointment is a VOICE CALL, disable the camera button
            'closedcaptions', 'fullscreen', 'fodeviceselection', 'hangup', 'tileview', 'select-background'
        ]
    },
    preferredTranscribeLanguage: 'en-US',
    apiLogLevels: 'error',
}

This code illustrates how to modify the interface configuration before starting a Jitsi Meet session, along with various customization options.

Can we do that in Mobile SDK? Can we set toolbar options dynamically before starting the meeting?

PS: I am using a Self-Hosted solution, so I can overwrite the interface configuration on the server side. Also, I need to set the toolbar if the meet type is "Voice Only".

[bugrasercanseker]

I found a solution to make the toolbox button change dynamically before joining the meeting.

There are 'featureFlags', we can enable/disable the Camera button with the 'video-mute.enabled' param.

You can check all flags at: https://github.com/jitsi/jitsi-meet/blob/master/react/features/base/flags/constants.ts

[calvinckho]

Yes, my plugin supports the featureFlags configuration in the joinConference() method.
https://github.com/calvinckho/capacitor-jitsi-meet#usage