Jitsi Meet Anleitung: Frontend anpassen von A bis Z (Logo, Hintergrund, Branding)

Einführung

Jitsi Meet ist eine Open-Source-Videokonferenzlösung, die Sie auf Ihrem eigenen Server betreiben. Teilnehmer brauchen kein Konto, nur einen Link und einen Browser. Für viele Organisationen ist genau das der Grund, Jitsi statt Zoom oder Teams zu nutzen: Die Gespräche laufen über die eigene Infrastruktur.

Die Standardinstallation sieht allerdings überall gleich aus: das Jitsi-Logo oben links, „Jitsi Meet“ im Browser-Tab und unbekannte Teilnehmer heißen „Fellow Jitster“. Diese Anleitung zeigt, wie Sie das ändern. Vom schnellen Weg ohne Build (Dynamic Branding) bis zum eigenen, kompilierten Frontend. Sie richtet sich an Administratoren und Entwickler mit Zugriff auf einen Jitsi-Server. Die englische Originalfassung finden Sie unter Jitsi Meet customization.

Warum Jitsi Meet anpassen?

Ein Videotool mit fremdem Logo wirkt in einem Kundengespräch unprofessionell, und in einer Schule verwirrt es Eltern. Die Anpassung bringt vor allem vier Dinge:

• Branding: Ihr Logo, Ihre Farben und Ihr Name statt Jitsi.
• Einfachere Bedienung: Schaltflächen ausblenden, die Ihre Nutzer nie brauchen.
• Funktionen: Eigene Schaltflächen oder Integrationen in vorhandene Systeme.
• Sicherheit: Einstellungen, die zu Ihren Datenschutzrichtlinien passen.

Was diese Jitsi Meet Anleitung behandelt

• Jitsi Meet Logo, Favicon und Anwendungsname
• Hintergrund der Startseite und virtuelle Hintergründe im Meeting
• Texte, Titel und Meta-Tags
• Dynamic Branding ohne Build
• Eigener Build und Deployment auf den Server
• Symbolleiste, Integrationen und Sicherheit

Voraussetzungen: Eigene Jitsi-Instanz einrichten

Sie brauchen einen eigenen Jitsi-Server, auf den Sie per SSH Zugriff haben. Die öffentliche Instanz meet.jit.si lässt sich nicht anpassen. Wenn Sie noch keinen Server haben, gibt es zwei Wege: die Installation auf Ubuntu (Debian-Pakete) oder docker-jitsi-meet, beide Anleitungen auf Englisch. Schneller geht es mit einem vorkonfigurierten Image:

Setup Jitsi Meet on AWS-Developer Guide

A developer guide to set up Jitsi Meet on AWS for a scalable and secure video conferencing platform.

By Dinesh Chathuranga • Meetrix.io

Grundlegende Anforderungen

• Zugriff auf den Jitsi-Server mit Root- oder sudo-Rechten.
• Für Dynamic Branding: nur eine JSON-Datei und ein Texteditor.
• Für einen eigenen Build: Grundkenntnisse in JavaScript, CSS und HTML, dazu Git, Node.js mit npm und make.

Benötigte Werkzeuge

• Git, um das Repository zu klonen.
• Node.js und npm, um Abhängigkeiten zu installieren und das Frontend zu bauen. Die benötigte Node-Version steht in der package.json des Repositorys.
• Ein Code-Editor wie VS Code oder Sublime Text.
• SSH-Zugang zum Server:

ssh -i <ihr-schluessel.pem> ubuntu@<oeffentliche-IP-Adresse>

Der schnelle Weg: Dynamic Branding ohne Build

Alles, was in den späteren Abschnitten Dateien im Jitsi-Paket ändert, kann ein Update wieder überschreiben. Dynamic Branding funktioniert anders. Der Browser lädt beim Öffnen eines Meetings eine kleine JSON-Datei und übernimmt Logo, Hintergrund und Farben daraus. Sie bauen nichts neu, und die Datei liegt außerhalb des Pakets. Für die meisten Teams reicht dieser Weg schon aus.

