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 ;
Vous pourriez aussi aimer...
-
Construire de meilleurs produits avec une meilleure rétroaction en utilisant Fider | Linode
Fider permet aux développeurs et aux petites entreprises d'obtenir un retour d'information de la part de leurs utilisateurs par le biais d'un portail auto-hébergé qui les aide à concevoir de meilleurs produits. -
Essayez l'infrastructure en tant que code
Justin Mitchel fournit un guide IaC étape par étape pour Terraform, Ansible, Puppet, Chef et Salt. -
Coder une application de prise de notes à partir de zéro - Full Stack HTML, CSS, JavaScript et Node.js
Dans cette vidéo, @CodeWithHarry vous montrera comment créer une application de prise de notes à partir de zéro en utilisant HTML, CSS, JavaScript et Node.js. -
Obtenez votre exemplaire de "Road to Kubernetes" (en anglais)
Nouveau contenu de Manning Publications et Forrester, ainsi qu'une enquête de DeveloperNation.