React Native SDK

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:

• Android SDK Übersicht
• iOS SDK Übersicht

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.31+ geschrieben wurden, können mit Apps interagieren, die mit Version 2.29+ des Video Client SDKs geschrieben wurden:

• OpenTok.js
• Android-SDK
• iOS-SDK
• Windows-SDK
• Linux-SDK
• macOs SDK

Voraussetzungen

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.

Einrichtung

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:
   widgets.copy

    npx pod-install
   

2. 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>

3. Registrieren Sie die OTPublisherViewNative und OTSubscriberViewNative Klassen. Ändern Sie dazu die AppDelegate Umsetzung.

   • Wenn Ihre Anwendung über eine Objective-C++ AppDelegate-Datei (AppDelegate.mm) verfügt, fügen Sie diese Klassen der Liste der Pakete im NSMutableDictionary hinzu, das von der Funktion thirdPartyFabricComponents() Funktion:

        #import "OTPublisherViewNativeComponentView.h"
        #import "OTSubscriberViewNativeComponentView.h"

        @implementation AppDelegate
            // ...
            - (NSDictionary<NSString *,Class<RCTComponentViewProtocol>> *)thirdPartyFabricComponents
        {
        NSMutableDictionary * dictionary = [super thirdPartyFabricComponents].mutableCopy;
        dictionary[@"OTPublisherViewNative"] = [OTPublisherViewNativeComponentView class];
        dictionary[@"OTSubscriberViewNative"] = [OTSubscriberViewNativeComponentView class];
        return dictionary;
        }

        @end

• Wenn Ihre Anwendung eine Swift-AppDelegate-Datei (AppDelegate.swift) verwendet, müssen Sie deren Implementierung der RCTAppDelegate.application(_, didFinishLaunchingWithOptions) Methode einen Bridging-Header verwenden, um eine Methode in einer Objective-C++-Datei aufzurufen, die die [RCTComponentViewFactory registerComponentViewClass:] Methode und übergibt dabei die OTPublisherViewNativeComponentView und OTSubscriberViewNativeComponentView Klassen.

4. Wenn Ihre Anwendung die OTPublisher.setVideoTransformers() oder OTPublisher.setAudioTransformers() Methode zu verwenden, müssen Sie Folgendes in Ihr Podfile aufnehmen:

   widgets.copy

   pod 'VonageClientSDKVideoTransformers', '= 2.31.0'
   

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. ausführen. bundle install.

3. 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.

4. 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.

5. Registrieren Sie in der Datei MainActivity.kt für Ihre Anwendung die OpentokReactNativePackage, OTPublisherViewNativePackageund OTSubscriberViewNativePackage Pakete. Ändern Sie dazu die Datei MainApplication Datei, indem Sie diese der Liste der Pakete hinzufügen, die von der getPackages() Funktion

   widgets.copy

   override fun getPackages(): List<ReactPackage> =
       PackageList(this).packages.apply {
           add(OTPublisherViewNativePackage())
           add(OTSubscriberViewNativePackage())
           add(OpentokReactNativePackage())
       }
       // ...
   

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.31.0"

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.

• CallKit-API -- Version 2.31.0 des OpenTok iOS SDK hat API-Verbesserungen hinzugefügt, um iOS CallKit zu verwenden, ohne einen eigenen Audiotreiber zu implementieren. Dies ist im React Native SDK nicht implementiert.

• Android ConnectionService API -- Version 2.31.0 des OpenTok Android SDK hat Unterstützung für die Integration von Android ConnectionService hinzugefügt, ohne einen eigenen Audiotreiber zu implementieren. Dies ist im React Native SDK nicht implementiert.

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.