OpenTok React Native

Le SDK OpenTok pour React Native vous permet d'intégrer des sessions vidéo basées sur la Video API Vonage dans les applications que vous développez pour les appareils Android et iOS.

Le SDK OpenTok pour React Native s'appuie sur les SDK OpenTok pour Android et iOS. Pour plus d'informations, consultez les ressources suivantes :

Remarques importantes

Prise en charge d'Android 17 : La version 2.34.0 a été validée sur les appareils Android 17. Aucune mise à jour de la configuration du projet n'est nécessaire.
Prise en charge de React Native 0.86 : La version 2.34.0 du SDK OpenTok pour React Native prend désormais en charge React Native 0.86.
Note importante pour les développeurs TypeScript : La version 2.33.0 corrige la mauvaise prise en charge de TypeScript introduite dans la version 2.31.1. Cette modification n'introduit aucun changement fonctionnel dans le SDK. Cependant, après la mise à niveau, votre application peut avoir besoin de résoudre des problèmes de typage qui étaient auparavant cachés en raison des définitions de type manquantes. Nous vous recommandons vivement d'examiner votre base de code pour détecter toute erreur TypeScript apparaissant après la mise à niveau vers la version 2.33.0 ou une version ultérieure.
Prise en charge des nouvelles architectures : À partir de la version 2.31, le SDK React Native de l'API Video de Vonage est construit avec l'outil de développement de l'API Video de Vonage. Nouvelle architecture React Native. Cette version nécessite React Native 0.81.1 ou une version ultérieure et n'est compatible qu'avec la nouvelle architecture. Elle n'est pas prise en charge par les anciennes versions de React Native utilisant l'ancienne architecture. Les applications qui utilisent actuellement des versions plus anciennes de ce SDK devront migrer vers la nouvelle architecture de React Native avant de procéder à la mise à niveau. Veillez à suivre les instructions d'installation ci-dessous.

Interopérabilité

Les applications développées à l'aide du SDK OpenTok React Native 2.34 ou une version ultérieure peuvent interagir avec les applications OpenTok développées à l'aide de la version 2.32 ou une version ultérieure des Client SDK OpenTok :

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

Conditions préalables

