Jitsi Meet Docker: WelcomePage anpassen

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/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>
<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="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

![Unterstützen|58x50](upload://cyWRoIvEQBpp7OnJlBHvW0MPISQ.png "Unterstützen")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 :crazy_face:

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 :slight_smile:

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 :crazy_face:

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.

hey, was meinst du genau mit anders herum?

hab echt vieles ausprobiert und immer das selbe ergebnis ( BridgeChannel.js:86 WebSocket connection to ‚wss://domain.dm/colibri-ws/jvb2/62dgdfccc746dfde32/6adfdsf9cf?pwd=2fnpdfsdfsdfgi9l11caese45v‘ failed:
_initWebSocket @ BridgeChannel.js:86
t @ BridgeChannel.js:105
Logger.js:154 2021-03-14T18:00:57.514Z [modules/RTC/BridgeChannel.js] : Channel closed by server
) … egal ob handy, lappy oder am pc mit FF, chrome, vivaldi, opera etc. er droppt sobald eine 2te bridge laeuft, daher frag ich was genau mit anders herum gemeint ist!

an den ports kann es nicht liegen da fuer den test damals alles offen war :stuck_out_tongue_winking_eye:

und die beiden ro0t srv im selben netz bzw. same location waren… echt strange

thx fuer die rasche antwort.

Ne alles gut mit den Websockets, beide gehen, room & colibri. Es tauchen auch keine Fehler in der FF Konsole auf, somit gehe ich davon aus das alles fein ist und halt die Quali runtergeregelt wurde aus Gründen die ich evtl. noch nicht sehe :wink:

ok, hast du ein tip woran es liegen koennte, tangiert mich jetzt auch nicht sonderlich, da zwei instanzen atm :open_mouth:

greetz

wie gesagt in meinem Test ist es so, habe auch schon andere mit super Quali in Jitsi gehabt.

ein tip zwecks ( Logger.js:154 2021-03-14T18:00:57.514Z [modules/RTC/BridgeChannel.js] : Channel closed by server )

greetz