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.
1 2 3 4 5 6 7 8 9 10 11 12 13 | #!/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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 | <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> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 | <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).
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. |
hey, thx a lot
hatte vor einiger zeit noch eine frage gepostet zwecks des swarm modes
eventuell faellt hier noch wem was dazu ein, hab jetzt 2 instanzen laufen, mit swarm lief es zwar, nur der drop der aufloesung war kaese aber genial das die 7tage loesch funktion jetzt bei weiteren diensten einzug haelt
greetz
also nur noch das Problem der Auflösung?
Das habe ich auch bei meiner Instanz https://teamjoin.de und bei der offiziellen https://meet.jit.si/ beobachtet. Sobald ich mit 2 Geräten joine, dropt die Quality auf LD.
Ist das ein Feature oder ein Bug? habe dazu noch nichts gefunden.
ich hoffe es ist ein bug aber ich kann mich entsinnen das es damals bei euch lief
hier noch ein css schnipsel bei bedarf… der euer header schriftzug fuer teamjoin ein wenig anpasst
// body *{
font-family: -apple-system, BlinkMacSystemFont, „Segoe UI“, Roboto, Oxygen, Ubuntu, Cantarell, „Fira Sans“, „Droid Sans“, „Helvetica Neue“, Arial, sans-serif !important;
}
.welcome .header .header-text-title, #x-bottom p{
font-weight: 800;
}
greetz
hey, hast du das problem nur wenn du mit 2 clients aus dem selben netz joinst oder auch mit unterschiedlichen ip´s?
das problem wurde hier schonmal besprochen:
( Poor Videoquality with JVB2 on dedicated host: Poor Videoquality with JVB2 on dedicated host - #5 by Th3R3al - Install & Config - Jitsi Community Forum - developers & users )
greetz
ich teste über mobilfunk am handy und halt im firefox am pc. am pc steht immer max senden 360p und am handy ist das bild krisselig. anders herum ist das bild scharf. LTE sollte das doch in beide richtungen schaffen.