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;

Entwicklertools