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? Starten 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 diese Seite, um über neue Episoden informiert zuwerden, sobald sie erscheinen.
#Linode #React #Video #Streaming
Produkt: Linode, Open Source, React; Sam Hawley;
Das könnte Sie auch interessieren...
-
GitOps verstehen
GitOps ist ein operatives Framework, das Git als einzige Quelle der Wahrheit nutzt, um eine iterative Entwicklung für Cloud-native Anwendungen zu ermöglichen. -
Selbst gehosteter P2P File Server | FilePizza mit Cloudron
In diesem Tutorial zeigen wir Ihnen, wie Sie Cloudron und anschließend FilePizza, eine selbst gehostete P2P-Dateiserver-Anwendung, installieren. -
Beobachtbarkeit ist im Wesentlichen der Zustand Ihrer Umgebung Justin Cobbett - Akamai
In diesem Video gibt Justin Cobbett, Product Marketing Manager bei Akamai, einen Einblick in die Bedeutung von Observability und was dies heute bedeutet. -
Erstellen einer virtuellen Umgebung | Python App von Grund auf mit Justin Mitchel
In Teil 4 von 5 dieser Serie über das Einrichten einer Python Web App von Grund auf, behandelt Justin Mitchel die Installation von Python in einer virtuellen Umgebung.