Ursprünglich veröffentlicht unter: Jitsi Meet Docker: WelcomePage anpassen - adminForge
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/bashWelcome 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.jsDisable 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>
<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>
<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>
<p class="welcome-card-paragraph">✔ Server Standort Deutschland 🇩🇪</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>
</div>
<div class="welcome-card welcome-card--shadow">
<div class="welcome-card-text">
<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>
</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="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>
</div>
</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
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. |
