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...
-
Observability Is Essentially The State Of Your Environment Justin Cobbett – Akamai
In this video, Akamai Product Marketing Manager Justin Cobbett, shares his insights on observability and what it means today. -
Bessere Produkte mit besserem Feedback mit Fider | Linode
Fider hilft Entwicklern und kleinen Unternehmen, über ein selbst gehostetes Portal Feedback von ihren Nutzern zu erhalten, um bessere Produkte zu entwickeln. -
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 einer Website zur Bildmanipulation mit Flask und Python | Code mit Harry Tutorial
In diesem Video zeigt Harry, wie man eine Bildbearbeitungssoftware mit Flask, einem Web-Framework für die Entwicklung von Webanwendungen in Python, erstellt.