Installer node.js
Installation et mise à jour Xcode (vous aurez besoin d'un Mac). (Voir la procédure d'installation de React Native pour iOS instructions.)
Installation et mise à jour Android Studio. (Voir la procédure d'installation de React Native sur Android instructions.)

Installation

Installation via les paquets GitHub

En plus de l'installation à partir du registre npm, les paquets du Client Video API SDK de Vonage sont également disponibles par le biais de Registre NPM des paquets GitHub. Il s'agit d'un canal de distribution alternatif pour les environnements d'entreprise qui nécessitent une gestion des paquets basée sur GitHub.

Packages disponibles

Le paquet suivant est publié sur GitHub Packages :

@opentok/opentok-react-native - Disponible à l'adresse suivante GitHub Packages (Opentok org)

Instructions d'installation

Pour installer des paquets à partir du registre NPM de GitHub Packages, vous devez configurer npm pour qu'il s'authentifie auprès de GitHub :

1. Créer un jeton d'accès personnel GitHub (PAT)

Générer un jeton d'accès personnel avec read:packages dans les paramètres de votre compte GitHub.

2. Configurez votre .npmrc fichier

Ajoutez la configuration suivante au fichier .npmrc ou votre fichier ~/.npmrc fichier :

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

Remplacer YOUR_GITHUB_TOKEN avec votre jeton d'accès personnel GitHub.

3. Installer le paquet

Une fois configuré, vous pouvez installer le paquet à l'aide de la commande npm install standard, comme expliqué ci-dessous.

Note sur la disponibilité des paquets

Le registre traditionnel de npm et le registre des paquets de GitHub sont synchronisés. Vous pouvez choisir l'une ou l'autre méthode de distribution en fonction des préférences de votre organisation en matière de gestion des paquets. La méthode d'installation traditionnelle de npm (via npm install opentok-react-native à partir du registre par défaut) reste entièrement pris en charge et ne nécessite aucune configuration supplémentaire.

Pour plus d'informations sur l'utilisation du registre NPM de GitHub Packages, voir la section Documentation sur les paquets GitHub.

Pour les projets Expo

Si vous utilisez Expo, l'installation est simplifiée grâce au plugin de configuration :

1. Installez le paquet :

npx expo install @opentok/opentok-react-native

2. Ajoutez le plugin à votre `app.json` ou `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"
        }
      ]
    ]
  }
}

Options de configuration du plugin iOS :

Option	Type	Défaut	Description
`cameraPermission`	chaîne de caractères	"Autoriser $(PRODUCT_NAME) à accéder à votre caméra pour les appels vidéo"	Message d'autorisation de l'appareil photo iOS (NSCameraUsageDescription)
`microphonePermission`	chaîne de caractères	"Autoriser $(PRODUCT_NAME) à accéder à votre microphone pour les appels audio"	Message d'autorisation du microphone iOS (NSMicrophoneUsageDescription)

3. Reconstruisez votre application :

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

Ce que le plugin de configuration fait automatiquement :

Ajoute les permissions de l'appareil photo et du microphone d'iOS à Info.plist
Ajoute toutes les autorisations Android requises à AndroidManifest.xml :

BLUETOOTH
REQUEST_IGNORE_BATTERY_OPTIMIZATIONS
BLUETOOTH_CONNECT
BROADCAST_STICKY
CAMERA
INTERNET
MODIFY_AUDIO_SETTINGS
READ_PHONE_STATE
RECORD_AUDIO
ACCESS_NETWORK_STATE

Configure les caractéristiques matérielles pour Android

Aucune configuration native manuelle n'est nécessaire ! Lorsque vous utilisez Expo avec le plugin de configuration, vous pouvez ignorer les sections Installation iOS et Installation Android ci-dessous.

Pour les projets React Native CLI

Dans votre terminal, entrez dans le répertoire de votre projet React Native.

Ajoutez la bibliothèque en utilisant npm ou yarn :

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

Remarque : Remplacer <VERSION> avec la version cible à utiliser.

Après avoir installé le paquet, continuez avec les sections Installation iOS et Installation Android ci-dessous.

Installation iOS

Installer les pods iOS :
Copie
```
 npx pod-install
```
Assurez-vous d'avoir activé l'utilisation de la caméra et du microphone en ajoutant les entrées suivantes au fichier Info.plist fichier :

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

Enregistrer le OTPublisherViewNative et OTSubscriberViewNative classes. Pour ce faire, modifiez le fichier AppDelegate la mise en œuvre.
- Si votre application possède un fichier Objective-C++ AppDelegate (AppDelegate.mm), ajoutez ces classes à la liste des paquets dans le NSMutableDictionary renvoyé par la fonction thirdPartyFabricComponents() fonction :

        #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

Si votre application utilise un fichier Swift AppDelegate (AppDelegate.swift), vous devrez avoir son implémentation de la fonction RCTAppDelegate.application(_, didFinishLaunchingWithOptions) utilise un en-tête de transition pour appeler une méthode dans un fichier Objective-C++ qui appelle la méthode [RCTComponentViewFactory registerComponentViewClass:] en passant par la méthode OTPublisherViewNativeComponentView et OTSubscriberViewNativeComponentView classes. Vous devrez également ajouter le chemin de l'en-tête de transition dans les paramètres de construction du projet dans Xcode, sous Objective-C Bridging Header.

Si votre application utilise la fonction OTPublisher.setVideoTransformers() ou OTPublisher.setAudioTransformers() vous devez inclure les éléments suivants dans votre fichier Podfile :
Copie
```
pod 'VonageClientSDKVideoTransformers', '= 2.34.0'
```

Lorsque vous créez une archive de votre application, le fichier les paramètres du manifeste de confidentialité requis par l'App Store d'Apple sont ajoutées automatiquement avec cette version du SDK React Native.

Si vous essayez d'archiver l'application et que l'opération échoue, procédez comme suit :

Aller à Cible.
Cliquez sur Phases de construction.
En vertu de la Lier des binaires à des bibliothèques supprimer libOpenTokReactNative.a et l'ajouter à nouveau.

Installation d'Android

Dans votre terminal, allez dans le répertoire de votre projet.
Exécuter bundle install.
Assurez-vous que les éléments suivants sont présents dans le gradle de votre application compileSdkVersion, buildToolsVersion, minSdkVersionet targetSdkVersion sont supérieures ou égales aux versions spécifiées dans la bibliothèque OpenTok React Native.
Le SDK ajoute automatiquement les autorisations Android dont il a besoin. Vous n'avez pas besoin de les ajouter au manifeste de votre application. Toutefois, pour certaines autorisations, vous devez demander à l'utilisateur de le faire. Voir la section liste complète des autorisations requises dans la documentation du SDK Android Video API de Vonage.

Dans le fichier MainApplication.kt de votre application, importez et enregistrez le OpentokReactNativePackage, OTRNPublisherPackageet OTRNSubscriberPackage des paquets. Pour ce faire, modifiez le fichier MainApplication en les ajoutant à la liste des paquets renvoyés par la commande getPackages() fonction :

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())
    }
    // ...

Si votre application utilise la fonction OTPublisher.setVideoTransformers() ou OTPublisher.setAudioTransformers() vous devez inclure les éléments suivants dans votre fichier app/build.gradle :
Copie
```
implementation "com.vonage:client-sdk-video-transformers:2.34.0"
```

Configuration requise

Consultez la configuration système requise pour le SDK OpenTok pour Android et SDK OpenTok pour iOS. (Le SDK OpenTok pour React Native présente les mêmes exigences pour Android et iOS.)

Apprendre à construire

Pour commencer à développer avec le SDK OpenTok pour React Native, consultez le exemples d'applications et consulter le Référence API pour obtenir des informations détaillées sur les classes et les méthodes disponibles.

Fonctionnalités non prises en charge

La bibliothèque React Native fournit une interface React pour l'utilisation des SDK clients Android et iOS. Les fonctionnalités avancées suivantes des SDK clients Android et iOS ne sont pas prises en charge par la bibliothèque React Native :

Pilotes audio personnalisés -- Une application utilisant React Native utilise le microphone de l'appareil pour capturer de l'audio à transmettre à un flux publié. Elle utilise également les haut-parleurs (ou le casque) de l'appareil pour lire l'audio des flux souscrits. Cependant, vous pouvez définir la propriété enableStereoOutput de l'objet OTSession pour activer la sortie stéréo.
Capteurs vidéo personnalisés -- (BaseVideoCapturer) -- L'OTPublisher React Native utilise le capteur vidéo standard qui utilise la vidéo directement à partir de la caméra de l'appareil. Cependant, vous pouvez définir la propriété videoSource d'un composant OTPublisher sur "screen" pour publier un flux de partage d'écran.
Rendu vidéo personnalisé -- Les composants OTSubscriber et OTPublisher mettent en œuvre un moteur de rendu vidéo standard qui restitue les flux et fournit des commandes d'interface utilisateur pour afficher le nom du flux et mettre en sourdine le microphone ou la caméra. Les éditeurs et les abonnés utilisent mPublisher.setStyle(BaseVideoRenderer.STYLE_VIDEO_SCALE, BaseVideoRenderer.STYLE_VIDEO_FILL)
File d'attente des délégués iOS -- Sous iOS, il n'est pas possible d'attribuer la file d'attente de rappel du délégué (la file d'attente GCD). Consultez la documentation relative à la propriété `OTSession.apiQueue` dans le SDK iOS.
API CallKit -- La version 2.31.0 du SDK iOS a apporté des améliorations à l'API permettant d'utiliser CallKit d'iOS sans avoir à implémenter de pilote audio personnalisé. Cette fonctionnalité n'est pas implémentée dans le SDK React Native.
API du service de connexion Android -- La version 2.31.0 du SDK Android a ajouté la prise en charge de l'intégration d'Android ConnectionService sans avoir à implémenter de pilote audio personnalisé. Cette fonctionnalité n'est pas implémentée dans le SDK React Native.

Échantillons de code

Pour obtenir un exemple de code, visitez notre site dépôt « vonage-video-React-native-sdk-samples » sur GitHub.

Documentation et informations complémentaires

Voir le Référence API du SDK OpenTok pour React Native et le Guides du développeur OpenTok.

Pour une liste des nouvelles fonctionnalités et des problèmes connus, voir la page notes de mise à jour.