React Native SDK

Unterstützung der neuen Architektur: Die Vonage Video API React Native 2.31.0-beta.2 Version unterstützt die React Native neue Architektur. Für weitere Informationen, siehe diese Dokumente.

Die Vonage Video API React Native SDK Referenz finden Sie hier hier.

Mit dem Vonage Video API React Native SDK können Sie von der Vonage Video API unterstützte Videositzungen in Apps verwenden, die Sie für Android- und iOS-Geräte entwickeln. Das React Native SDK bietet die folgenden Funktionalitäten:

  • Verbinden mit der Sitzung
  • Veröffentlichen von Streams in einer Sitzung
  • Abonnieren von Streams in einer Sitzung

Das React Native SDK baut auf dem Android SDK und iOS SDK auf. Für Details siehe das Folgende:

Client-SDKs sind auch für Web, Android, iOS, Windows, macOS und Linux verfügbar. Alle Client-SDKs können miteinander interagieren. Mehr über die Grundlagen von Vonage Video Clients, Servern, Sitzungen und mehr erfahren Sie auf der Video API-Grundlagen Seite.

Apps, die mit dem React Native SDK 2.30.0 geschrieben wurden, können mit Apps interagieren, die mit der Version 2.28+ des Video Client SDKs geschrieben wurden:

Installieren des SDK

  1. Installieren Sie node.js.
  2. Bereiten Sie Ihr React Native vor Entwicklungsumgebung.
  3. Installieren und aktualisieren Xcode (Sie benötigen einen Mac).
  4. Installieren und aktualisieren Android-Studio.

Systemanforderungen

Da das React Native SDK auf den SDKs für Android und iOS aufbaut, ist die Android-SDK und iOS-SDK Dokumentation die entsprechenden Anforderungen erfüllen.

  1. Wechseln Sie in Ihrem Terminal in das Verzeichnis Ihres React Native-Projekts.
  2. Fügen Sie die Bibliothek mit npm oder yarn:
    • npm install @vonage/client-sdk-video-react-native
    • yarn add @vonage/client-sdk-video-react-native

iOS-Installation

  1. Installieren Sie die iOS-Pods:

     npx pod-install
    
  2. Für React Native-Versionen vor 0.60:

    • Fügen Sie dies zu Ihrem Podfile hinzu:
    target '<YourProjectName>' do
        # Pods for <YourProject>
        pod 'OTXCFramework', '2.28.2{*}'
    end
    
    • ausführen. react-native link @vonage/client-sdk-video-react-native.

Diese Schritte sind in React Native Version 0.60 und höher nicht notwendig.

  1. Stellen Sie sicher, dass Sie sowohl die Kamera- als auch die Mikrofonverwendung aktiviert haben, indem Sie die folgenden Einträge in die Info.plist Datei:
<key>NSCameraUsageDescription</key>
<string>Your message to user when the camera is accessed for the first time</string>
<key>NSMicrophoneUsageDescription</key>
<string>Your message to user when the microphone is accessed for the first time</string>

Wenn Sie ein Archiv Ihrer Anwendung erstellen, wird die Einstellungen für das Datenschutzmanifest, die von Apples App Store verlangt werden werden mit dieser Version des React Native SDK automatisch hinzugefügt.

Wenn Sie versuchen, die Anwendung zu archivieren und dies fehlschlägt, gehen Sie bitte wie folgt vor:

  1. Gehe zu Ziel.
  2. Klicken Sie auf Bauphasen.
  3. Im Rahmen der Binär mit Bibliotheken verknüpfen Abschnitt, entfernen libOpenTokReactNative.a und fügen Sie es wieder hinzu.

