OpenTok React Native

El SDK de OpenTok para React Native te permite utilizar sesiones de vídeo basadas en la Video API de Vonage en las aplicaciones que desarrolles para dispositivos Android e iOS.

Descripción general del SDK
Referencia API
Descargar
Muestras
Notas de publicación

El SDK de OpenTok para React Native se basa en los SDK de OpenTok para Android y iOS. Para obtener más información, consulta lo siguiente:

Notas importantes

Compatibilidad con Android 17: La versión 2.34.0 se ha validado en dispositivos con Android 17. No es necesario actualizar la configuración del proyecto.
Compatibilidad con React Native 0.86: La versión 2.34.0 del SDK de OpenTok para React Native incorpora compatibilidad con React Native 0.86.
Nota importante para los desarrolladores de TypeScript: La versión 2.33.0 corrige el soporte roto de TypeScript introducido en la versión 2.31.1. Este cambio no introduce ninguna modificación funcional en el SDK. Sin embargo, tras la actualización, es posible que su aplicación tenga que solucionar problemas de tipado que antes estaban ocultos debido a la falta de definiciones de tipos. Le recomendamos encarecidamente que revise su código base para detectar cualquier error de TypeScript que aparezca después de actualizar a la versión 2.33.0 o posterior.
Soporte para nuevas arquitecturas: A partir de la versión 2.31, el SDK de React Native de la Video API de Vonage se ha desarrollado con el Nueva arquitectura de React Native. Esta versión requiere React Native 0.81.1 o posterior y solo es compatible con la nueva arquitectura. No es compatible con versiones anteriores de React Native que utilicen la arquitectura heredada. Las aplicaciones que actualmente utilicen versiones anteriores de este SDK deberán migrar a la nueva arquitectura de React Native antes de actualizar. Asegúrate de seguir las instrucciones de instalación que se indican a continuación.

Interoperabilidad

Las aplicaciones desarrolladas con el SDK de OpenTok para React Native 2.34 o superior pueden interoperar con las aplicaciones de OpenTok desarrolladas con la versión 2.32 o superior de los Client SDK de OpenTok:

OpenTok.js
SDK de OpenTok para Android
SDK de OpenTok para iOS
SDK de OpenTok para Windows
SDK de OpenTok para macOS
SDK de OpenTok para Linux
SDK React Native de OpenTok

Requisitos previos

Instale node.js
Instalar y actualizar Xcode (necesitarás un Mac). (Consulta la guía de instalación de React Native para iOS instrucciones.)
Instalar y actualizar Android Studio. (Consulta la instalación de React Native para Android instrucciones.)

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:

@opentok/opentok-react-native - Disponible en GitHub Packages (Opentok 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
@opentok: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 opentok-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:

npx expo install @opentok/opentok-react-native

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

Opciones de configuración del plugin iOS:

Opción	Tipo	Por defecto	Descripción
`cameraPermission`	cadena	"Permitir a $(NOMBRE_PRODUCTO) acceder a su cámara para videollamadas"	Mensaje de permiso de cámara de iOS (NSCameraUsageDescription)
`microphonePermission`	cadena	"Permitir que $(NOMBRE_PRODUCTOR) acceda a su micrófono para llamadas de audio"	Mensaje de permiso del micrófono en iOS (NSMicrophoneUsageDescription)

3. Reconstruye tu aplicación:

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

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 o yarn:

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

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

Instala los pods de iOS:
Copia
```
 npx pod-install
```
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>

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.

Si su aplicación va a utilizar el OTPublisher.setVideoTransformers() o OTPublisher.setAudioTransformers() necesita incluir lo siguiente en su Podfile:
Copia
```
pod 'VonageClientSDKVideoTransformers', '= 2.34.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:

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

Instalación en Android

En su terminal, cambie al directorio de su proyecto.
Correr bundle install.
Asegúrate de lo siguiente en el gradle de tu aplicación compileSdkVersion, buildToolsVersion, minSdkVersiony targetSdkVersion son superiores o iguales a las versiones especificadas en la biblioteca OpenTok para React Native.
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.

En el archivo MainApplication.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:

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 su aplicación va a utilizar el OTPublisher.setVideoTransformers() o OTPublisher.setAudioTransformers() necesita incluir lo siguiente en su archivo app/build.gradle:
Copia
```
implementation "com.vonage:client-sdk-video-transformers:2.34.0"
```

Requisitos del sistema

Consulta los requisitos del sistema para el SDK de OpenTok para Android y SDK de OpenTok para iOS. (El SDK de OpenTok para React Native tiene los mismos requisitos tanto para Android como para iOS.)

Aprender a construir

Para empezar a desarrollar con el SDK de OpenTok para React Native, consulta la ejemplos de solicitudes y consulte el Referencia API para obtener información detallada sobre las clases y los métodos disponibles.

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 -- En iOS, no es posible asignar la cola de devolución de llamada del delegado (la cola de GCD). Consulta la documentación sobre la propiedad `OTSession.apiQueue` del SDK de iOS.
API de CallKit -- La versión 2.31.0 del SDK de iOS incorporó mejoras en la API para utilizar CallKit de iOS sin necesidad de 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 SDK de Android incorporó la compatibilidad para integrar el ConnectionService de Android sin necesidad de implementar un controlador de audio personalizado. Esta función no está implementada en el SDK de React Native.

Muestras de código

Para ver ejemplos de código, visite nuestra página Repositorio «vonage-video-React-native-sdk-samples» en GitHub.

Documentación y más información

Véase el Referencia de la API del SDK de OpenTok para React Native y el Guías para desarrolladores de OpenTok.

Para consultar la lista de nuevas funciones y problemas conocidos, consulta el notas de la versión.