videosdk rtc react sdk example
1.0.0
Chez Video SDK, nous développons des outils pour aider les entreprises à créer des produits collaboratifs de classe mondiale dotés de fonctionnalités d'audio/vidéo en direct, d'enregistrements dans le cloud, de streaming RTMP/HLS et d'API d'interaction.
Curieux de le voir en action ? Découvrez notre démo en direct ici.
Suivez ces étapes pour que l’exemple d’application soit opérationnel :
git clone https://github.com/videosdk-live/videosdk-rtc-react-sdk-example.gitOuvrez votre éditeur de code préféré et copiez l'exemple de fichier d'environnement :
cp .env.example .env.env Générez un jeton temporaire à partir de votre compte SDK vidéo et mettez à jour le fichier .env :
REACT_APP_VIDEOSDK_TOKEN = " YOUR_TEMPORARY_TOKEN "Installez les packages nécessaires :
npm installBingo, il est temps d'appuyer sur le bouton de lancement.
npm run startDébloquez une suite de fonctionnalités puissantes pour améliorer vos réunions :
| Fonctionnalité | Documentation | Description |
|---|---|---|
| ? Configuration du pré-rappel | Configurer le pré-rappel | Configurez les périphériques audio, vidéo et autres paramètres avant de rejoindre la réunion. |
| ⏳ Hall d'attente | Hall d'attente | Espace virtuel permettant aux participants d'attendre avant de rejoindre la réunion. |
| ? Rejoindre la réunion | Rejoindre la réunion | Permet aux participants de rejoindre une réunion. |
| ? Quitter la réunion | Quitter la réunion | Permet aux participants de quitter une réunion. |
| ? Basculer le micro | Contrôle du micro | Activez ou désactivez le microphone pendant une réunion. |
| ? Basculer la caméra | Contrôle de la caméra | Allumez ou éteignez la caméra vidéo pendant une réunion. |
| Partage d'écran | Partage d'écran | Partagez votre écran avec les autres participants pendant l'appel. |
| ? Capture d'images | Captureur d'images | Capturez des images d'autres participants à partir de leur flux vidéo, particulièrement utiles pour les scénarios vidéo KYC et de vérification d'identité. |
| ? Changer le périphérique d'entrée | Changer les périphériques d'entrée | Basculez entre différents périphériques d’entrée audio et vidéo. |
| ? Changer la sortie audio | Changer la sortie audio | Sélectionnez un périphérique de sortie pour l'audio pendant une réunion. |
| Optimiser les pistes | Optimisation des pistes | Améliorez la qualité et les performances des pistes multimédias. |
| Chat | Chat en réunion | Échangez des messages avec les participants via un mécanisme de publication-abonnement. |
| Tableau blanc | Tableau blanc | Collaborez visuellement en dessinant et en annotant sur un tableau blanc partagé. |
| ? Partage de fichiers | Partage de fichiers | Partagez des fichiers avec les participants pendant la réunion. |
| ? Enregistrement | Enregistrement | Enregistrez la réunion pour référence future. |
| ? Diffusion en direct RTMP | Diffusion en direct RTMP | Diffusez la réunion en direct sur des plateformes comme YouTube ou Facebook. |
| Transcription en temps réel | Transcription en temps réel | Générez des transcriptions en temps réel de la réunion. |
| ? Basculer les médias distants | Contrôle multimédia à distance | Contrôlez le microphone ou la caméra des participants distants. |
| Couper le son de tous les participants | Tout désactiver | Coupez le son de tous les participants simultanément pendant l'appel. |
| ?️ Supprimer un participant | Supprimer un participant | Éjecter un participant de la réunion. |
Comprendre les composants principaux de notre SDK :
Meeting - Une réunion représente une communication audio et vidéo en temps réel.
Note: Don't confuse the terms Room and Meeting; both mean the same thing ?
Sessions - Une durée particulière que vous passez dans une réunion donnée est appelée session, vous pouvez avoir plusieurs sessions d'un identifiant de réunion spécifique.
Participant - Un participant fait référence à toute personne assistant à la session de réunion. Le local participant vous représente (vous), tandis que tous les autres participants sont considérés comme remote participants .
Stream : un flux fait référence à un contenu multimédia vidéo ou audio publié soit par le local participant , soit par remote participants .
Le jeton est utilisé pour créer et valider une réunion à l'aide de l'API et également initialiser une réunion.
Development Environment :
Production Environment :
composants/DropDown.js : un composant déroulant pour sélectionner les périphériques d'entrée audio (microphones), surveiller l'audio via l'API Web Audio et gérer les paramètres du microphone.
composants/DropDownCam.js : Un composant déroulant pour sélectionner les appareils photo et gérer les autorisations de la caméra.
composants/DropDownSpeaker.js : permet aux utilisateurs de sélectionner des haut-parleurs, de les tester avec des échantillons de sons et de suivre la progression de la lecture pour confirmation.
composants/NetworkStats.js : affiche les statistiques du réseau en temps réel, telles que les vitesses de téléchargement et de téléchargement.
components/screens/JoiningScreen.js : offre aux utilisateurs la possibilité de créer ou de rejoindre une réunion, de gérer l'état de la webcam et du micro, de sélectionner des appareils (microphone, caméra, haut-parleurs), de vérifier les autorisations, de prévisualiser la vidéo et de surveiller les statistiques du réseau pour garantir une configuration correcte avant entrer dans la réunion.
api.js : Inclut tous les appels API pour la création et la validation de réunions.
components/MeetingDetailsScreen.js : affiche les options pour créer ou rejoindre une réunion.
components/screens/WaitingToJoin.js : Affiche une animation Lottie avec des messages en attendant de rejoindre la réunion. Cet écran s'affiche jusqu'à ce que l'indicateur isMeetingJoined soit vrai, qui est reçu de la meeting initialisée à l'aide de useMeeting() de @videosdk.live/react-sdk . 
components/ParticipantView.js : affiche la vidéo d'un seul participant avec un affichage de coin pour le nom du participant.
components/ParticipantGrid.js : Affiche une grille de participants affichée sur l'écran principal.
meeting/components/ParticipantView.js : Gérez le nombre de participants qui seront affichés dans la grille des participants.
meeting/components/BottomBar.jsmore actions . Le bouton more actions ouvre un tiroir contenant les options restantes. 
components/PresenterView.js : Affiche la vue lorsqu'un participant partage son écran. 
sidebar/ChatPanel.js : Contient le panneau latéral de discussion, avec un champ de saisie de discussion et une liste de messages de discussion. 
sidebar/ParticipantPanel.js : Affiche la liste des participants présents à la réunion. 
components/screens/LeaveScreen.js : affiche l'écran de sortie lorsque le participant quitte la réunion. 
Explorez davantage et commencez à construire avec notre documentation