Android-Installation

  1. Wechseln Sie in Ihrem Terminal in Ihr Projektverzeichnis.
  2. Für React Native-Versionen vor 0.60: - Laufen react-native link @vonage/client-sdk-video-react-native Dieser Schritt ist in React Native Version 0.60 und höher nicht notwendig.
  3. ausführen. bundle install.
  4. Stellen Sie sicher, dass in der gradle-Datei Ihrer Anwendung compileSdkVersion, buildToolsVersion, minSdkVersionund targetSdkVersion größer oder gleich den in der React Native-Bibliothek angegebenen Versionen sind.
  5. Das SDK fügt automatisch die erforderlichen Android-Berechtigungen hinzu. Sie müssen diese nicht zu Ihrem App-Manifest hinzufügen. Bei bestimmten Berechtigungen müssen Sie den Benutzer jedoch dazu auffordern. Siehe die vollständige Liste der erforderlichen Genehmigungen in der Vonage Video API Android SDK Dokumentation.
  6. Wenn Ihre Anwendung die OTPublisher.setVideoTransformers() oder OTPublisher.setAudioTransformers() Methode zu verwenden, müssen Sie Folgendes in Ihre app/build.gradle-Datei aufnehmen:
implementation "com.vonage:client-sdk-video-transformers:2.30.1"

Bintray-Sonnenuntergang

Die Bintray-Unterstützung ist beendet (offizielle Ankündigung: https://jfrog.com/blog/into-the-sunset-bintray-jcenter-gocenter-and-chartcenter/). In der build.gradle-Datei Ihrer Anwendung müssen Sie den Verweis auf jcenter und ersetzen sie durch mavenCentral. Beispiel:

// Top-level build file where you can add configuration options common to all sub-projects/modules.

buildscript {
    ...
    repositories {
        google()
        mavenCentral()
    }
    ...
}

allprojects {
    repositories {
        maven {
            // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
            url("$rootDir/../node_modules/react-native/android")
        }
        maven {
            // Android JSC is installed from npm
            url("$rootDir/../node_modules/jsc-android/dist")
        }
        mavenCentral {
            // We don't want to fetch react-native from Maven Central as there are
            // older versions over there.
            content {
                excludeGroup "com.facebook.react"
            }
        }
        google()
        maven { url 'https://www.jitpack.io' }
    }
}

Nicht unterstützte Funktionen

Die React Native-Bibliothek bietet eine React-Schnittstelle für die Verwendung der Android- und iOS-Client-SDKs. Die folgenden erweiterten Funktionen der Android- und iOS-Client-SDKs werden von der React Native-Bibliothek nicht unterstützt:

  • Benutzerdefinierte Audiotreiber -- Eine Anwendung, die React Native verwendet, nutzt das Mikrofon des Geräts, um Audio aufzunehmen und an einen veröffentlichten Stream zu übertragen. Und sie verwendet die Geräte-Lautsprecher (oder Kopfhörer), um Audio von abonnierten Streams wiederzugeben. Sie können jedoch die Eigenschaft enableStereoOutput des OTSession-Objekts setzen, um die Stereoausgabe zu aktivieren.

  • Benutzerdefinierte Videoerfassungsgeräte -- (BaseVideoCapturer) -- Der React Native OTPublisher verwendet den Standard-Video-Capturer, der Videos direkt von der Kamera des Geräts verwendet. Sie können jedoch die Eigenschaft videoSource einer OTPublisher-Komponente auf "screen" setzen, um einen Screen-Sharing-Stream zu veröffentlichen.

  • Benutzerdefinierte Video-Renderer -- Die Komponenten OTSubscriber und OTPublisher implementieren einen Standard-Videorenderer, der Streams rendert und Steuerelemente für die Benutzeroberfläche bereitstellt, um den Streamnamen anzuzeigen und das Mikrofon oder die Kamera stummzuschalten. Publisher und Subscriber verwenden mPublisher.setStyle(BaseVideoRenderer.STYLE_VIDEO_SCALE, BaseVideoRenderer.STYLE_VIDEO_FILL)

  • iOS Delegierte Rückruf-Warteschlange -- Für iOS können Sie die Delegate-Callback-Warteschlange (die GCD-Warteschlange) nicht zuweisen. Siehe die Dokumentation für die OTSession.apiQueue Eigenschaft im iOS SDK.

Um Android- und iOS-Apps zu erstellen, die diese Funktionen nutzen, verwenden Sie die Android-SDK und die iOS-SDK.

Beispiel-Apps

Um diese Bibliothek in Aktion zu sehen, schauen Sie sich die Vonage-react-native-Beispiele repo.

Weitere Informationen

Eine Liste der neuen Funktionen und bekannten Probleme finden Sie in der Versionshinweise.