Créez votre propre site de streaming vidéo en créant une application React.js personnalisée

La création d'une application de diffusion vidéo en continu peut sembler intimidante au premier abord, mais cette vidéo explique comment y parvenir. Plus précisément, nous allons montrer comment mettre en œuvre un service de streaming avec les composants suivants :

- Une application côté serveur Node.js qui se chargera de récupérer et de diffuser des vidéos en continu, de générer des vignettes pour vos vidéos et de fournir des sous-titres pour les vidéos.

- Une application client en React qui va consommer les vidéos sur notre serveur. Cette application aura deux vues : une liste des vidéos disponibles et une vue du lecteur pour chaque vidéo.

Chapitres :
0:00 Introduction
0:50 Conditions préalables
1:19 Créer des répertoires d'applications
1:48 Exécuter npm init
2:04 Installation des dépendances
2:15 Créer le répertoire Assets
2:34 Télécharger les actifs de Github
2:44 Ajouter la première vidéo au répertoire Assets
2:58 Créer app.js
5:48 Tester l'application en mode Dev
6:17 Début du travail sur le front-end
8:27 Démarrer l'application React
8:55 Et maintenant ?
9:13 Implémentation de Bootstrap
9:30 Installation de react-router-dom
9:56 Création de la vue d'accueil
14:18 Utilisation de home.js
15:28 Création de la vue du lecteur
18:21 Utilisation de player.js
19:00 Ajustements à app.js
20:36 Lier les requêtes de l'interface au serveur
22:21 Relier les vidéos au Frontend
23:26 Créer des vignettes vidéo
25:11 Servir dynamiquement des vidéos en morceaux
30:07 Récapitulation rapide
31:49 Installation de FFMPEG
33:47 Ajout de sous-titres
35:56 Création d'un point de terminaison pour les sous-titres
36:58 Styliser notre application
40:25 Création des composants d'en-tête et de pied de page
43:03 Conclusion

Nouveau sur Linode ? Commencez ici avec un crédit de 100 $ !
Lisez la documentation pour plus d'informations sur le déploiement d'une application de streaming vidéo React.
En savoir plus sur React.
Téléchargez FFMPEG ici.
Abonnez-vous pour être informé des nouveaux épisodes dès leur sortie.

#Linode #React #Vidéo #Streaming
Produit : Linode, Open Source, React ; Sam Hawley ;

Outils pour les développeurs