Fügen Sie in Ihrer config.js eine Zeile hinzu:

dynamicBrandingUrl: 'https://meet.ihre-firma.de/branding/branding.json',

Eine minimale branding.json sieht so aus:

{
  "backgroundColor": "#0b1f3a",
  "backgroundImageUrl": "https://meet.ihre-firma.de/branding/hintergrund.jpg",
  "logoImageUrl": "https://meet.ihre-firma.de/branding/logo.svg",
  "logoClickUrl": "https://ihre-firma.de",
  "inviteDomain": "meet.ihre-firma.de"
}

Die URL muss vom Browser jedes Teilnehmers erreichbar sein. Liegt die Datei auf einer anderen Domain, braucht dieser Server CORS-Header für Ihre Jitsi-Domain. Neuere Versionen kennen weitere Schlüssel, etwa virtualBackgrounds für eigene Hintergrundbilder. Die Kommentare in der offiziellen config.js listen alle Optionen.

Jitsi Meet Frontend anpassen: Schritt für Schritt

Für alles, was Dynamic Branding nicht abdeckt, bauen Sie das Frontend selbst. Das dauert beim ersten Mal etwa eine Stunde, vor allem wegen des ersten npm install.

Schritt 1: Das Jitsi Meet-Projekt klonen

Klonen Sie das offizielle jitsi-meet-Repository auf Ihren Rechner. So testen Sie Änderungen lokal, bevor sie auf den Produktionsserver gehen.

git clone https://github.com/jitsi/jitsi-meet.git
cd jitsi-meet

Tipp: Checken Sie das Tag aus, das zur Version auf Ihrem Server passt. Ein Frontend aus dem aktuellen master-Zweig mit einem älteren Backend kombiniert führt zu schwer erklärbaren Fehlern.

Schritt 2: Abhängigkeiten installieren

npm install

Das lädt alle Node-Module herunter, die das Frontend zum Bauen braucht. Rechnen Sie mit mehreren Minuten und etwa einem Gigabyte im Ordner node_modules.

Schritt 3: Lokal testen

Der Entwicklungsserver zeigt Änderungen sofort im Browser an und verbindet sich dabei mit einem bestehenden Jitsi-Backend:

make dev

Schritt 4: Anwendungsname und Standard-Anzeigename

Den Anwendungsnamen setzen Sie in der interface_config.js, den Namen für Teilnehmer ohne eigenen Namen (standardmäßig „Fellow Jitster“) in aktuellen Versionen über defaultRemoteDisplayName in der config.js:

// interface_config.js
var interfaceConfig = {
    APP_NAME: 'IhrFirmenname',
    // ...
};

// /etc/jitsi/meet/<ihre-domain>-config.js
defaultRemoteDisplayName: 'Gast',

Jitsi Meet Logo, Favicon und Texte der Startseite

1. Favicon anpassen

Dateipfad: jitsi-meet/favicon.ico

1. Erstellen Sie ein Favicon Ihrer Marke im ICO-Format.
2. Ersetzen Sie die vorhandene favicon.ico im Ordner jitsi-meet/.
3. Leeren Sie den Browser-Cache. Favicons werden besonders hartnäckig gecacht, ein privates Fenster ist der schnellste Test.

2. Jitsi Meet Logo ändern

Dateipfad: jitsi-meet/images/watermark.svg

1. Wandeln Sie Ihr Logo in das SVG-Format um.
2. Benennen Sie die Datei in watermark.svg um.
3. Ersetzen Sie die vorhandene Datei in jitsi-meet/images/.
4. Das neue Logo erscheint oben links auf der Startseite und in den Meetingräumen.

Soll das Logo auf Ihre Firmenwebsite verlinken, setzen Sie BRAND_WATERMARK_LINK in der interface_config.js (oder logoClickUrl per Dynamic Branding):

var interfaceConfig = {
    BRAND_WATERMARK_LINK: 'https://ihre-firma.de',
};

3. Titel und Beschreibung der Startseite

