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 se basa en el SDK de Android y el SDK de iOS. Para obtener más información, consulta lo siguiente:

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

También hay disponibles SDK de cliente 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 conceptos básicos de los clientes, servidores y sesiones de Vonage Video, entre otros, en la Conceptos básicos de la Video API página.

Las aplicaciones desarrolladas con el SDK de React Native 2.33 o superior pueden interoperar con aplicaciones desarrolladas con la versión 2.31 o superior de los Client SDK de vídeo:

• OpenTok.js
• SDK de Android
• SDK para iOS
• SDK de Windows
• SDK para Linux
• SDK de 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 de Android y SDK para iOS La documentación debe cumplir los requisitos pertinentes.

Instalación

Instalación mediante paquetes de GitHub

Además de instalarlos desde el registro de npm, los paquetes del Vonage Client SDK para la Video API también están disponibles a través de Registro NPM de los paquetes de GitHub. Esto ofrece un canal de distribución alternativo para entornos empresariales que requieren una gestión de paquetes basada en GitHub.

Paquetes disponibles

El siguiente paquete está publicado en GitHub Packages:

• @vonage/client-sdk-video-react-native - Disponible en Paquetes de GitHub (Vonage org)

Instrucciones de instalación

Para instalar paquetes desde el registro NPM de GitHub Packages, debes configurar npm para que se autentique con GitHub:

1. Crear un token de acceso personal (PAT) de GitHub

Genera un token de acceso personal con read:packages scope desde la configuración de tu cuenta de GitHub.

2. Configura tu .npmrc archivo

Añada la siguiente configuración a la carpeta .npmrc o su archivo ~/.npmrc archivo:

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

Sustituir YOUR_GITHUB_TOKEN con tu token de acceso personal de GitHub.

3. Instalar el paquete

Una vez configurado, puede instalar el paquete utilizando el comando estándar npm install como se explica a continuación.

Nota sobre la disponibilidad de los paquetes

Tanto el registro npm tradicional como el registro de paquetes de GitHub se mantienen sincronizados. Puedes elegir cualquiera de los dos métodos de distribución en función de las preferencias de gestión de paquetes de tu organización. El método tradicional de instalación de npm (a través de npm install @vonage/client-sdk-video-react-native (desde el registro predeterminado) sigue siendo totalmente compatible y no requiere ninguna configuración adicional.

Para obtener más información sobre cómo trabajar con el registro NPM de los paquetes de GitHub, consulta la sección Documentación de los paquetes de GitHub.

Para proyectos de la Expo

Si utilizas Expo, la configuración se simplifica gracias al plugin de configuración:

1. Instala el paquete:

2. Añada el plugin a su app.json o 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"
        }
      ]
    ]
  }
}

Opciones de configuración del plugin iOS:

3. Reconstruye tu aplicación:

Lo que el plugin de configuración hace automáticamente:

Añade los permisos de cámara y micrófono de iOS a Info.plist
Añade todos los permisos de Android necesarios a AndroidManifest.xml:

• BLUETOOTH
• REQUEST_IGNORE_BATTERY_OPTIMIZATIONS
• BLUETOOTH_CONNECT
• BROADCAST_STICKY
• CAMERA
• INTERNET
• MODIFY_AUDIO_SETTINGS
• READ_PHONE_STATE
• RECORD_AUDIO
• ACCESS_NETWORK_STATE

Configura las características de hardware para Android

Sin necesidad de configuración nativa manual. Si utilizas Expo con el complemento de configuración, puedes saltarte las secciones «Instalación en iOS» e «Instalación en Android» que aparecen a continuación.

Para proyectos React Native CLI

En su terminal, cambie al directorio de su proyecto React Native.

Añade la biblioteca mediante npm:

Nota: Sustituir <VERSION> junto con la versión de destino que se va a utilizar.

Después de instalar el paquete, continúe con las secciones Instalación en iOS e Instalación en Android a continuación.

Instalación en iOS

1. Instala los pods de iOS:
   Copia

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

   • Si tu aplicación tiene un archivo AppDelegate en Objective-C++ (AppDelegate.mm), añade estas clases a la lista de paquetes del NSMutableDictionary devuelto por el 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. También tendrá que añadir la ruta del encabezado puente en los ajustes de compilación del proyecto en Xcode, en Objective-C Bridging Header.

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

   Copia

   pod 'VonageClientSDKVideoTransformers', '= 2.33.0'
   

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 no funciona, haz lo siguiente:

1. Ir a Objetivo.
2. Haz clic Fases de construcción.
3. En virtud de la Enlazar el binario con las bibliotecas sección, eliminar libOpenTokReactNative.a y añádelo de nuevo.

Instalación en Android

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

2. Correr 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 tu aplicación, importa y registra el OpentokReactNativePackage, OTRNPublisherPackagey OTRNSubscriberPackage paquetes. Para ello, modifique la directiva MainApplication añadiéndolos a la lista de paquetes devuelta por la función getPackages() función

   Copia

//... 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 tu 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.33.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 de 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 emplea el micrófono del dispositivo para capturar audio y transmitirlo a una transmisión publicada. Además, utiliza los altavoces del dispositivo (o los auriculares) para reproducir el audio de las transmisiones a las que está suscrita. No obstante, puedes configurar la propiedad `enableStereoOutput` del objeto `OTSession` para habilitar la salida estéreo.

• Capturadores de vídeo personalizados -- (BaseVideoCapturer) -- El OTPublisher de React Native utiliza el capturador de vídeo estándar, que toma el vídeo directamente de la cámara del dispositivo. Sin embargo, puedes establecer la propiedad «videoSource» de un componente OTPublisher en «screen» para publicar una transmisión compartida de pantalla.

• Motores de renderizado 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 llamadas de retorno de los delegados 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 de 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 de 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 consultar la lista de nuevas funciones y problemas conocidos, consulta el notas de la versión.