Cómo construir una aplicación de chat de video React Native con Sendbird Calls
Recientemente lanzamos nuestro nuevo SDK React Native, que hace que sea más fácil que nunca agregar chat a sus aplicaciones. Tenga en cuenta que este tutorial es una solución alternativa que ya no necesita.
Para comenzar a crear llamadas, descargue nuestro nuevo SDK y aplicaciones de muestra para direct para obtener más información. ! ¡Feliz edificio de llamadas! 📞blog para obtener orientación adicional y el documentos en GitHub! Consulte los código de inicio rápido para experimentar Sendbird. Llamadas: ¡puede que también te resulte útil el Android y iOS. También puedes descargar las aplicaciones de demostración para llamadas grupales y
Introducción
Este artículo demuestra cómo implementar Llamadas Sendbird dentro de una aplicación React Native. Al final de este tutorial, aprenderá cómo llamar a otro usuario y recibir llamadas entrantes con las notificaciones automáticas habilitadas tanto para Android como para iOS.
Hay dos soluciones cubiertas en este tutorial, las cuales utilizan un componente WebView para WebRTC comunicación.
- WebView con servidor remoto
- WebView con servidor local
La solución de servidor remoto es ideal si ya aloja una aplicación web que implementa Sendbird Calls, ya que puede vincularla desde la aplicación React Native.
La solución de servidor local (2) es la solución de mantenimiento más fácil y la que tendrá la experiencia de desarrollo más rápida y amigable, ya que tendrá todos los archivos físicos en un proyecto o repositorio.
Antes de pasar a las dos soluciones, que veremos por separado, debemos hacer algunos trabajos preliminares para prepararnos.
Paso 1: Configuración del entorno
Como requisito previo, necesitará una aplicación React Native. Para una configuración rápida, utilice create-react-native-app. Si ya tiene su propia aplicación, puede aplicar los siguientes pasos a su código base.
Nota: el WebView nativo de reacción está obsoleto. Por lo tanto, deberías utilizar react-native-webview en su lugar.
Si está utilizando React Native >= 0.6.x, no se requiere vinculación manual. Simplemente ejecute pod install en el directorio ios después de la instalación. Si está utilizando una versión anterior, consulte la documentación de introducción de React Native Webview.
A continuación, vaya al componente en el que desea representar el archivo <WebView> componente (en este ejemplo, el componente <App>) e inserte el siguiente código:
La propiedad AllowInlineMediaPlayback junto con un parámetro ?playsinline=1 en uri deberían ser verdaderas en iOS. De lo contrario, el vídeo dentro del componente WebView se mostrará en pantalla completa.
Notificaciones push
Si desea incluir notificaciones automáticas, asegúrese de consultar react-native-push-notification para aprender a manejar notificaciones remotas. notificaciones push. Tenga en cuenta que para manejar notificaciones automáticas remotas de llamadas de Sendbird, debe implementar la devolución de llamada onRegister que se llama cuando el Se publica el token de registro. Luego debe pasarlo al servidor Sendbird mediante SendBirdCall.reigsterPushToken() para recibir notificaciones automáticas del servidor Sendbird.
Recuerde que la función SendBirdCall.reigsterPushToken() debe llamarse después de la autenticación.
La devolución de llamada onNotification se llama cada vez que su aplicación recibe una notificación push remota. Esto significa que tienes que decidir si es o no un mensaje de Sendbird. Puede distinguirlos buscando la propiedad sendbird_call del objeto de datos. Si la propiedad está configurada, entonces es un mensaje de Sendbird, por lo que puede pasarlo al SDK de JavaScript para manejarlo correctamente.
Para ver un ejemplo de implementación, consulte el archivo RemotePushController.js.
Vista web de Polyfill
Para que WebView funcione uniformemente en diferentes dispositivos, tendremos que rellenarlo usando react-native-webrtc.
Dentro de su archivo App.js, agregue el siguiente código:
Es importante llamar a la función de derivación lo antes posible.
Tenga en cuenta también que la versión mínima de Android que admite WebView v37 en la que se introdujo WebRTC es Android 5.0 (Lollipop).
Agregar funcionalidad de inicio de sesión
Para la funcionalidad de autenticación básica, agregaremos campos de entrada de texto donde podremos agregar nuestra ID de aplicación, ID de usuario y token de acceso (si corresponde). Dentro de su archivo App.js, agregue lo siguiente:
La variable authQuery contiene información codificada sobre el ID de la aplicación, el ID de usuario y el token de acceso que se utilizará para iniciar sesión en el sitio web representado dentro del componente WebView. Para comprobar cómo se codifica authQuery, consulte los siguientes pasos.
Ahora, agreguemos los ganchos de estado y los detectores de eventos:
En los próximos pasos, veremos las dos opciones que tenemos para el campo uri del componente WebView. Comencemos con WebView con un servidor remoto.
Paso 2a: WebView con servidor remoto
Debe preparar el servidor remoto público para servir la página HTML, incluido el SDK JS de Sendbird Calls. En esta guía, utilizaremos nuestra muestra autohospedada.
Este servidor remoto tiene que servir la página HTML que eventualmente pasa a la vista de llamada. La vista de llamada debe contener <audio> o <vídeo> etiquetas, y las etiquetas deben tener autoPlay, PlaysInline y posiblemente silenciar como propiedades. Consulte la forma mínima de vista de llamada en nuestro repositorio de ejemplo.
Siguiendo la configuración detallada anteriormente, podemos renderizar la aplicación web de muestra desde nuestra aplicación React Native utilizando el componente WebView.
Lo único que se requiere aquí es pasar la URL anterior al campo uri del accesorio fuente de WebView:
Paso 2b: WebView con servidor local (recomendado)
Alternativamente, puede iniciar un servidor local que aloje algunos archivos locales dentro de su proyecto de aplicación React Native. Esto le permite desarrollarse más rápido al tener todos los archivos consolidados en un único proyecto/repositorio. También reduce los costos generales porque no es necesario alojar un sitio web activo para que esto funcione.
Primero, instale react-native-static-server y react-native-fs< /span>.versión apropiada de react-native-fs paquetes. Dependiendo de sus versiones de React Native y Gradle, instale la
Si está utilizando React Native >= 0.6.x, no es necesario realizar la vinculación manual. De lo contrario, ejecute los siguientes comandos:
Luego ejecute el siguiente comando para iOS:
Crear archivos para el servidor local
Agregue un directorio llamado activos/www en la raíz de su proyecto. Aquí es donde irán nuestros artefactos de compilación y serán alojados en nuestro servidor local. Crearemos este servidor local durante los siguientes pasos.
Ahora, para el origen de estos artefactos de compilación, clonaremos este repositorio dentro de una carpeta llamada SendbirdCalls. Dentro de la raíz de nuestro proyecto React Native, ejecute el siguiente comando:
Entonces la estructura de tu proyecto ahora debería verse así:
Finalmente, instale las dependencias y cree el proyecto SendbirdCalls que acabamos de clonar.
Una vez que el comando anterior haya finalizado, debería obtener los artefactos de compilación dentro del directorio <raíz del proyecto>/assets/www/.
Agregar archivos al paquete de iOS
Primero, abre tu proyecto de iOS en Xcode. El proyecto de iOS debe estar ubicado en la raíz de su proyecto React Native en ios/<ProjectName>.xcodeproj.
Luego, haga clic derecho en el directorio superior de su proyecto y seleccione 'Agregar archivos a <ProjectName>'.
Luego seleccione el directorio activos/www dentro de la raíz de su proyecto.
Después de hacer clic en "Agregar", debería ver los activos incluidos en el proyecto de iOS.
Agregar archivos al paquete de Android
Dentro del archivo <raíz del proyecto>/android/app/build.gradle, agregue la siguiente línea para agrupar los archivos del servidor estático en la aplicación de Android:
Luego, si abre el directorio de Android dentro de Android Studio, debería ver el directorio de activos incluido con la aplicación de Android:
Habilite el tráfico de texto sin cifrar en Android
Este paso es importante para acceder al servidor local en localhost. Android de forma predeterminada no permite el tráfico proveniente de localhost; Para habilitar eso, tendremos que configurar algunos parámetros de seguridad de la red.
Para hacer esto, cree un nuevo archivo llamado network_security_config.xml en app/src/main/res/xml e incluya el siguiente código:
Luego, dentro de su archivo app/src/main/AndroidManifest.xml, agregue las siguientes dos líneas:
Ahora repita los pasos anteriores, pero dentro de su directorio de depuración (app/src/debug/res/xml).
Puedes leer más sobre esto en este artículo.
Crear el enlace del servidor local
En este paso, crearemos un enlace useStaticServer que activa un servidor estático local cuando el componente se monta y devuelve su URL para que luego podamos pasarlo al directorio <WebView>. componente.
Para el gancho useStaticServer, cree un archivo StaticServer.js como se muestra a continuación:
Es importante que pases {localOnly: true} al crear un nuevo StaticServer; de lo contrario, el hosting no funcionará en localhost.
Si has seguido todo el tutorial hasta ahora y has clonado este repositorio dentro del directorio SendbirdCalls, también puedes copiar los iconos: aunque esto no es necesario para el propósito de este tutorial. Si desea hacer eso, deberá crear otro directorio antes de copiar los íconos:
Aquí hay una lista completa de los iconos utilizados en este proyecto.
Tenga en cuenta que este servidor estático local se ejecutará en localhost. Si se accede al servidor a través de la IP local de un dispositivo, por ejemplo 192.168.10.1, Sendbird Calls no se inicializará correctamente ya que requiere una conexión HTTPS o debe ejecutarse en localhost.
Finalmente, dentro de su código App.js, agregue las siguientes líneas de código y pase la variable url dentro del accesorio fuente del componente WebView:
Paso 3: Ejecutar la aplicación
Para ejecutar la aplicación, simplemente ejecútela desde la raíz del proyecto npm run android o npm ejecute ios en la terminal para ejecutar la aplicación en un dispositivo real o en un emulador.
Si siguió la implementación del servidor local y clonó el repositorio de llamadas de Sendbird, puede ejecutar un segundo comando de terminal npm ejecuta watch dentro del directorio SendbirdCalls para reconstruir automáticamente el sitio web de Sendbird Calls y recargar la aplicación React Native que se ejecuta dentro de un dispositivo o emulador Android.
Si estás probando Android en un emulador, asegúrate de cerrar todas las instancias del emulador antes de ejecutar npm ejecuta android; de lo contrario, el servidor metro se desconectará de la aplicación en el emulador. Cuando no se está ejecutando ningún emulador, los scripts de React Native deberían iniciar un emulador automáticamente y conectarse al servidor metro correctamente.
Puede aparecer el mensaje que solicita permiso para usar el micrófono y la cámara. Si lo resuelves, puedes utilizar la llamada como lo haces en la versión del navegador.
Paso 4: Solución de problemas
iOS
- Error "El valor JSON '1' de tipo NSNumber no se puede convertir a NSString"
a. Elimine el atributo enableReadAccessToURLs del componente WebView; lea más en este artículo. - Pantalla blanca o error HTTPS
a. Debe visitar la URL del servidor local en https://localhost/ y no la IP que devuelve StaticServer (es decir, 192.168.18.1 ) - Error “Error de compilación domain=com.apple.CoreSimulator.SimError, código=405” después de ejecutar react-native run-ios en macOS:
a. Ejecute el mismo comando con el nombre del simulador proporcionado:
Android
- Pantalla blanca o error HTTPS
a. Debe habilitar el tráfico de texto sin cifrar en AndroidManifest.xml (siga el paso "Habilitar el tráfico de texto sin formato en Android"). Lea más en este artículo.servicios de Google Play y . WebView del sistema Android desde Play Store (WebView se actualizará automáticamente para dispositivos móviles con Android L y superior) .
, es posible que deba habilitarlo en el dispositivo desde la sección de información de la aplicación en la configuración del dispositivo. Si tampoco puedes habilitarlo desde allí, es posible que tengas que deshabilitar Chrome temporalmente antes de habilitar y actualizar WebView del sistema Android.Actualizaciones - Error “No se puede cargar el script. Asegúrese de estar ejecutando un servidor Metro o de que su paquete 'index.android.bundle' esté empaquetado correctamente para su lanzamiento”
a. Asegúrese de cerrar todas las instancias del emulador antes de ejecutar npm run android. Cuando no se está ejecutando ningún emulador, los scripts de React Native deberían iniciar un emulador automáticamente y conectarse al servidor metro correctamente - WebView se carga con el error “net::ERR_CONNECTION_REFUSED
a. Debe establecer el parámetro localOnly en verdadero al crear un nuevo servidor estático (nuevo StaticServer(PORT, ruta, {localOnly: true}))
Conclusión
En este tutorial, analizamos la implementación de llamadas Sendbird en su aplicación React Native con WebView. Ahora ya sabe cómo aprovechar el poder de JavaScript para permitir a los usuarios realizar llamadas individuales y recibir notificaciones automáticas en su aplicación en dispositivos Android e iOS. ¡Gran trabajo!
Está en camino de aumentar el nivel de participación de su aplicación y la satisfacción del usuario con chats de voz y video de alta calidad habilitados para WebRTC.
Como siempre, avísenos si tiene alguna pregunta en nuestro sitio comunitario y ¡gracias por utilizar Sendbird!
¡Feliz codificación! 🖥