SDK React Native

Le SDK React Native de l'API Video de Vonage vous permet d'utiliser des sessions vidéo alimentées par l'API Video de Vonage dans les applications que vous créez pour les appareils Android et iOS. Le SDK React Native offre les fonctionnalités suivantes :

• Connexion à la session
• Publication de flux dans une session
• S'abonner à des flux dans une session

Le SDK React Native est construit au-dessus du SDK Android et du SDK iOS. Pour plus de détails, voir ce qui suit :

• Aperçu du SDK Android
• Aperçu du SDK iOS

Des SDK clients sont également disponibles pour le web, Android, iOS, Windows, macOS et Linux. Tous les SDK clients peuvent interagir les uns avec les autres. Vous pouvez en apprendre davantage sur les principes de base des clients, serveurs, sessions et autres de Vonage Video sur le site Web de Vonage Video. Les bases de Video API page.

Remarques importantes

• Prise en charge de React Native 0.87 : La version 2.35.0 du SDK OpenTok pour React Native prend désormais en charge React Native 0.87 et nécessite désormais React Native 0.87 ou une version ultérieure.
• Cible minimale de déploiement pour iOS 17.0 : La version 2.35.0 fait passer la version minimale d'iOS ciblée à 17.0. Les applications ciblant des versions d'iOS antérieures à la version 17.0 doivent mettre à jour leur version ciblée avant de procéder à la mise à niveau.
• Android : version 37 du SDK de compilation requise : La version 2.35.0 nécessite compileSdkVersion 37 pour Android. Assurez-vous que votre projet Android compileSdkVersion est défini sur 37 ou plus.
• Prise en charge d'iOS 27 : La version 2.35.0 a été validée sur les appareils fonctionnant sous iOS 27.
• Prise en charge d'Android 17 : Les versions 2.34.0 et ultérieures ont été validées 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 avec le SDK React Native 2.35 ou une version ultérieure peuvent fonctionner conjointement avec celles développées avec la version 2.33 ou une version ultérieure des Client SDK vidéo :

• OpenTok.js (Web)
• SDK Android
• SDK iOS
• SDK Windows
• SDK macOS
• SDK Linux
• SDK React Native

Conditions préalables

1. Installer node.js.
2. Préparer votre React Native environnement de développement.
3. Installation et mise à jour Xcode (vous aurez besoin d'un Mac).
4. Installation et mise à jour Android Studio.

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 :

• @vonage/client-sdk-video-react-native - Disponible à l'adresse suivante Paquets GitHub (Vonage 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
@vonage: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 @vonage/client-sdk-video-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 :

2. Ajoutez le plugin à votre app.json ou app.config.js:

{
  "expo": {
    "plugins": [
      [
        "@vonage/client-sdk-video-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 :

3. Reconstruisez votre application :

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 à l'aide de npm :

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

1. Installer les pods iOS :
   Copie

    npx pod-install
   

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

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

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

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

Installation d'Android

1. Dans votre terminal, allez dans le répertoire de votre projet.

2. Exécuter bundle install.

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

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

5. 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 :

   Copie

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

6. 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.35.0"
   

Configuration requise

Étant donné que le SDK React Native est construit au-dessus des SDK Android et iOS, la fonction SDK Android et SDK iOS Les documents de l'UE sont conformes aux exigences en la matière.

Apprendre à construire

Pour commencer à développer avec le SDK Vonage Video 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 de l'API du SDK Video React Native de Vonage.

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