Jitsi Meet Docker: WelcomePage anpassen

Im Tutorial Jitsi Meet Docker Instanz anpassen habe ich bereits gezeigt, wie man die Einstellungen der eigenen Docker Jitsi Meet Instanz anpassen kann.

Nun zeige ich euch noch, wie die WelcomePage das Aussehen von der adminForge Instanz Teamjoin.de erhält.

Punkt 1: customize.sh Bash Script erweitern

Wir nehmen das customize.sh Script aus dem vorherigen Tutorial und fügen diese Zeilen ganz oben ein.

#!/bin/bash

# Welcome Page
docker cp welcomePageAdditionalCard.html jitsi-meet-web-1:/usr/share/jitsi-meet/static/
docker cp welcomePageAdditionalContent.html jitsi-meet-web-1:/usr/share/jitsi-meet/static/
docker cp welcome-background.png jitsi-meet-web-1:/usr/share/jitsi-meet/images/
docker cp favicon.ico jitsi-meet-web-1:/usr/share/jitsi-meet/images/
sed -i "s/DISPLAY_WELCOME_PAGE_ADDITIONAL_CARD: .*,/DISPLAY_WELCOME_PAGE_ADDITIONAL_CARD: true,/" .jitsi-meet-cfg/web/interface_config.js
sed -i "s/DISPLAY_WELCOME_PAGE_CONTENT: .*,/DISPLAY_WELCOME_PAGE_CONTENT: true,/" .jitsi-meet-cfg/web/interface_config.js
sed -i "s/DISPLAY_WELCOME_FOOTER: .*,/DISPLAY_WELCOME_FOOTER: false,/" .jitsi-meet-cfg/web/interface_config.js

# Disable Watermark
...

#!/bin/bash

# Welcome Page

docker cp welcomePageAdditionalCard.html jitsi-meet-web-1:/usr/share/jitsi-meet/static/

docker cp welcomePageAdditionalContent.html jitsi-meet-web-1:/usr/share/jitsi-meet/static/

docker cp welcome-background.png jitsi-meet-web-1:/usr/share/jitsi-meet/images/

docker cp favicon.ico jitsi-meet-web-1:/usr/share/jitsi-meet/images/

sed -i "s/DISPLAY_WELCOME_PAGE_ADDITIONAL_CARD: .*,/DISPLAY_WELCOME_PAGE_ADDITIONAL_CARD: true,/" .jitsi-meet-cfg/web/interface_config.js

sed -i "s/DISPLAY_WELCOME_PAGE_CONTENT: .*,/DISPLAY_WELCOME_PAGE_CONTENT: true,/" .jitsi-meet-cfg/web/interface_config.js

sed -i "s/DISPLAY_WELCOME_FOOTER: .*,/DISPLAY_WELCOME_FOOTER: false,/" .jitsi-meet-cfg/web/interface_config.js

# Disable Watermark

...

Punkt 2: WelcomePage HTML Dateien erstellen

Die beiden benötigten HTML Dateien legt ihr einfach im Jitsi-Meet Ordner ab. Diese dürft ihr nach euren Wünschen natürlich anpassen.

<template id = "welcome-page-additional-card-template">
<style>
.welcome .welcome-watermark {
height: 0px;
}
.welcome .welcome-card-row {
justify-content:space-between;
}
@media only screen and (max-width:500px) {
.welcome.with-content .welcome-card {
margin-top: 24px;
width: 100%;
}
}
.welcome .welcome-page-button {
background: #41c0f0;
}
.welcome .welcome-card-large-title {
color: #41c0f0;
}
.welcome .welcome-card-paragraph {
font-size: 14px;
}
</style>
<div class="welcome-card-text">
<h3 class="welcome-card-large-title">Kurzanleitung zu <b>Jitsi Meet</b></h3>
&nbsp;
<p class="welcome-card-paragraph">&#9745;&#65039; Raumnamen in das Feld oben eingeben und das Meeting starten</p>
<p class="welcome-card-paragraph">&#9745;&#65039; F&uuml;r mehr Sicherheit aktiviere die Lobbyfunktion oder setze ein Passwort</p>
<p class="welcome-card-paragraph">&#9745;&#65039; Teile den Link um weitere Personen einzuladen</p>
&nbsp;
<h3 class="welcome-card-large-title" style="margin-top: 15px">Warum <b>Jitsi Meet</b>?</h3>
&nbsp;
<p class="welcome-card-paragraph">&#127466;&#127482; DSGVO-konform - &#9881;&#65039; Open source - &#128176; Kostenlos - &#128077; Einfach - &#128274; Verschl&uuml;sselt</p>
&nbsp;
</div>
</template>

