Erstellen Sie Ihre eigene Video-Streaming-Website mit einer benutzerdefinierten React.js-App
Der Aufbau einer Videostreaming-Anwendung mag zunächst entmutigend erscheinen, aber dieses Video zeigt Ihnen, wie Sie es schaffen können. Konkret zeigen wir Ihnen, wie Sie einen Streaming-Dienst mit folgenden Komponenten implementieren:
- Eine serverseitige Anwendung ( Node.js ), die das Abrufen und Streamen von Videos, die Erstellung von Miniaturansichten für Ihre Videos und die Bereitstellung von Untertiteln und Untertiteln für Videos übernimmt.
- Eine Client-Anwendung in React, die die Videos auf unserem Server abrufen wird. Diese Anwendung hat zwei Ansichten: eine Liste der verfügbaren Videos und eine Player-Ansicht für jedes Video.
Kapitel:
0:00 Einführung
0:50 Voraussetzungen
1:19 App-Verzeichnisse erstellen
1:48 npm init ausführen
2:04 Abhängigkeiten installieren
2:15 Erstellen des Assets-Verzeichnisses
2:34 Herunterladen der Assets von Github
2:44 Das erste Video zu den Assets hinzufügen
2:58 app.js erstellen
5:48 Testen der App in Dev
6:17 Mit der Arbeit am Frontend beginnen
8: 27 Starten Sie die React-App
8:55 Was kommt als nächstes?
9: 13 Bootstrap implementieren
9:30 react-router-dom installieren
9:56 Die Home-Ansicht erstellen
14:18 home.js durchlaufen
15:28 Erstellen der Player-Ansicht
18:21 player.js durchlaufen
19: 00 Anpassungen an app.js vornehmen
20: 36 Frontend-Anfragen an den Server binden
22: 21 Videos an das Frontend binden
23: 26 Erstellen von Video-Miniaturansichten
25: 11 Dynamisches Bereitstellen von Videos in Stücken
30: 07 Kurzes Resümee
31:49 FFMPEG installieren
33:47 Hinzufügen von Untertiteln
35:56 Einen Untertitel-Endpunkt erstellen
36: 58 Unsere App gestalten
40: 25 Kopf- und Fußzeilen-Komponenten erstellen
43: 03 Schlussfolgerung
Neu bei Linode? Beginnen Sie hier mit einem $100-Guthaben!
Lesen Sie das Dokument für weitere Informationen über den Einsatz einer React Video Streaming App.
Erfahren Sie mehr über React.
FFMPEG hier herunterladen.
Abonnieren Sie den Newsletter, um über neue Episoden informiert zu werden, sobald sie erscheinen.
#Linode #React #Video #Streaming
Produkt: Linode, Open Source, React; Sam Hawley;
Das könnte Sie auch interessieren...
-
Hosten Sie mehrere Websites mit ServerWand | Installation mit einem Klick
ServerWand ist ein magisches Control Panel für die Verwaltung von Websites und Servern. Hosten Sie mehrere Websites auf einem einzigen Server, verwalten Sie Anwendungen, Firewall, Datenbanken, Backups, Systembenutzer, Cron-Jobs, SSL und E-Mail mit einer intuitiven Benutzeroberfläche. -
Was ist Infrastructure as Code? | IaC Erklärt
In diesem Video besprechen wir, wie IaC verwendet wird, und stellen Tools wie Terraform vor, mit denen Sie Ihre Linodes mit einfachem Code bereitstellen können. -
Wie man Nano verwendet | Kommandozeilen-Texteditor
In diesem Video stellt Jay GNU nano vor, einen beliebten Befehlszeilen-Texteditor, der in den meisten Linux-Distributionen enthalten ist. -
Erstellen Sie Ihre eigene Video-Streaming-Website mit einer benutzerdefinierten React.js-App
Der Aufbau einer Videostreaming-Anwendung mag auf den ersten Blick entmutigend erscheinen, aber in diesem Video wird aufgezeigt, wie dies erreicht werden kann.
