OpenTok React Native

Mit dem OpenTok React Native SDK können Sie Videositzungen, die auf der Vonage Video API basieren, in Apps nutzen, die Sie für Android- und iOS-Geräte entwickeln.

Das OpenTok React Native SDK basiert auf dem OpenTok Android SDK und dem OpenTok iOS SDK. Weitere Informationen finden Sie hier:

Wichtige Hinweise

Unterstützung für Android 17: Die Version 2.34.0 wurde auf Android-17-Geräten getestet. Es sind keine Aktualisierungen der Projektkonfiguration erforderlich.
Unterstützung für React Native 0.86: Version 2.34.0 des OpenTok React Native SDK bietet nun Unterstützung für React Native 0.86.
Wichtiger Hinweis für TypeScript-Entwickler: Version 2.33.0 behebt die in Version 2.31.1 eingeführte fehlerhafte TypeScript-Unterstützung. Diese Änderung führt keine funktionalen Änderungen am SDK ein. Nach dem Upgrade muss Ihre Anwendung jedoch möglicherweise Typisierungsprobleme beheben, die zuvor aufgrund der fehlenden Typdefinitionen verborgen waren. Wir empfehlen dringend, Ihre Codebasis auf TypeScript-Fehler zu überprüfen, die nach einem Upgrade auf Version 2.33.0 oder höher auftreten.
Unterstützung der neuen Architektur: Ab der Version 2.31 wird das Vonage Video API React Native SDK mit dem React Native neue Architektur. Diese Version erfordert React Native 0.81.1 oder höher und ist nur mit der neuen Architektur kompatibel. Sie wird von älteren React Native-Versionen, die die Legacy-Architektur verwenden, nicht unterstützt. Applications, die derzeit ältere Versionen dieses SDKs verwenden, müssen vor dem Upgrade auf die neue Architektur von React Native migrieren. Bitte stellen Sie sicher, dass Sie die Installationsanweisungen unten befolgen.

Interoperabilität

Apps, die mit dem OpenTok React Native SDK 2.34+ erstellt wurden, sind mit OpenTok-Apps kompatibel, die mit Version 2.32+ der OpenTok-Client SDKs erstellt wurden:

OpenTok.js
OpenTok Android SDK
OpenTok iOS-SDK
OpenTok Windows SDK
OpenTok macOS SDK
OpenTok Linux-SDK
OpenTok React Native SDK

Voraussetzungen

Installieren Sie node.js
Installieren und aktualisieren Xcode (Sie benötigen einen Mac). (Siehe die React Native iOS-Installation Anweisungen.)
Installieren und aktualisieren Android-Studio. (Siehe die React Native-Installation für Android Anweisungen.)

Einrichtung

Installation über GitHub-Pakete

Die Vonage Video API Client SDK-Pakete können nicht nur über die npm-Registrierung installiert werden, sondern sind auch über NPM-Registrierung von GitHub-Paketen. Dies bietet einen alternativen Verteilungskanal für Unternehmensumgebungen, die eine GitHub-basierte Paketverwaltung erfordern.

Verfügbare Pakete

Das folgende Paket ist auf GitHub Packages veröffentlicht:

@opentok/opentok-react-native - Verfügbar unter GitHub Packages (Opentok org)

Anweisungen zur Einrichtung

Um Pakete aus der NPM-Registry von GitHub Packages zu installieren, müssen Sie npm für die Authentifizierung bei GitHub konfigurieren:

1. Erstellen Sie ein GitHub Personal Access Token (PAT)

Erzeugen Sie ein persönliches Zugangs-Token mit read:packages Bereich in den Einstellungen Ihres GitHub-Accounts.

2. Konfigurieren Sie Ihr .npmrc Datei

Fügen Sie die folgende Konfiguration zu Ihrem Projekt hinzu .npmrc Datei oder Ihre Benutzerebene ~/.npmrc Datei:

//npm.pkg.github.com/:_authToken=YOUR_GITHUB_TOKEN
@opentok:registry= https://npm.pkg.github.com

Ersetzen Sie YOUR_GITHUB_TOKEN mit Ihrem persönlichen GitHub-Zugangs-Token.

3. Installieren Sie das Paket

Nach der Konfiguration können Sie das Paket mit dem Standardbefehl npm install wie unten beschrieben installieren.

Hinweis zur Verfügbarkeit von Paketen

Sowohl die traditionelle npm-Registrierung als auch die GitHub-Paketregistrierung werden synchronisiert. Sie können je nach den Präferenzen Ihrer Organisation für die Paketverwaltung eine der beiden Verteilungsmethoden wählen. Die traditionelle npm-Installationsmethode (über npm install opentok-react-native aus der Standardregistrierung) wird weiterhin vollständig unterstützt und erfordert keine zusätzliche Konfiguration.

Weitere Informationen zur Arbeit mit der NPM-Registry von GitHub Packages finden Sie in der GitHub Pakete Dokumentation.

Für Expo-Projekte

Wenn Sie Expo verwenden, wird die Einrichtung durch das Konfigurations-Plugin vereinfacht:

1. Installieren Sie das Paket:

npx expo install @opentok/opentok-react-native

2. Fügen Sie das Plugin zu Ihrem `app.json` oder `app.config.js`:

{
  "expo": {
    "plugins": [
      [
        "opentok-react-native",
        {
          "cameraPermission": "Allow $(PRODUCT_NAME) to use your camera for video calls",
          "microphonePermission": "Allow $(PRODUCT_NAME) to use your microphone for audio calls"
        }
      ]
    ]
  }
}

