erin

Erin

Selbsthostbarer TikTok-Feed für Ihre Clips
Erstellen Sie einen TikTok-Feed mit Ihren eigenen Videos

Einführung

Erin ist ein einfacher und selbsthostbarer Dienst, der es Ihnen ermöglicht, Ihre eigenen Clips mithilfe des bekannten vertikalen Swipe-Feeds von TikTok anzusehen. Auf Reddit wurde eine Anfrage für eine selbsthostbare App gestellt, die gefilterte Videos über die Benutzeroberfläche von TikTok anzeigen kann, also habe ich sie erstellt.

Merkmale

Erin hat alle diese Funktionen implementiert:

• Zeigen Sie Ihre eigenen Videos mit dem Swipe-Feed von TikTok an
• Maskieren Sie die Videos, die Sie nicht in Ihrem Feed sehen möchten*
• Wählen Sie den Feed (Playlist) aus, den Sie abspielen möchten**
• Spielen Sie Ihren Feed automatisch ab, ohne zu wischen
• Suchen Sie mit der Tastatur vorwärts und rückwärts oder durch Doppeltippen
• Rufen Sie den Vollbildmodus auf bzw. beenden Sie ihn, indem Sie zweimal auf die Mitte tippen
• Videometadaten über die Benutzeroberfläche von TikTok anzeigen***
• Einfacher Lazy-Loading-Mechanismus für Ihre Videos
• Automatische Clip-Benennung basierend auf dem Dateinamen
• Einfache und optionale Sicherheit mittels Master-Passwort
• Unterstützung für HTTP und HTTPS
• Unterstützung für die Docker-/Proxy-Bereitstellung

Bitte beachten Sie außerdem, dass Erin nur eine React-App ist, die vollständig von Caddy betrieben wird. Caddy kümmert sich gleichzeitig um die Authentifizierung, die Bereitstellung statischer Dateien und die Bereitstellung der React-App.

*: Sie können Videos maskieren, um sie aus Ihrem Feed auszublenden. Wenn Sie sehen möchten, welche Videos maskiert wurden, und die Maskierung sogar aufheben möchten, können Sie lange auf die Schaltfläche Mask drücken. Daraufhin wird der Manager geöffnet.

**: Standardmäßig erstellt Erin einen zufälligen Feed aus allen Videos in Ihrem Ordner und seinen Unterverzeichnissen. Wenn Sie jedoch benutzerdefinierte Feeds (Playlists) erstellen möchten, können Sie Unterverzeichnisse erstellen und Ihre Videos entsprechend organisieren. Beispiel: https://my-server.tld/directory-a erstellt einen Feed aus den Videos im /directory-a und funktioniert mit jedem Pfad (daher werden verschachtelte Ordner unterstützt).

***: Mithilfe einer Metadatendatei können Sie einen Kanal (mit Avatar und Namen), eine Bildunterschrift und einen Link für alle Ihre Videos anzeigen. Die Metadatendatei kann sich an einer beliebigen Stelle in Ihrem Videoordner befinden und muss mit dem Dateinamen des zugehörigen Videos übereinstimmen, wobei die Erweiterung durch JSON ersetzt werden muss. Beispiel: my-video.mp4 kann seine Metadaten in my-video.json haben. Das Metadatenformat wird hier angezeigt. Beachten Sie, dass Sie in der Beschriftung rohes HTML für benutzerdefinierte Stile und Effekte verwenden können.

Weitere Informationen finden Sie unter Konfiguration.

Bereitstellung und Beispiele

Bevor Sie fortfahren, stellen Sie unabhängig von Docker, Docker Compose oder einer eigenständigen Bereitstellung sicher, dass Sie ein videos erstellt haben, das alle Ihre Videodateien enthält. Später wird dieses Verzeichnis Ihrer Erin-Instanz zur Verfügung gestellt (indem Sie ein Volume an Ihren Docker-Container binden oder das Verzeichnis neben Ihre Caddyfile legen).

