videosdk rtc react sdk example
1.0.0
Bei Video SDK entwickeln wir Tools, die Unternehmen dabei helfen, erstklassige Produkte für die Zusammenarbeit mit Funktionen für Live-Audio/Video, Cloud-Aufzeichnungen, RTMP/HLS-Streaming und Interaktions-APIs zu erstellen.
Neugierig, es in Aktion zu sehen? Schauen Sie sich hier unsere Live-Demo an.
Befolgen Sie diese Schritte, um die Beispiel-App zum Laufen zu bringen:
git clone https://github.com/videosdk-live/videosdk-rtc-react-sdk-example.gitÖffnen Sie Ihren bevorzugten Code-Editor und kopieren Sie die Beispielumgebungsdatei:
cp .env.example .env.env Datei Generieren Sie ein temporäres Token von Ihrem Video SDK-Konto und aktualisieren Sie die .env Datei:
REACT_APP_VIDEOSDK_TOKEN = " YOUR_TEMPORARY_TOKEN "Installieren Sie die erforderlichen Pakete:
npm installBingo, es ist Zeit, den Startknopf zu drücken.
npm run startSchalten Sie eine Reihe leistungsstarker Funktionen frei, um Ihre Meetings zu verbessern:
| Besonderheit | Dokumentation | Beschreibung |
|---|---|---|
| ? Voranruf-Setup | Vorruf einrichten | Konfigurieren Sie Audio-, Videogeräte und andere Einstellungen, bevor Sie dem Meeting beitreten. |
| ⏳ Wartelobby | Wartende Lobby | Virtueller Raum, in dem die Teilnehmer warten können, bevor sie dem Meeting beitreten. |
| ? Treten Sie der Besprechung bei | Treten Sie der Besprechung bei | Ermöglicht Teilnehmern die Teilnahme an einem Meeting. |
| ? Besprechung verlassen | Besprechung verlassen | Ermöglicht Teilnehmern, ein Meeting zu verlassen. |
| ? Mikrofon umschalten | Mikrofonsteuerung | Schalten Sie das Mikrofon während einer Besprechung ein oder aus. |
| ? Kamera umschalten | Kamerasteuerung | Schalten Sie die Videokamera während einer Besprechung ein oder aus. |
| Bildschirmfreigabe | Bildschirmfreigabe | Teilen Sie Ihren Bildschirm während des Anrufs mit anderen Teilnehmern. |
| ? Bildaufnahme | Bilderfassung | Erfassen Sie Bilder anderer Teilnehmer aus ihrem Videostream, was besonders nützlich für Video-KYC- und Identitätsüberprüfungsszenarien ist. |
| ? Eingabegerät ändern | Eingabegeräte wechseln | Wechseln Sie zwischen verschiedenen Audio- und Videoeingabegeräten. |
| ? Audioausgabe ändern | Audioausgang umschalten | Wählen Sie während eines Meetings ein Ausgabegerät für Audio aus. |
| Tracks optimieren | Track-Optimierung | Verbessern Sie die Qualität und Leistung von Medientiteln. |
| Chatten | Chat im Meeting | Tauschen Sie Nachrichten mit Teilnehmern über einen Publish-Subscribe-Mechanismus aus. |
| Whiteboard | Whiteboard | Arbeiten Sie visuell zusammen, indem Sie auf einem gemeinsamen Whiteboard zeichnen und Anmerkungen machen. |
| ? Dateifreigabe | Dateifreigabe | Teilen Sie Dateien während des Meetings mit den Teilnehmern. |
| ? Aufnahme | Aufnahme | Zeichnen Sie die Besprechung zur späteren Bezugnahme auf. |
| ? RTMP-Livestream | RTMP-Livestream | Streamen Sie das Meeting live auf Plattformen wie YouTube oder Facebook. |
| Transkription in Echtzeit | Transkription in Echtzeit | Erstellen Sie Echtzeit-Transkriptionen des Meetings. |
| ? Remote-Medien umschalten | Remote-Mediensteuerung | Steuern Sie das Mikrofon oder die Kamera entfernter Teilnehmer. |
| Alle Teilnehmer stumm schalten | Alle stumm schalten | Schalten Sie während des Anrufs alle Teilnehmer gleichzeitig stumm. |
| ?️ Teilnehmer entfernen | Teilnehmer entfernen | Einen Teilnehmer aus der Besprechung ausschließen. |
Verstehen Sie die Kernkomponenten unseres SDK:
Meeting – Ein Meeting steht für Audio- und Videokommunikation in Echtzeit.
Note: Don't confuse the terms Room and Meeting; both mean the same thing ?
Sessions – Eine bestimmte Dauer, die Sie in einem bestimmten Meeting verbringen, wird als Sitzung bezeichnet. Sie können mehrere Sitzungen mit einer bestimmten Meeting-ID haben.
Participant – Ein Teilnehmer bezieht sich auf jeden, der an der Besprechungssitzung teilnimmt. Der local participant vertritt Sie selbst (Sie), während alle anderen Teilnehmer als remote participants gelten.
Stream – Ein Stream bezieht sich auf Video- oder Audio-Medieninhalte, die entweder vom local participant oder von remote participants veröffentlicht werden.
Der Token wird zum Erstellen und Validieren eines Meetings mithilfe der API sowie zum Initialisieren eines Meetings verwendet.
Development Environment :
Production Environment :
Components/DropDown.js : Eine Dropdown-Komponente zum Auswählen von Audioeingabegeräten (Mikrofonen), zum Überwachen von Audio über die Web-Audio-API und zum Verwalten von Mikrofoneinstellungen.
Components/DropDownCam.js : Eine Dropdown-Komponente zum Auswählen von Kamerageräten und zum Verwalten von Kameraberechtigungen.
Components/DropDownSpeaker.js : Ermöglicht Benutzern, Lautsprecher auszuwählen, sie mit Beispielsounds zu testen und den Wiedergabefortschritt zur Bestätigung zu verfolgen.
Components/NetworkStats.js : Zeigt Netzwerkstatistiken in Echtzeit an, z. B. Upload- und Download-Geschwindigkeiten.
components/screens/JoiningScreen.js : Bietet Benutzern die Möglichkeit, ein Meeting zu erstellen oder daran teilzunehmen, den Webcam- und Mikrofonstatus zu verwalten, Geräte (Mikrofon, Kamera, Lautsprecher) auszuwählen, Berechtigungen zu überprüfen, Videos in der Vorschau anzuzeigen und Netzwerkstatistiken zu überwachen, um zuvor eine ordnungsgemäße Einrichtung sicherzustellen Eintritt in die Sitzung.
api.js : Enthält alle API-Aufrufe zum Erstellen und Validieren von Besprechungen.
components/MeetingDetailsScreen.js : Zeigt Optionen zum Erstellen oder Beitreten zu einem Meeting an.
components/screens/WaitingToJoin.js : Zeigt eine Lottie-Animation mit Nachrichten an, während Sie auf die Teilnahme am Meeting warten. Dieser Bildschirm wird angezeigt, bis das isMeetingJoined -Flag wahr ist, was von dem meeting empfangen wird, das mit useMeeting() von @videosdk.live/react-sdk initialisiert wurde. 
components/ParticipantView.js : Zeigt das Video eines einzelnen Teilnehmers mit einer Eckanzeige für den Namen des Teilnehmers an.
components/ParticipantGrid.js : Zeigt ein Raster der Teilnehmer an, das auf dem Hauptbildschirm angezeigt wird.
meeting/components/ParticipantView.js : Verwalten Sie, wie viele Teilnehmer im Teilnehmerraster angezeigt werden.
meeting/components/BottomBar.jsmore actions anzuzeigen. Die Schaltfläche more actions öffnet eine Schublade mit den verbleibenden Optionen. 
components/PresenterView.js : Zeigt die Ansicht an, wenn ein Teilnehmer seinen Bildschirm teilt. 
sidebar/ChatPanel.js : Enthält den Chat-Seitenbereich mit einem Chat-Eingabefeld und einer Liste von Chat-Nachrichten. 
sidebar/ParticipantPanel.js : Zeigt die Liste der im Meeting anwesenden Teilnehmer an. 
components/screens/LeaveScreen.js : Zeigt den Verlassen-Bildschirm an, wenn der Teilnehmer das Meeting verlässt. 
Entdecken Sie mehr und beginnen Sie mit dem Bauen mit unserer Dokumentation