Plugin iOS Konfigurationsoptionen:

Option	Typ	Standard	Beschreibung
`cameraPermission`	String	"Erlaube $(PRODUCT_NAME) den Zugriff auf deine Kamera für Videoanrufe"	iOS Kamerazulassungsmeldung (NSCameraUsageDescription)
`microphonePermission`	String	"Erlaube $(PRODUCT_NAME) den Zugriff auf dein Mikrofon für Audioanrufe"	iOS-Mikrofonerlaubnismeldung (NSMicrophoneUsageDescription)

3. Bauen Sie Ihre Anwendung neu auf:

npx expo prebuild npx expo run:ios # or npx expo run:android

Was das Konfigurations-Plugin automatisch macht:

Fügt iOS Kamera- und Mikrofonberechtigungen zur Info.plist hinzu
Fügt alle erforderlichen Android-Berechtigungen zu AndroidManifest.xml hinzu:

BLUETOOTH
REQUEST_IGNORE_BATTERY_OPTIMIZATIONS
BLUETOOTH_CONNECT
BROADCAST_STICKY
CAMERA
INTERNET
MODIFY_AUDIO_SETTINGS
READ_PHONE_STATE
RECORD_AUDIO
ACCESS_NETWORK_STATE

Konfiguriert Hardware-Funktionen für Android

Keine manuelle native Konfiguration erforderlich! Wenn Sie Expo mit dem Konfigurations-Plugin verwenden, können Sie die Abschnitte iOS-Installation und Android-Installation unten überspringen.

Für React Native CLI-Projekte

Wechseln Sie in Ihrem Terminal in das Verzeichnis Ihres React Native-Projekts.

Fügen Sie die Bibliothek mit npm oder yarn hinzu:

npm install @opentok/opentok-react-native@<VERSION>

Anmerkung: Ersetzen Sie <VERSION> mit der zu verwendenden Zielversion.

Fahren Sie nach der Installation des Pakets mit den Abschnitten zur iOS-Installation und Android-Installation fort.

iOS-Installation

Installieren Sie die iOS-Pods:
Kopieren
```
 npx pod-install
```
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>

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. Sie müssen auch den Pfad für den Bridging Header in den Build-Einstellungen des Projekts in Xcode unter Objective-C Bridging Header hinzufügen.

Wenn Ihre Anwendung die OTPublisher.setVideoTransformers() oder OTPublisher.setAudioTransformers() Methode zu verwenden, müssen Sie Folgendes in Ihr Podfile aufnehmen:
Kopieren
```
pod 'VonageClientSDKVideoTransformers', '= 2.34.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:

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

Android-Installation

Wechseln Sie in Ihrem Terminal in Ihr Projektverzeichnis.
ausführen. bundle install.
Stellen Sie sicher, dass in der gradle-Datei Ihrer Anwendung compileSdkVersion, buildToolsVersion, minSdkVersionund targetSdkVersion sind größer oder gleich den in der OpenTok React Native-Bibliothek angegebenen Versionen.
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.

Importieren und registrieren Sie in der Datei „MainApplication.kt“ Ihrer App die OpentokReactNativePackage, OTRNPublisherPackageund OTRNSubscriberPackage Pakete. Ändern Sie dazu die Datei MainApplication Datei, indem Sie diese der Liste der Pakete hinzufügen, die von der getPackages() Funktion:

import com.opentokreactnative.OTRNPublisherPackage
import com.opentokreactnative.OTRNSubscriberPackage
import com.opentokreactnative.OpentokReactNativePackage;

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

Wenn Ihre Anwendung die OTPublisher.setVideoTransformers() oder OTPublisher.setAudioTransformers() Methode zu verwenden, müssen Sie Folgendes in Ihre app/build.gradle-Datei aufnehmen:
Kopieren
```
implementation "com.vonage:client-sdk-video-transformers:2.34.0"
```

Systemanforderungen

Die Systemanforderungen für das OpenTok Android SDK und OpenTok iOS-SDK. (Das OpenTok React Native SDK stellt für Android und iOS dieselben Anforderungen.)

Bauen lernen

Um mit der Entwicklung mit dem OpenTok React Native SDK zu beginnen, sehen Sie sich die Beispielanwendungen und verweisen auf die API-Referenz Weitere Informationen zu den verfügbaren Klassen und Methoden finden Sie hier.

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 -- Unter iOS können Sie die Delegate-Callback-Warteschlange (die GCD-Warteschlange) nicht zuweisen. Weitere Informationen finden Sie in der Dokumentation zur Eigenschaft „OTSession.apiQueue“ im iOS-SDK.
CallKit-API -- Mit Version 2.31.0 des iOS SDK wurden API-Erweiterungen hinzugefügt, die die Nutzung von iOS CallKit ohne Implementierung eines benutzerdefinierten Audiotreibers ermöglichen. Dies ist im React Native SDK nicht implementiert.
Android ConnectionService API -- Mit Version 2.31.0 des Android SDK wurde die Unterstützung für die Integration von Android ConnectionService ohne Implementierung eines benutzerdefinierten Audiotreibers hinzugefügt. Dies ist im React Native SDK nicht implementiert.

Code-Muster

Für Beispielcode besuchen Sie unsere Repo „vonage-video-React-native-sdk-samples“ auf GitHub.

Dokumentation und weitere Informationen

Siehe die OpenTok React Native SDK – API-Referenz für React und die OpenTok-Entwicklerhandbücher.

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