Mit Docker bereitstellen

Sie können Erin sehr schnell mit Docker über die Befehlszeile ausführen.

Sie können die folgenden Befehle verwenden:

 # Create a .env file
touch .env

# Edit .env file ...

# Option 1 : Run Erin attached to the terminal (useful for debugging)
docker run --env-file .env -p < YOUR-PORT-MAPPING > -v ./videos:/srv/videos:ro mosswill/erin

# Option 2 : Run Erin as a daemon
docker run -d --env-file .env -p < YOUR-PORT-MAPPING > -v ./videos:/srv/videos:ro mosswill/erin

Hinweis: Im Stammverzeichnis des Repositorys befindet sich eine Datei sample.env , die Ihnen den Einstieg erleichtert

Hinweis: Wenn Sie docker run --env-file verwenden, achten Sie darauf, die Anführungszeichen um AUTH_ENABLED und AUTH_SECRET zu entfernen, da sonst Ihr Container aufgrund unerwarteter Interpolationen und Typkonvertierungen, die Docker hinter den Kulissen durchführt, abstürzen könnte.

Bereitstellen mit Docker Compose

Um Ihnen den schnellen Einstieg zu erleichtern, finden Sie im Verzeichnis „examples/“ einige docker-compose Beispieldateien.

Hier ist eine Beschreibung jedes Beispiels:

• docker-compose.simple.yml : Führen Sie Erin als Frontdienst auf Port 443 aus, wobei Umgebungsvariablen direkt in der docker-compose Datei bereitgestellt werden.

• docker-compose.proxy.yml : Ein Setup, bei dem Erin auf Port 80 läuft, hinter einem Proxy, der Port 443 überwacht.

Wenn Ihre docker-compose Datei korrekt ist, können Sie die folgenden Befehle verwenden:

 # Run Erin in the current terminal (useful for debugging)
docker-compose up

# Run Erin in a detached terminal (most common)
docker-compose up -d

# Show the logs written by Erin (useful for debugging)
docker logs < NAME-OF-YOUR-CONTAINER > 

Konfiguration

Um Erin auszuführen, müssen Sie die folgenden Umgebungsvariablen in einer .env Datei festlegen:

Hinweis: Reguläre Umgebungsvariablen, die in der Befehlszeile bereitgestellt werden, funktionieren ebenfalls

Hinweis: Im Stammverzeichnis des Repositorys befindet sich eine Datei sample.env , die Ihnen den Einstieg erleichtert

Parameter	Typ	Beschreibung	Standard
PUBLIC_URL	boolean	Die öffentliche URL, die für den Remotezugriff auf Ihre Erin-Instanz verwendet wird. (Bitte geben Sie HTTP/HTTPS und den Port an, falls nicht Standard 80 oder 443. Fügen Sie keinen abschließenden Schrägstrich ein.) (Lesen Sie die offizielle Caddy-Dokumentation.)	https://localhost
AUTH_ENABLED	string	Ob die Standardauthentifizierung aktiviert werden soll. (Bei diesem Parameter wird die Groß-/Kleinschreibung beachtet) (Mögliche Werte: true, false)	WAHR
AUTH_SECRET	string	Der sichere Hash des Passworts, das zum Schutz Ihrer Erin-Instanz verwendet wird.	Hash des secure-password
APP_TITLE	string	Der benutzerdefinierte Titel, den Sie auf der Registerkarte des Browsers anzeigen möchten. (Tipp: Sie können hier [VIDEO_TITLE] verwenden, wenn Sie möchten, dass Erin den Titel des aktuellen Videos dynamisch anzeigt.)	Erin – TikTok-Feed für Ihre eigenen Clips
AUTOPLAY_ENABLED	boolean	Ob Autoplay aktiviert werden soll. (Bei diesem Parameter wird die Groß-/Kleinschreibung beachtet) (Mögliche Werte: true, false)	FALSCH
PROGRESS_BAR_POSITION	string	Wo sich der Fortschrittsbalken auf dem Bildschirm befinden sollte. (Bei diesem Parameter wird die Groß-/Kleinschreibung beachtet) (Mögliche Werte: unten, oben)	unten

