SDK de React Native

El SDK React Native de la API de video de Vonage te permite usar sesiones de video impulsadas por la API de video de Vonage en las aplicaciones que crees para dispositivos Android e iOS. El SDK React Native ofrece las siguientes funcionalidades:

• Conexión a la sesión
• Publicación de flujos en una sesión
• Suscripción a flujos en una sesión

El SDK de React Native está construido sobre el SDK de Android y el SDK de iOS. Para obtener más información, consulte lo siguiente:

• Descripción general del SDK de Android
• Descripción general del SDK de iOS

Los SDK de cliente también están disponibles para web, Android, iOS, Windows, macOS y Linux. Todos los SDK de cliente pueden interactuar entre sí. Puedes obtener más información sobre los aspectos básicos de los clientes, servidores, sesiones y más de Vonage Video en la página web Conceptos básicos de la Video API página.

Las aplicaciones escritas con el SDK 2.31+ de React Native pueden interoperar con aplicaciones escritas con la versión 2.29+ de los SDK de cliente de vídeo:

• OpenTok.js
• SDK para Android
• SDK para iOS
• SDK para Windows
• SDK para Linux
• SDK para macOS

Requisitos previos

1. Instale node.js.
2. Prepare su React Native entorno de desarrollo.
3. Instalar y actualizar Xcode (necesitarás un Mac).
4. Instalar y actualizar Android Studio.

Requisitos del sistema

Dado que el SDK de React Native está construido sobre los SDK de Android e iOS, el SDK para Android y SDK para iOS la documentación dispone de los requisitos pertinentes.

Instalación

1. En su terminal, cambie al directorio de su proyecto React Native.
2. Añada la biblioteca mediante npm o yarn:
   • npm install @vonage/client-sdk-video-react-native
   • yarn add @vonage/client-sdk-video-react-native

Instalación en iOS

1. Instale los pods de iOS:
   widgets.copy

    npx pod-install
   

2. Asegúrese de que ha habilitado el uso de la cámara y el micrófono añadiendo las siguientes entradas a la carpeta Info.plist archivo:

<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. Registre el OTPublisherViewNative y OTSubscriberViewNative clases. Para ello, modifique la directiva AppDelegate aplicación.

   • Si su aplicación tiene un archivo AppDelegate Objective-C++ (AppDelegate.mm), añada estas clases a la lista de paquetes en el NSMutableDictionary devuelto por el comando thirdPartyFabricComponents() función:

        #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 su aplicación utiliza un archivo Swift AppDelegate (AppDelegate.swift), tendrá que tener su implementación de la función RCTAppDelegate.application(_, didFinishLaunchingWithOptions) utiliza un encabezado puente para llamar a un método de un archivo Objective-C++ que llama al método [RCTComponentViewFactory registerComponentViewClass:] pasando el método OTPublisherViewNativeComponentView y OTSubscriberViewNativeComponentView clases.

4. Si su aplicación va a utilizar el OTPublisher.setVideoTransformers() o OTPublisher.setAudioTransformers() necesita incluir lo siguiente en su Podfile:

   widgets.copy

   pod 'VonageClientSDKVideoTransformers', '= 2.31.1'
   

Cuando cree un archivo de su aplicación, el archivo configuración del manifiesto de privacidad exigido por la tienda de aplicaciones de Apple se añaden automáticamente con esta versión del SDK de React Native.

Si intentas archivar la aplicación y falla, haz lo siguiente:

1. Ir a Objetivo.
2. Haga clic en Fases de construcción.
3. En virtud de la Vincular binarios con bibliotecas elimine libOpenTokReactNative.a y añádelo de nuevo.

Instalación en Android

1. En su terminal, cambie al directorio de su proyecto.

2. Ejecutar bundle install.

3. Asegúrate de lo siguiente en el gradle de tu aplicación compileSdkVersion, buildToolsVersion, minSdkVersiony targetSdkVersion son mayores o iguales que las versiones especificadas en la biblioteca React Native.

4. El SDK añade automáticamente los permisos de Android que requiere. No es necesario que los añada al manifiesto de su aplicación. Sin embargo, algunos permisos requieren que se lo solicite al usuario. Consulte la sección lista completa de permisos necesarios en la documentación de Vonage Video API Android SDK.

5. En el archivo MainActivity.kt de su aplicación, registre el archivo OpentokReactNativePackage, OTPublisherViewNativePackagey OTSubscriberViewNativePackage paquetes. Para ello, modifique la directiva MainApplication añadiéndolos a la lista de paquetes devuelta por la función getPackages() función

   widgets.copy

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

6. Si su aplicación va a utilizar el OTPublisher.setVideoTransformers() o OTPublisher.setAudioTransformers() necesita incluir lo siguiente en su archivo app/build.gradle:

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

Puesta de sol en Bintray

El soporte de Bintray ha finalizado (anuncio oficial: https://jfrog.com/blog/into-the-sunset-bintray-jcenter-gocenter-and-chartcenter/). En el archivo build.gradle de su aplicación debe eliminar la referencia a jcenter y sustituirlo por mavenCentral. Ejemplo:

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

Funciones no compatibles

La biblioteca React Native proporciona una interfaz React para utilizar los SDK de cliente de Android e iOS. Las siguientes funciones avanzadas de los SDK de cliente de Android e iOS no son compatibles con la biblioteca React Native:

• Controladores de audio personalizados -- Una aplicación que utiliza React Native usa el micrófono del dispositivo para capturar audio y transmitirlo a un stream publicado. Y utiliza los altavoces (o auriculares) del dispositivo para reproducir el audio de los flujos suscritos. Sin embargo, puedes establecer la propiedad enableStereoOutput del objeto OTSession para habilitar la salida estéreo.

• Capturadoras de vídeo personalizadas -- (BaseVideoCapturer) -- El OTPublisher de React Native utiliza el capturador de vídeo estándar que utiliza vídeo directamente de la cámara del dispositivo. Sin embargo, puedes establecer la propiedad videoSource de un componente OTPublisher a "screen" para publicar un flujo de pantalla compartida.

• Renderizadores de vídeo personalizados -- Los componentes OTSubscriber y OTPublisher implementan un renderizador de vídeo estándar que renderiza los flujos y proporciona controles de interfaz de usuario para mostrar el nombre del flujo y silenciar el micrófono o la cámara. Los editores y suscriptores utilizan mPublisher.setStyle(BaseVideoRenderer.STYLE_VIDEO_SCALE, BaseVideoRenderer.STYLE_VIDEO_FILL)

• Cola de devolución de llamada de delegado de iOS -- Para iOS, no se puede asignar la cola de devolución de llamada de delegado (la cola GCD). Consulte la documentación de OTSession.apiQueue en el SDK de iOS.

• API CallKit -- La versión 2.31.0 del OpenTok iOS SDK añadió mejoras en la API para utilizar iOS CallKit sin implementar un controlador de audio personalizado. Esto no está implementado en el SDK de React Native.

• API Android ConnectionService -- La versión 2.31.0 del OpenTok Android SDK añadió soporte para integrar Android ConnectionService sin implementar un controlador de audio personalizado. Esto no está implementado en el SDK de React Native.

Para crear aplicaciones para Android e iOS que utilicen estas funciones, utilice la función SDK para Android y el SDK para iOS.

Ejemplos de aplicaciones

Para ver esta biblioteca en acción, visite la página Repo de Vonage-react-native-samples.

Más información

Para obtener una lista de las nuevas funciones y los problemas conocidos, consulte la página notas de la versión.