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.

Les apps écrites avec le SDK React Native 2.32+ peuvent interopérer avec les apps écrites avec la version 2.30+ des SDK clients vidéo :

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

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.

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.

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 en utilisant npm ou yarn :

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

    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 :

   widgets.copy

   pod 'VonageClientSDKVideoTransformers', '= 2.32.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 MainActivity.kt de votre application, importez et enregistrez le fichier 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

   widgets.copy

//... 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 le OTPublisher.setVideoTransformers() ou OTPublisher.setAudioTransformers() vous devez inclure les éléments suivants dans votre fichier app/build.gradle :

implementation "com.vonage:client-sdk-video-transformers:2.32.0"

Coucher de soleil à Bintray

La prise en charge de Bintray est terminée (annonce officielle) : https://jfrog.com/blog/into-the-sunset-bintray-jcenter-gocenter-and-chartcenter/). Dans le fichier build.gradle de votre application, vous devez supprimer la référence à jcenter et le remplacer par mavenCentral. Exemple :

// 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' }
    }
}

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 -- Pour iOS, vous ne pouvez pas assigner la file d'attente de rappel du délégué (la file d'attente GCD). Voir la documentation sur la file d'attente OTSession.apiQueue dans le SDK iOS.

• API CallKit -- La version 2.31.0 du SDK OpenTok iOS a ajouté des améliorations à l'API pour utiliser iOS CallKit sans implémenter un pilote audio personnalisé. Ceci n'est pas implémenté dans le SDK React Native.

• API du service de connexion Android -- La version 2.31.0 du SDK Android OpenTok a ajouté la prise en charge de l'intégration du ConnectionService Android sans implémenter un pilote audio personnalisé. Ceci n'est pas implémenté dans le SDK React Native.

Pour créer des applications Android et iOS qui utilisent ces fonctionnalités, utilisez la fonction SDK Android et le SDK iOS.

Exemples d'applications

Pour voir cette bibliothèque en action, consultez la page Repo de Vonage-react-native-samples.

Plus d'informations

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