Tipp: Um einen sicheren Hash für Ihre Instanz zu generieren, verwenden Sie den folgenden Befehl:

docker run caddy caddy hash-password --plaintext " your-new-password "

Hinweis: Wenn Sie docker-compose.yml Umgebungsvariablen verwenden und Ihr Passwort-Hash Dollarzeichen enthält: Verdoppeln Sie alle, sonst stürzt die App ab. Beispiel: $ab$cd$efxyz wird zu $$ab$$cd$$efxyz . Dies ist auf Vorbehalte beim docker-compose String-Interpolationssystem zurückzuführen.

Fehlerbehebung

Sollten bei der Ausführung von Erin Probleme auftreten, sehen Sie sich bitte die folgenden häufigen Probleme an, die auftreten können.

Wenn nichts davon auf Ihren Fall zutrifft, können Sie gerne ein Problem eröffnen.

Erin ist über HTTP/HTTPS nicht erreichbar

Erin sitzt auf einem Caddy-Webserver.

Infolge :

• Möglicherweise können Sie das Problem besser beheben, indem Sie Ihre Containerprotokolle lesen.
• Informationen zu Adressen finden Sie in der offiziellen Caddy-Dokumentation.
• Sie können die offizielle Caddy-Dokumentation zu HTTPS überprüfen.

Ansonsten stellen Sie bitte sicher, dass die folgenden Anforderungen erfüllt sind:

• Wenn Erin als eigenständige Anwendung ohne Proxy ausgeführt wird:

  • Stellen Sie sicher, dass Ihr Server/Ihre Firewall eingehende Verbindungen auf Erins Port akzeptiert.
  • Stellen Sie sicher, dass Ihre DNS-Konfiguration korrekt ist. (Normalerweise sollte ein solcher Eintrag ausreichen: A erin XXX.XXX.XXX.XXX für https://erin.your-server-tld )
  • Stellen Sie sicher, dass Ihre .env Datei entsprechend dem Abschnitt „Konfiguration“ richtig konfiguriert ist.

• Wenn Erin in Docker / hinter einem Proxy ausgeführt wird:

  • Führen Sie zuerst die vorherigen (eigenständigen) Überprüfungen durch.
  • Stellen Sie sicher, dass PUBLIC_URL in .env richtig eingestellt ist.
  • Überprüfen Sie Ihre Proxy-Weiterleitungsregeln.
  • Überprüfen Sie Ihr Docker-Netzwerk-Setup.

Der entscheidende Teil ist in jedem Fall die Konfiguration und das Lesen der offiziellen Caddy-Dokumentation.

Erin sagt, dass auf meinem Server kein Video gefunden wurde

Damit Erin Ihre Videodateien bereitstellen kann, müssen diese die folgenden Anforderungen erfüllen:

• Die Dateierweiterung ist eine von .mp4 , .ogg , .webm . (Es gibt die einzigen Erweiterungen, die von Webbrowsern unterstützt werden.)
• Die Dateien befinden sich in /srv/videos auf Ihrem Docker-Container über ein Volume.

Um sicherzustellen, dass sich Ihre Videos in Ihrem Docker-Container und am richtigen Ort befinden, können Sie:

• Führen Sie docker exec -it <NAME-OF-YOUR-CONTAINER> sh aus
• Führen Sie in der neu geöffneten Shell Folgendes aus: ls /srv/videos
• Hier sollten Sie Ihre Videodateien sehen. Wenn nicht, überprüfen Sie Ihre Volumenbindung.

Wenn Erin Ihre Videos immer noch nicht finden kann, obwohl alles gut konfiguriert ist, öffnen Sie bitte ein Problem, einschließlich der Ausgabe der Javascript-Konsole und der Netzwerkregisterkarte Ihres Browsers, wenn die Anfrage an /media/ geht. Dies kann mit Browser-Caching, ungültiger Konfiguration oder ungültigen Anmeldeinformationen zusammenhängen.

Wie kann ich meinem Feed neue Videos hinzufügen?

Zunächst sollten Sie Ihre neuen Videodateien einfach in Ihrem mit Docker gemounteten Videoverzeichnis ablegen. Erin ruft diese neuen Dateien automatisch ab und wenn Sie Ihren Browser aktualisieren, werden sie angezeigt.

Wie soll ich meine Videodateien benennen?

Erin übersetzt Ihren Dateinamen automatisch in einen Titel, der auf der Benutzeroberfläche angezeigt wird.

Die Umrechnung erfolgt wie folgt:

• - wird
• __ wird -

Hier sind ein paar Beispiele, die Ihnen bei der Benennung Ihrer Dateien helfen sollen:

• Vegas-trip__Clip-1.mp4 wird zu Vegas trip - Clip 1
• Spanish-language__Lesson-1.mp4 wird zur Spanish language - Lesson 1
• Spiderman-1.ogg wird zu Spiderman 1

In welcher Reihenfolge werden meine Dateien im Feed angezeigt?

Erin mischt Ihre Videodateien bei jeder Browseraktualisierung nach dem Zufallsprinzip.

Daher gibt es keine bestimmte Reihenfolge für die Anzeige Ihrer Videos.

Einige meiner Videos scheinen zu fehlen oder werden überhaupt nicht geladen

Derzeit wird Erin nur versuchen, die Videos abzurufen, die eine unterstützte Erweiterung haben.

Unterstützte Erweiterungen sind: .webm , .mp4 und .ogg .

Bitte beachten Sie jedoch, dass Safari .ogg offenbar nicht unterstützt, daher werden diese Videos für Safari-Benutzer ignoriert.

Sollten Sie Ratschläge oder Ideen zur Unterstützung weiterer Erweiterungen haben (insbesondere für Safari-Benutzer), können Sie gerne ein Problem eröffnen.

Mein benutzerdefiniertes Passwort funktioniert nicht

Bei der Verwendung von Docker/Docker Compose mit von Caddy generierten Passwort-Hashes scheint es einige Einschränkungen zu geben.

Dies sind die Regeln, die Sie befolgen sollten:

• Wenn Sie Erin mithilfe der Docker-CLI über den Befehl docker run ... --env-file .env ... bereitgestellt haben, sollte Ihr AUTH_SECRET überhaupt keine Anführungszeichen enthalten und alle Dollarzeichen sollten unverändert bleiben, ohne Escapezeichen oder Verdoppelung
• Wenn Sie Erin mit Docker Compose über eine docker-compose.yml Datei bereitgestellt haben, sollten die Dollarzeichen Ihres AUTH_SECRET verdoppelt werden. Beispiel: i$am$groot wird zu i$$am$$groot .

Denken Sie jedoch daran, dass Ihr Passwort-Hash mit dem folgenden Befehl generiert werden muss:

docker run caddy caddy hash-password --plaintext " your-new-password " 

Etwas anderes

Bitte eröffnen Sie ein Problem, erklären Sie, was passiert, und beschreiben Sie Ihre Umgebung.

Credits

Hey, hey! Es ist immer eine gute Idee, sich zu bedanken und die Menschen und Projekte zu erwähnen, die uns weiterbringen.

Großer Dank geht an die Einzelpersonen/Teams hinter diesen Projekten:

• tik-tok-clone: ​​Für die Basis-TikTok-Benutzeroberfläche und reibungslose Interaktion.
• Caddy: Für den leichten und leistungsstarken Webserver.
• Die unzähligen anderen!

Und vergessen Sie nicht, Erin zu erwähnen, wenn es Ihnen gefällt oder wenn es Ihnen in irgendeiner Weise hilft!