So bauen Sie eine React Native Video-Chat-App mit Sendbird Calls
Wir haben kürzlich unser neues React Native SDK eingeführt, mit dem Sie Ihren Apps einfacher denn je Chat hinzufügen können. Bitte beachten Sie, dass es sich bei diesem Tutorial um einen Workaround handelt, den Sie nicht mehr benötigen.
Um mit dem Erstellen von Anrufen zu beginnen, laden Sie bitte unser neues SDK und Beispiel-Apps für Direct ! Viel Spaß beim Anrufaufbau! 📞Blog und für weitere Informationen im Dokumenten auf GitHub hilfreich! Weitere Anleitungen finden Sie in den Schnellstartcode herunterladen, um Sendbird kennenzulernen Aufrufe – möglicherweise finden Sie auch den Android und iOS. Sie können auch die Demo-Apps für Gruppenaufrufe und
Einführung
Dieser Artikel zeigt, wie Sendbird-Aufrufe innerhalb einer React Native-Anwendung implementiert werden. Am Ende dieses Tutorials erfahren Sie, wie Sie mit aktivierten Push-Benachrichtigungen für Android und iOS einen anderen Benutzer anrufen und eingehende Anrufe empfangen.
In diesem Tutorial werden zwei Lösungen behandelt, die beide eine WebView-Komponente für die WebRTC-Kommunikation verwenden.
- WebView mit Remote-Server
- WebView mit lokalem Server
Die Remote-Server-Lösung ist ideal, wenn Sie bereits eine Web-App hosten, die Sendbird Calls implementiert, da Sie sie aus der React Native-App heraus verknüpfen können.
Die lokale Serverlösung (2) ist die wartungsfreundlichere Lösung und bietet die schnellste und benutzerfreundlichste Entwicklungserfahrung, da Sie alle physischen Dateien in einem Projekt oder Repository haben.
Bevor wir zu den beiden Lösungen übergehen, die wir separat betrachten werden, müssen wir einige Vorarbeiten zur Vorbereitung erledigen.
Schritt 1: Einrichtung der Umgebung
Als Voraussetzung benötigen Sie eine React Native App. Für eine schnelle Einrichtung verwenden Sie create-react-native-app. Wenn Sie bereits über eine eigene Anwendung verfügen, können Sie die folgenden Schritte auf Ihre Codebasis anwenden.
Hinweis: Das native React-Native WebView ist veraltet. Daher sollten Sie stattdessen react-native-webview verwenden.
Wenn Sie React Native >= 0.6.x verwenden, ist eine manuelle Verknüpfung nicht erforderlich. Führen Sie nach der Installation einfach pod install im iOS-Verzeichnis aus. Wenn Sie eine ältere Version verwenden, lesen Sie bitte die Erste Schritte-Dokumentation von React Native Webview.
Gehen Sie als Nächstes zu der Komponente, in der Sie das <WebView> rendern möchten. Komponente (in diesem Beispiel die <App>-Komponente) und fügen Sie den folgenden Code ein:
Die Eigenschaft „allowsInlineMediaPlayback“ zusammen mit einem Parameter „?playsinline=1“ in uri sollte in iOS „true“ sein. Andernfalls wird das Video in der WebView-Komponente im Vollbildmodus angezeigt.
Mitteilungen
Wenn Sie Push-Benachrichtigungen einbinden möchten, schauen Sie sich unbedingt react-native-push-notification an, um zu erfahren, wie Sie mit Remote umgehen Mitteilungen. Beachten Sie, dass Sie zur Verarbeitung von Remote-Push-Benachrichtigungen von Sendbird-Aufrufen den onRegister-Rückruf implementieren müssen, der aufgerufen wird, wenn die Registrierungstoken wird veröffentlicht. Anschließend müssen Sie es mit SendBirdCall.reigsterPushToken() an den Sendbird-Server übergeben, um Push-Benachrichtigungen vom Sendbird-Server zu erhalten.
Denken Sie daran, dass die Funktion SendBirdCall.reigsterPushToken() nach der Authentifizierung aufgerufen werden sollte.
Der onNotification-Rückruf wird immer dann aufgerufen, wenn Ihre Anwendung eine Remote-Push-Benachrichtigung erhält. Das bedeutet, dass Sie entscheiden müssen, ob es sich um eine Sendbird-Nachricht handelt oder nicht. Sie können sie unterscheiden, indem Sie die Eigenschaft sendbird_call des Datenobjekts nachschlagen. Wenn die Eigenschaft festgelegt ist, handelt es sich um eine Sendbird-Nachricht, sodass Sie sie an das JavaScript SDK übergeben können, um sie ordnungsgemäß zu verarbeiten.
Eine Beispielimplementierung finden Sie in der RemotePushController.js-Datei.
Polyfill-WebView
Damit das WebView auf verschiedenen Geräten einheitlich funktioniert, müssen wir es mit react-native-webrtc polyfillen.
Fügen Sie in Ihrer App.js-Datei den folgenden Code hinzu:
Es ist wichtig, dass die Bypass-Funktion so früh wie möglich aufgerufen wird.
Beachten Sie außerdem, dass die minimale Android-Version, die WebView v37 unterstützt, in der WebRTC eingeführt wurde, Android 5.0 (Lollipop) ist.
Fügen Sie die Anmeldefunktion hinzu
Für die grundlegende Authentifizierungsfunktionalität werden wir Texteingabefelder hinzufügen, in denen wir unsere App-ID, Benutzer-ID und Zugriffstoken (falls zutreffend) hinzufügen können. Fügen Sie in Ihrer App.js-Datei Folgendes hinzu:
Die Variable authQuery enthält verschlüsselte Informationen über App-ID, Benutzer-ID und Zugriffstoken, die zum Anmelden bei der in der WebView-Komponente gerenderten Website verwendet werden. Um herauszufinden, wie die authQuery codiert ist, sehen Sie sich die folgenden Schritte an.
Fügen wir nun die Status-Hooks und Ereignis-Listener hinzu:
In den nächsten Schritten werden wir uns die beiden Optionen ansehen, die wir für das uri-Feld der WebView-Komponente haben. Beginnen wir mit WebView mit einem Remote-Server.
Schritt 2a: WebView mit Fernserver
Sie müssen den öffentlichen Remote-Server für die Bereitstellung der HTML-Seite vorbereiten, einschließlich des Sendbird Calls JS SDK. In diesem Leitfaden verwenden wir unser selbst gehostetes Beispiel.
Dieser Remote-Server muss die HTML-Seite bereitstellen, die schließlich zur Anrufansicht gelangt. Die Anrufansicht sollte <Audio> enthalten. oder <Video> Tags, und die Tags müssen autoPlay, gamesInline und möglicherweise muted als Eigenschaften haben. Schauen Sie sich die minimale Form der Anrufansicht in unserem Beispiel-Repository an.
Nach dem zuvor beschriebenen Setup können wir die Sendbird Call Beispiel-Web-App aus unserer React Native-App mithilfe der WebView-Komponente rendern.
Das Einzige, was hier erforderlich ist, ist die Übergabe der obigen URL an das uri-Feld der Quell-Requisite von WebView:
Schritt 2b: WebView mit lokalem Server (empfohlen)
Alternativ können Sie einen lokalen Server starten, der einige lokale Dateien in Ihrem React Native-App-Projekt hostet. Dadurch können Sie schneller entwickeln, da alle Dateien in einem einzigen Projekt/Repository konsolidiert werden. Es reduziert auch die Gemeinkosten, da dafür keine Live-Website gehostet werden muss.
Installieren Sie zunächst den react-native-static-server und react-native-fs< /span>.entsprechende React-Native-FS-Version Pakete. Installieren Sie abhängig von Ihren React Native- und Gradle-Versionen die
Wenn Sie React Native >= 0.6.x verwenden, ist eine manuelle Verknüpfung nicht erforderlich. Andernfalls führen Sie die folgenden Befehle aus:
Führen Sie dann den folgenden Befehl für iOS aus:
Erstellen Sie Dateien für den lokalen Server
Fügen Sie im Stammverzeichnis Ihres Projekts ein Verzeichnis mit dem Namen „assets/www“ hinzu. Hierhin gehen unsere Build-Artefakte und werden von unserem lokalen Server gehostet. Wir werden diesen lokalen Server in den nächsten Schritten erstellen.
Als Quelle dieser Build-Artefakte klonen wir dieses Repository in einen Ordner namens SendbirdCalls. Führen Sie im Stammverzeichnis unseres React Native-Projekts den folgenden Befehl aus:
Ihre Projektstruktur sollte nun also wie folgt aussehen:
Installieren Sie abschließend die Abhängigkeiten und erstellen Sie das gerade geklonte SendbirdCalls-Projekt.
Sobald der obige Befehl abgeschlossen ist, sollten Sie die Build-Artefakte im Verzeichnis <Projektstammverzeichnis>/assets/www/ abrufen.
Dateien zum iOS-Bundle hinzufügen
Öffnen Sie zunächst Ihr iOS-Projekt in Xcode. Das iOS-Projekt sollte sich im Stammverzeichnis Ihres React Native-Projekts unter ios/<ProjectName>.xcodeproj befinden.
Klicken Sie dann mit der rechten Maustaste auf das oberste Verzeichnis Ihres Projekts und wählen Sie „Dateien zu <Projektname> hinzufügen“ aus.
Wählen Sie dann das Verzeichnis „assets/www“ im Stammverzeichnis Ihres Projekts aus.
Nachdem Sie auf „Hinzufügen“ geklickt haben, sollten Sie die im iOS-Projekt gebündelten Assets sehen.
Dateien zum Android-Bundle hinzufügen
Fügen Sie in der Datei <project root>/android/app/build.gradle die folgende Zeile hinzu, um die Dateien des statischen Servers in der Android-App zu bündeln:
Wenn Sie dann das Android-Verzeichnis in Android Studio öffnen, sollten Sie das mit der Android-App gebündelte Assets-Verzeichnis sehen:
Aktivieren Sie den Klartext-Verkehr auf Android
Dieser Schritt ist wichtig für den Zugriff auf den lokalen Server auf localhost. Android lässt standardmäßig keinen Datenverkehr von localhost zu; Um dies zu ermöglichen, müssen wir einige Netzwerksicherheitsparameter konfigurieren.
Erstellen Sie dazu eine neue Datei mit dem Namen network_security_config.xml unter app/src/main/res/xml und fügen Sie den folgenden Code ein:
Fügen Sie dann in Ihrer Datei app/src/main/AndroidManifest.xml die folgenden zwei Zeilen hinzu:
Wiederholen Sie nun die obigen Schritte, jedoch in Ihrem Debug-Verzeichnis (app/src/debug/res/xml).
Mehr darüber können Sie in diesem Artikel lesen.
Erstellen Sie den lokalen Server-Hook
In diesem Schritt erstellen wir einen useStaticServer-Hook, der beim Mounten der Komponente einen lokalen statischen Server startet und seine URL zurückgibt, damit wir sie dann an den <WebView>-Server übergeben können. Komponente.
Erstellen Sie für den useStaticServer-Hook eine Datei StaticServer.js wie unten:
Es ist wichtig, dass Sie {localOnly: true} übergeben, wenn Sie einen neuen StaticServer erstellen. Andernfalls funktioniert das Hosting auf localhost nicht.
Wenn Sie bisher das gesamte Tutorial verfolgt und dieses Repository in das SendbirdCalls-Verzeichnis geklont haben, können Sie die Symbole auch kopieren – obwohl dies für den Zweck dieses Tutorials nicht notwendig ist. Wenn Sie dies tun möchten, müssen Sie vor dem Kopieren der Symbole ein weiteres Verzeichnis erstellen:
Hier ist eine vollständige Liste der in diesem Projekt verwendeten Symbole.
Bedenken Sie, dass dieser lokale statische Server auf localhost ausgeführt wird. Wenn auf den Server über die lokale IP eines Geräts zugegriffen wird, zum Beispiel 192.168.10.1, werden Sendbird Calls nicht korrekt initialisiert, da entweder eine HTTPS-Verbindung erforderlich ist oder auf dem lokalen Host ausgeführt werden muss.
Fügen Sie abschließend in Ihrem App.js-Code die folgenden Codezeilen hinzu und übergeben Sie die URL-Variable innerhalb der Quellstütze der WebView-Komponente:
Schritt 3: Die App ausführen
Um die App auszuführen, führen Sie sie einfach im Stammverzeichnis des Projekts aus: npm run android oder npm Führen Sie ios im Terminal aus, um die App entweder auf einem echten Gerät oder einem Emulator auszuführen.
Wenn Sie der lokalen Serverimplementierung gefolgt sind und das Sendbird Calls-Repository geklont haben, können Sie einen zweiten Terminalbefehl ausführen npm run watch im SendbirdCalls-Verzeichnis, um die Sendbird Calls-Website automatisch neu zu erstellen und die React Native-App neu zu laden, die auf einem Android-Gerät oder Emulator ausgeführt wird.
Wenn Sie Android auf einem Emulator testen, stellen Sie sicher, dass Sie alle Emulatorinstanzen schließen, bevor Sie es ausführen npm run android, andernfalls wird der Metro-Server von der App im Emulator getrennt. Wenn kein Emulator ausgeführt wird, sollten React Native-Skripte automatisch einen Emulator starten und erfolgreich eine Verbindung zum Metro-Server herstellen.
Möglicherweise wird die Aufforderung angezeigt, die Erlaubnis zur Verwendung des Mikrofons und der Kamera anzufordern. Wenn Sie das Problem beheben, können Sie den Anruf wie in der Browserversion verwenden.
Schritt 4: Fehlerbehebung
iOS
- Fehler „JSON-Wert ‚1‘ vom Typ NSNumber kann nicht in NSString konvertiert werden“
a. Entfernen Sie das Attribut „allowReadAccessToURLs“ aus der WebView-Komponente – lesen Sie mehr in diesem Artikel. - Weißer Bildschirm oder HTTPS-Fehler
a. Sie müssen die URL des lokalen Servers unter https://localhost/ besuchen und nicht die IP, die vom StaticServer zurückgegeben wird (d. h. 192.168.18.1). ) - Fehler „Build error domain=com.apple.CoreSimulator.SimError, code=405“ nach dem Ausführen von React-Native Run-ios unter macOS:
a. Führen Sie denselben Befehl mit dem angegebenen Simulatornamen aus:
Android
- Weißer Bildschirm oder HTTPS-Fehler
a. Sie müssen den Klartext-Verkehr in AndroidManifest.xml aktivieren (folgen Sie dem Schritt „Klartext-Verkehr auf Android aktivieren“) – lesen Sie mehr in diesem Artikel. aktualisiert) .Android L und höher aus dem Play Store (Das WebView wird automatisch für Mobilgeräte mit aktualisieren Android System WebView und Google Play-Dienste
b. Wenn Sie auf einem Emulator ohne Google Play-Dienste und automatische Updates testen, stellen Sie sicher, dass Sie die
c. Wenn Android System WebView unter Updates nicht angezeigt wird, müssen Sie es möglicherweise auf dem Gerät im Abschnitt „App-Info“ der Geräteeinstellungen aktivieren. Wenn Sie es auch von dort aus nicht aktivieren können, müssen Sie Chrome möglicherweise vorübergehend deaktivieren, bevor Sie Android System WebView aktivieren und aktualisieren. - Fehler „Skript konnte nicht geladen werden. Stellen Sie sicher, dass Sie entweder einen Metro-Server betreiben oder dass Ihr Bundle „index.android.bundle“ für die Veröffentlichung korrekt verpackt ist“
a. Stellen Sie sicher, dass Sie alle Emulatorinstanzen schließen, bevor Sie npm run android ausführen. Wenn kein Emulator ausgeführt wird, sollten React Native-Skripte automatisch einen Emulator starten und erfolgreich eine Verbindung zum Metro-Server herstellen - WebView lädt mit Fehler „net::ERR_CONNECTION_REFUSED
a. Sie müssen den Parameter „localOnly“ auf „true“ setzen, wenn Sie einen neuen statischen Server erstellen (new StaticServer(PORT, path, {localOnly: true}))
Schlussfolgerung
In diesem Tutorial haben wir die Implementierung von Sendbird-Aufrufen in Ihrer React Native-Anwendung mit einem WebView besprochen. Jetzt wissen Sie, wie Sie die Leistungsfähigkeit von JavaScript nutzen können, um Benutzern das Tätigen persönlicher Anrufe und den Empfang von Push-Benachrichtigungen in Ihrer App auf Android- und iOS-Geräten zu ermöglichen. Gut gemacht!
Sie sind auf dem besten Weg, Ihr App-Engagement und die Benutzerzufriedenheit mit hochwertigen WebRTC-fähigen Sprach- und Video-Chats zu steigern.
Lassen Sie uns wie immer wissen, wenn Sie Fragen zu unserer Community-Seite haben, und vielen Dank, dass Sie Sendbird nutzen!
Viel Spaß beim Codieren! 🖥