<style>

.welcome .welcome-watermark {

height: 0px;

}

.welcome .welcome-card-row {

justify-content:space-between;

}

@media only screen and (max-width:500px) {

.welcome.with-content .welcome-card {

margin-top: 24px;

width: 100%;

}

.welcome .welcome-page-button {

background: #41c0f0;

}

.welcome .welcome-card-large-title {

color: #41c0f0;

}

.welcome .welcome-card-paragraph {

font-size: 14px;

}

</style>

<h3 class="welcome-card-large-title">Kurzanleitung zu <b>Jitsi Meet</b></h3>

<p class="welcome-card-paragraph">☑️ Raumnamen in das Feld oben eingeben und das Meeting starten</p>

<p class="welcome-card-paragraph">☑️ Für mehr Sicherheit aktiviere die Lobbyfunktion oder setze ein Passwort</p>

<p class="welcome-card-paragraph">☑️ Teile den Link um weitere Personen einzuladen</p>

<h3 class="welcome-card-large-title" style="margin-top: 15px">Warum <b>Jitsi Meet</b>?</h3>

<p class="welcome-card-paragraph">🇪🇺 DSGVO-konform - ⚙️ Open source - 💰 Kostenlos - 👍 Einfach - 🔒 Verschlüsselt</p>

</div>

</template>

<template id="welcome-page-additional-content-template">
<style>
.header-text-title {
color: #41c0f0;
text-shadow: 1px 1px #000;
}
.welcome .welcome-footer--row-2 {
padding: 32px 0;
}
.welcome .welcome-footer-row-2-text {
margin-right: 32px;
}
.welcome .welcome-card-row {
flex-flow: row wrap;
}
.button-group {
display: flex;
flex-flow: row wrap;
}
.button-group button {
border: 0;
margin-right: 5px;
margin-top: 5px;
}
</style>
&nbsp;
<div class="welcome-card-row">
<div class="welcome-card welcome-card--grey">
<div class="welcome-card-text">
<h3 class="welcome-card-large-title">Server</h3>
&nbsp;
<p class="welcome-card-paragraph">&#10004; Server Standort Deutschland &#x1F1E9&#x1F1EA;</p>
<p class="welcome-card-paragraph">&#10004; 3 Jitsi Meet Videobridges (JVB) mit je 6x 3,4 GHz und 1 Gbps Anbindung</p>
&nbsp;
<h3 class="welcome-card-large-title">Einstellungen</h3>
&nbsp;
<p class="welcome-card-paragraph">&#10004; Kein Logging, Tracking oder Werbung</p>
<p class="welcome-card-paragraph">&#10004; Eigene STUN Server, die Standard Jitsi oder Google Server werden NICHT verwendet</p>
<p class="welcome-card-paragraph">&#10004; Videoauflösung von 180p bis 720p möglich (resolution, constraints)</p>
<p class="welcome-card-paragraph">&#10004; Anzahl an gleichzeitigen Videos effektiv auf 20 Video-Streams reduziert (channelLastN)</p>
<p class="welcome-card-paragraph">&#10004; Ab dem 20. Teilnehmer startet jeder weitere mit Video- und Audio stumm geschaltet (startVideoMuted, startAudioMuted)</p>
<p class="welcome-card-paragraph">&#10004; Es werden nur Videos übertragen, die auch bei einem anderen Nutzer dargestellt werden (enableLayerSuspension)</p>
<p class="welcome-card-paragraph">&#10004; Anfragen an Gravatar abgeschaltet (disableThirdPartyRequests)</p>
</div>
</div>
<div class="welcome-card welcome-card--shadow">
<div class="welcome-card-text">
<h3 class="welcome-card-large-title">Videokonferenz Server Hosting - JitsiCloud!</h3>
&nbsp;
<p class="welcome-card-paragraph">Die <strong>JitsiCloud</strong> setzt sich aus <a href="https://jitsi.org/jitsi-meet/" target="_blank" rel="noopener"><strong>Jitsi Meet</strong></a> und <a href="https://nextcloud.com/de/" target="_blank" rel="noopener"><strong>Nextcloud</strong></a> zusammen und besteht ausschließlich aus freier Open-Source Software sowie überprüfbaren trackingfreien Diensten.</p>
<p class="welcome-card-paragraph">JitsiCloud wird <strong>DSGVO-konform</strong> in einem <strong>ISO 27001</strong>-zertifizierten Rechenzentrum in <strong>Deutschland</strong> mit Auftragsdatenverarbeitungsvertrag betrieben.</p>
&nbsp;
<p class="welcome-card-paragraph">&#10149; <strong>Cloud-Speicher-Lösung</strong> mit Nextcloud</p>
<p class="welcome-card-paragraph">&#10149; <strong>Videokonferenz</strong> mit Jitsi Meet</p>
<p class="welcome-card-paragraph">&#10149; <strong>Benutzerverwaltung</strong> in Nextcloud auf Basis des LDAP-Benutzerverzeichnis</p>
<p class="welcome-card-paragraph">&#10149; <strong>Visualisierung</strong> der Auslastung mit Grafana</p>
<p class="welcome-card-paragraph">&#10149; <strong>Eigener Messenger Dienst</strong> auf XMPP Basis</p>
&nbsp;
<form action="https://www.giebel.it/jitsicloud/" method="get" target="_blank"><button class="welcome-page-button" type="submit">mehr &uuml;ber JitsiCloud</button></form>
</div>
</div>
</div>
<footer class="welcome-footer">
<div class="welcome-footer-centered">
<div class="welcome-footer-padded">
<div class="welcome-footer-row-block welcome-footer--row-1">
<div class="welcome-footer-row-1-text">Jitsi on mobile - download our apps and start a meeting from anywhere </div>
<a class="welcome-badge" href="https://apps.apple.com/us/app/jitsi-meet/id1165103905"><img src="./images/app-store-badge.png" /></a>
<a class="welcome-badge" href="https://play.google.com/store/apps/details?id=org.jitsi.meet&hl=en&gl=US"><img src="./images/google-play-badge.png" /></a>
<a class="welcome-badge" href="https://f-droid.org/en/packages/org.jitsi.meet/"><img src="./images/f-droid-badge.png" /></a>
</div>
<div class="welcome-footer-row-block welcome-footer--row-2">
<div class="welcome-footer-row-2-text"><strong>no tracking | no logging | no advertising</strong><br />proudly presented by <a href="https://adminforge.de/" target="_blank">adminForge.de</a> | <a href="unterstuetzen" target="_blank">Spenden</a> | <a href="https://adminforge.de/impressum/#jitsi-meet" target="_blank">Datenschutzhinweis</a> | <a href="impressum" target="_blank">Impressum</a></div>
</div>
</div>
</div>
</div>
</footer>
</template>

<style>

.header-text-title {

color: #41c0f0;

text-shadow: 1px 1px #000;

}

.welcome .welcome-footer--row-2 {

padding: 32px 0;

}

.welcome .welcome-footer-row-2-text {

margin-right: 32px;

}

.welcome .welcome-card-row {

flex-flow: row wrap;

}

.button-group {

display: flex;

flex-flow: row wrap;

}

.button-group button {

border: 0;

margin-right: 5px;

margin-top: 5px;

}

</style>

<h3 class="welcome-card-large-title">Server</h3>

<p class="welcome-card-paragraph">✔ Server Standort Deutschland &#x1F1E9🇪</p>

<p class="welcome-card-paragraph">✔ 3 Jitsi Meet Videobridges (JVB) mit je 6x 3,4 GHz und 1 Gbps Anbindung</p>

<h3 class="welcome-card-large-title">Einstellungen</h3>

<p class="welcome-card-paragraph">✔ Kein Logging, Tracking oder Werbung</p>

<p class="welcome-card-paragraph">✔ Eigene STUN Server, die Standard Jitsi oder Google Server werden NICHT verwendet</p>

<p class="welcome-card-paragraph">✔ Videoauflösung von 180p bis 720p möglich (resolution, constraints)</p>

<p class="welcome-card-paragraph">✔ Anzahl an gleichzeitigen Videos effektiv auf 20 Video-Streams reduziert (channelLastN)</p>

<p class="welcome-card-paragraph">✔ Ab dem 20. Teilnehmer startet jeder weitere mit Video- und Audio stumm geschaltet (startVideoMuted, startAudioMuted)</p>

<p class="welcome-card-paragraph">✔ Es werden nur Videos übertragen, die auch bei einem anderen Nutzer dargestellt werden (enableLayerSuspension)</p>

<p class="welcome-card-paragraph">✔ Anfragen an Gravatar abgeschaltet (disableThirdPartyRequests)</p>

</div>

<h3 class="welcome-card-large-title">Videokonferenz Server Hosting - JitsiCloud!</h3>

<p class="welcome-card-paragraph">Die <strong>JitsiCloud</strong> setzt sich aus <a href="https://jitsi.org/jitsi-meet/" target="_blank" rel="noopener"><strong>Jitsi Meet</strong></a> und <a href="https://nextcloud.com/de/" target="_blank" rel="noopener"><strong>Nextcloud</strong></a> zusammen und besteht ausschließlich aus freier Open-Source Software sowie überprüfbaren trackingfreien Diensten.</p>

<p class="welcome-card-paragraph">JitsiCloud wird <strong>DSGVO-konform</strong> in einem <strong>ISO 27001</strong>-zertifizierten Rechenzentrum in <strong>Deutschland</strong> mit Auftragsdatenverarbeitungsvertrag betrieben.</p>

<p class="welcome-card-paragraph">➥ <strong>Cloud-Speicher-Lösung</strong> mit Nextcloud</p>

<p class="welcome-card-paragraph">➥ <strong>Videokonferenz</strong> mit Jitsi Meet</p>

<p class="welcome-card-paragraph">➥ <strong>Benutzerverwaltung</strong> in Nextcloud auf Basis des LDAP-Benutzerverzeichnis</p>

<p class="welcome-card-paragraph">➥ <strong>Visualisierung</strong> der Auslastung mit Grafana</p>

<p class="welcome-card-paragraph">➥ <strong>Eigener Messenger Dienst</strong> auf XMPP Basis</p>

<form action="https://www.giebel.it/jitsicloud/" method="get" target="_blank"><button class="welcome-page-button" type="submit">mehr über JitsiCloud</button></form>

</div>

<div class="welcome-footer-row-1-text">Jitsi on mobile - download our apps and start a meeting from anywhere </div>

</div>

<div class="welcome-footer-row-2-text"><strong>no tracking | no logging | no advertising</strong><br />proudly presented by <a href="https://adminforge.de/" target="_blank">adminForge.de</a> | <a href="https://adminforge.de/unterstuetzen/" target="_blank">Spenden</a> | <a href="https://adminforge.de/impressum/#jitsi-meet" target="_blank">Datenschutzhinweis</a> | <a href="https://adminforge.de/impressum/" target="_blank">Impressum</a></div>

</div>

</footer>

</template>

Punkt 3: Favicon und Background

Nun könnt ihr noch ein eigenes Favicon und Hintergrundbild in den Ordner kopieren, oder einfach diese hier nehmen (freie Lizenz).

wget https://teamjoin.de/images/favicon.ico -O /opt/docker/jitsi-meet/favicon.ico
wget https://teamjoin.de/images/welcome-background.png -O /opt/docker/jitsi-meet/welcome-background.png

1 2	wget https://teamjoin.de/images/favicon.ico -O /opt/docker/jitsi-meet/favicon.ico wget https://teamjoin.de/images/welcome-background.png -O /opt/docker/jitsi-meet/welcome-background.png

Zum Abschluss das ./customize.sh Script ausführen und die Änderungen sind live.

Euer adminForge Team

Das Betreiben der Dienste, Webseite und Server machen wir gerne, kostet aber leider auch Geld.
Unterstütze unsere Arbeit mit einer Spende.