Die Texte der Startseite stehen in den Sprachdateien unter jitsi-meet/lang/. Für Deutsch ist das main-de.json, für Englisch main.json und main-enGB.json. Ändern Sie dort im Abschnitt welcomepage die Werte für appDescription, headerTitle, headerSubtitle und title:

{
  "welcomepage": {
    "appDescription": "Sichere Videomeetings auf unserem eigenen Server.",
    "headerTitle": "Willkommen bei [Ihre Firma]",
    "headerSubtitle": "Einfach verbinden, ohne Konto.",
    "title": "[Ihre Firma] Meet"
  }
}

Titel und Vorschau beim Teilen eines Links kommen aus der Datei title.html im Ordner jitsi-meet/:

<title>[Ihre Firma] Meet</title>
<meta property="og:title" content="[Ihre Firma] Meet" />
<meta property="og:description" content="Sichere Videomeetings auf unserem eigenen Server." />
<meta property="og:image" content="images/ihr-logo.png" />
<meta name="description" content="Sichere Videomeetings auf unserem eigenen Server." />

Jitsi Hintergrund ändern

Mit „Hintergrund“ sind in Jitsi zwei verschiedene Dinge gemeint: das Bild auf der Startseite, das Sie als Administrator festlegen, und der virtuelle Hintergrund hinter Ihrem Kamerabild im Meeting. Beides geht.

Hintergrundbild der Startseite

Dateipfad: jitsi-meet/css/_variables.scss

1. Wählen Sie ein Bild als .jpg oder .png und legen Sie es in jitsi-meet/images/ ab.
2. Öffnen Sie css/_variables.scss.
3. Setzen Sie die Variable $welcomePageHeaderBackground auf Ihr Bild:

$welcomePageHeaderBackground: url('../images/ihr-hintergrund.jpg');

Danach muss das Frontend neu gebaut werden. Ohne Build geht es über backgroundImageUrl in der Dynamic-Branding-Datei.

Jitsi Meet Hintergrund einstellen (virtueller Hintergrund im Meeting)

Als Teilnehmer ändern Sie Ihren eigenen Hintergrund so:

1. Klicken Sie im Meeting auf den kleinen Pfeil neben dem Kamera-Symbol.
2. Wählen Sie „Virtuellen Hintergrund auswählen“.
3. Wählen Sie Weichzeichnen, eines der vorgegebenen Bilder oder laden Sie ein eigenes Bild hoch.

Die Freistellung läuft komplett im Browser, Ihr Server merkt davon nichts. Auf älteren Laptops ist Weichzeichnen deutlich flüssiger als ein Bild. Als Administrator können Sie die vorgegebenen Bilder ersetzen: Sie liegen unter /usr/share/jitsi-meet/images/virtual-background/, oder Sie geben eine eigene Liste per virtualBackgrounds im Dynamic Branding vor. Weitere versteckte Funktionen wie Umfragen und Rauschunterdrückung beschreibt unser Artikel zu den versteckten Jitsi-Funktionen (auf Englisch).

Erstellen und Bereitstellen der Anpassung

1. Die Anwendung lokal bauen

Wenn alle Änderungen gemacht sind, bauen Sie im Projektordner ein Paket für den Server:

make source-package

Das erzeugt ein Archiv mit dem kompilierten Frontend (jitsi-meet.tar.bz2). Testen Sie den Build vorher mit make dev und klicken Sie sich einmal durch Startseite und Meeting.

2. Auf den Produktionsserver bringen

1. Laden Sie das Archiv auf den Server hoch:

scp jitsi-meet.tar.bz2 ubuntu@<server-ip>:/tmp/

2. Sichern Sie die aktuelle Installation, bevor Sie etwas ersetzen:

sudo cp -r /usr/share/jitsi-meet/ /usr/share/jitsi-meet-backup/

3. Entpacken Sie das Archiv über die bestehenden Dateien:

cd /tmp
tar -xjf jitsi-meet.tar.bz2
sudo cp -r jitsi-meet/* /usr/share/jitsi-meet/

4. Für reine Frontend-Dateien reicht ein Neuladen im Browser. Nach Änderungen an der config.js laden Sie nginx neu:

sudo systemctl reload nginx

Sieht der Browser danach noch die alte Version, ist es fast immer der Cache. Unser Artikel zu Cache-Problemen in Jitsi (auf Englisch) zeigt, wie Sie das dauerhaft lösen. Wer das Deployment automatisieren will, findet in GitLab CI/CD für das Jitsi-Frontend eine fertige Pipeline.

Erweiterte Jitsi-Anpassungen

1. Farben und Stile über CSS

Die Stile liegen im Ordner jitsi-meet/css/. Die zentralen Variablen stehen in _variables.scss. Welche Variablen es genau gibt, ändert sich zwischen Versionen, also öffnen Sie die Datei Ihrer Version und suchen Sie nach den Farbwerten, die Sie ersetzen wollen. Nach jeder Änderung bauen Sie mit make source-package neu. Für einfache Farbänderungen ist backgroundColor im Dynamic Branding oft der bequemere Weg.

2. Symbolleiste anpassen

Welche Schaltflächen im Meeting erscheinen, steuern Sie in aktuellen Versionen über toolbarButtons in der config.js. Das alte TOOLBAR_BUTTONS in der interface_config.js ist veraltet.

toolbarButtons: [
    'microphone', 'camera', 'desktop', 'chat',
    'raisehand', 'tileview', 'settings', 'hangup'
],

Eigene Schaltflächen definieren Sie mit customToolbarButtons. Ein Klick darauf löst ein Ereignis in der IFrame API aus, und Ihre Webseite entscheidet, was passiert, etwa eine Hilfeseite öffnen. Wie das zusammenspielt, zeigt unser Artikel zur Jitsi IFrame API (auf Englisch).

3. Tools von Drittanbietern einbinden

1. Besorgen Sie API-Schlüssel und Dokumentation vom Anbieter.
2. Binden Sie das Skript ein, etwa in index.html des Builds, oder steuern Sie das Tool von Ihrer eigenen Seite aus über die IFrame API.
3. Testen Sie lokal mit make dev, ob es mit den Jitsi-Funktionen kollidiert.
4. Bauen und deployen Sie wie oben beschrieben.

Jitsi Sicherheit: Diese Einstellungen gehören dazu

Ein eigenes Logo macht einen Server nicht sicherer. Wer Jitsi produktiv nutzt, sollte mindestens diese Punkte erledigen:

• Authentifizierung: Standardmäßig kann jeder, der Ihre Domain kennt, Räume eröffnen. Mit Secure Domain, JWT oder LDAP dürfen das nur angemeldete Moderatoren. Gäste treten danach weiterhin ohne Konto bei. Mehr dazu in JWT mit Jitsi und LDAP-Authentifizierung.
• Lobby und Passwörter: Der Lobby-Modus lässt den Moderator jeden Teilnehmer einzeln hereinlassen.
• Ende-zu-Ende-Verschlüsselung: Optional zuschaltbar, in Browsern mit Insertable Streams. Einige Funktionen wie Aufzeichnung funktionieren dann nicht. Details in Jitsi Meet E2EE.
• SSL-Zertifikat: Let's-Encrypt-Zertifikate laufen nach 90 Tagen ab. Prüfen Sie, ob die automatische Erneuerung funktioniert.
• Datenschutz: Auf einem eigenen Server in einem EU-Rechenzentrum verlassen Ihre Gespräche Ihre Infrastruktur nicht. Das ist die Grundlage für einen DSGVO-konformen Betrieb, mehr dazu in unserem Vergleich der besten Open-Source-WebRTC-Medienserver.

Die vollständige Liste steht in unseren Jitsi Meet Security Best Practices (auf Englisch).

Häufige Probleme und Fehlerbehebung

1. Typische Fehler beim Bauen und Deployen

make source-package bricht ab:

Meist fehlen Module oder die Node-Version passt nicht. Löschen Sie node_modules, führen Sie npm install erneut aus und lesen Sie die erste Fehlermeldung im Terminal, nicht die letzte.

Änderungen erscheinen nicht im Browser:

Browser-Cache leeren und prüfen, ob nach der Änderung wirklich neu gebaut wurde. Bei Änderungen an der config.js: Haben Sie die Datei unter /etc/jitsi/meet/ bearbeitet oder die falsche Kopie?

Dienste starten nach dem Deployment nicht:

Prüfen Sie die Logs unter /var/log/jitsi/ und /var/log/syslog. Ein Syntaxfehler in der config.js (etwa ein fehlendes Komma) legt die ganze Seite lahm. Weitere Fälle sammelt unser Artikel zu häufigen Jitsi-Fehlern (auf Englisch).

2. SSL-Zertifikat erneuern

1. Erneuern Sie das Zertifikat, bei Let's Encrypt mit certbot.
2. Prüfen Sie, ob nginx auf die richtigen Dateien zeigt (normalerweise fullchain.pem und privkey.pem):

ssl_certificate     /etc/letsencrypt/live/meet.ihre-firma.de/fullchain.pem;
ssl_certificate_key /etc/letsencrypt/live/meet.ihre-firma.de/privkey.pem;

3. Starten Sie nginx neu:

sudo systemctl restart nginx

4. Rufen Sie Ihre Jitsi-Seite auf und prüfen Sie das Ablaufdatum im Browser.

Die ausführliche Variante mit automatischer Erneuerung steht in Jitsi Meet SSL-Zertifikat erneuern (auf Englisch).

Jitsi Meet für bestimmte Anwendungsfälle anpassen

1. Branding für Bildungseinrichtungen

Schulen und Hochschulen wollen vor allem eine einfache Oberfläche und klare Rollen. Bewährt haben sich:

• Weniger Schaltflächen über toolbarButtons, damit Schüler nicht aus Versehen Bildschirm teilen oder aufzeichnen.
• Schullogo als watermark.svg und Schulfarben per Dynamic Branding.
• Rollen über JWT: Lehrkräfte melden sich als Moderatoren an, Schüler treten als Gäste bei. Lehrkräfte können dann alle stummschalten und Breakout Rooms verwalten.

Mehr dazu in unserem Artikel über virtuelle Klassenzimmer mit Jitsi (auf Englisch).

2. Corporate Branding und Sicherheit

• Single Sign-On: Anbindung an Active Directory, Okta oder Keycloak über LDAP, SAML/OIDC-Gateways oder JWT, damit Mitarbeiter sich mit ihren Firmenkonten anmelden.
• Mehr-Faktor-Anmeldung: Läuft über Ihren Identitätsanbieter, nicht über Jitsi selbst. Wer SSO nutzt, bekommt MFA damit automatisch.
• Gebrandete Meetingräume: Firmenlogo, Farben und eigene virtuelle Hintergründe per Dynamic Branding.
• Richtlinien: Aufzeichnung für normale Nutzer ausblenden und E2EE für vertrauliche Meetings aktivieren.

Fazit

Für die meisten Teams ist Dynamic Branding der richtige Anfang: Logo, Hintergrund und Farben in einer JSON-Datei, kein Build, keine Sorgen beim nächsten Update. Einen eigenen Build brauchen Sie erst, wenn Sie Texte, Layout oder Funktionen ändern wollen. Und egal welchen Weg Sie gehen: Sichern Sie /usr/share/jitsi-meet/ und Ihre config.js, bevor Sie etwas ersetzen.

Weitere Ressourcen

• Jitsi Meet auf GitHub
• Jitsi Handbook, die offizielle Dokumentation
• Jitsi Community Forum für Fragen an andere Administratoren und Entwickler

Meetrix-Supportdienste

Manche Anpassungen gehen über Logo und Farben hinaus: eigene Funktionen, Integrationen in bestehende Systeme, Skalierung für große Veranstaltungen. Meetrix unterstützt dabei mit:

• Kundenspezifischer Entwicklung: Eigene Funktionen und Integrationen.
• Bereitstellung und Skalierung: Vom kleinen Team bis zum Unternehmen mit mehreren Regionen.
• Wartung und Support: Updates, Fehlerbehebung und Leistungsoptimierung im laufenden Betrieb.