Kit para el hackatón de la Video API de Vonage

Guía de inicio rápido para añadir la funcionalidad de la Video API de Vonage a tu aplicación del hackatón

TokBox organiza un hackatón virtual del 1 de agosto al 18 de septiembre. Únete a la Grupo de Slack de HackTokBox y pasar a la #vídeo en directo Canal de Slack para empezar.

Enlaces rápidos

¿Qué es OpenTok?

La plataforma OpenTok, desarrollada por Vonage, facilita la integración de funciones interactivas en tiempo real de alta calidad, como vídeo, voz, mensajería y uso compartido de pantalla, en aplicaciones web y móviles.

La plataforma incluye bibliotecas del lado del cliente para web, iOS, Android, Windows y Linux, así como SDK del lado del servidor y una API REST.

¿Cómo puedo utilizar OpenTok?

Además de incorporar el chat de audio y vídeo en tiempo real a las aplicaciones web y móviles, la plataforma OpenTok ofrece una amplia variedad de funciones que pueden utilizarse para desarrollar casos de uso innovadores en prácticamente cualquier sector.

A continuación te mostramos algunas de las formas en que empresas de todo el mundo utilizan OpenTok:

  • Aplicación social muy popular Fiesta en casa utiliza OpenTok para crear salas de vídeo en directo donde los usuarios pueden «relajarse» con sus amigos desde su dispositivo móvil
  • Minerva creó aulas virtuales donde hasta 18 alumnos pueden interactuar con su profesor en tiempo real
  • Babylon Health facilita la organización de consultas por vídeo en tiempo real con médicos, terapeutas y especialistas directamente desde tu móvil
  • Roll20 ha desarrollado un mesa virtual con chat de vídeo y voz para los usuarios que juegan juntos en línea
  • Se ha añadido Esurance valoración por vídeo a su aplicación, lo que permite a los clientes hablar con un agente y mostrar un vídeo en directo de los daños tras un accidente
  • Be My Eyes pone en contacto a personas ciegas y con discapacidad visual con ayudantes videntes de todo el mundo a través de videollamadas en directo
  • Double Robotics ha creado robots de telepresencia que utilizan vídeo en tiempo real para ofrecer a los usuarios una representación física en una oficina u otra ubicación remota
  • Si quieres ver más ejemplos de cómo se utiliza OpenTok, echa un vistazo a nuestro Testimonios de clientes página.

Aquí tienes algunas ideas de lo que podrías crear durante el hackatón:

  • Una aplicación de citas rápidas por vídeo en la que los usuarios van pasando de un chat de vídeo a otro con sus parejas compatibles
  • Un juego social como las charadas o «Cards Against Humanity» que se juega por videoconferencia
  • Una aplicación de tecnología para la democracia: asambleas públicas virtuales, organización de manifestaciones y recaudación de fondos
  • Una aplicación de realidad virtual que incorpora la función de videollamada
  • Combina OpenTok con Clarifai para incorporar el reconocimiento de imágenes a una aplicación de videocomunicaciones
  • Utiliza OpenTok’s Transmisión HLS y RTMP función para publicar transmisiones en Livestream y/o JWPlayer o en un servidor RTMP

Demostración

Para ver un ejemplo de cómo funciona OpenTok, puedes echar un vistazo a nuestra demostración de videoconferencia a continuación:

  1. Ir a opentokdemo.tokbox.com o descárgate la aplicación OpenTokApp en la App Store
  2. Crear una habitación
  3. Comparte la URL de la sala (o el nombre de la sala) con un amigo o simplemente ábrela en una nueva pestaña para iniciar un chat de vídeo

Conceptos clave

Sesiones y tokens

Cada videochat de OpenTok se lleva a cabo dentro de un sesión. Puedes imaginarte una sesión como una «sala de chat» en la que los clientes (navegador o aplicación móvil) pueden publicar y suscribirse a los mensajes de los demás arroyos. Las sesiones se alojan en la nube de OpenTok, y cada sesión está asociada a un ID de sesión. Para que varios clientes puedan chatear entre sí, basta con que se conecten al mismo ID de sesión.

A ficha Es tu «clave» para la sesión y se genera para un ID de sesión específico. Cada usuario debe tener su propio token para conectarse a la sesión. Estos tokens caducan tras un determinado periodo de tiempo (especificado por el desarrollador), mientras que la sesión no caduca.

Los identificadores de sesión y los tokens suelen crearse mediante el del lado del servidor componente de una aplicación de OpenTok, pero si solo estás creando una demostración o una prueba de concepto, puedes generarlos en tu Account - Solo tienes que ir a la página «Resumen del proyecto» y desplazarte hacia abajo hasta Herramientas del proyecto.

Conexiones, editores y suscriptores

Una vez que un cliente dispone de un ID de sesión y un token, puede establecer una conexión a la sesión utilizando código de los SDK del lado del cliente (véase más abajo). Esta conexión envía un evento a la sesión y a todos los clientes que ya estén conectados. Una vez conectado, el cliente puede publicar una transmisión de audio y vídeo procedente de su cámara y su micrófono

Cuando un cliente publica un flujo, se envían eventos a todos los clientes conectados a la sesión. Al recibir el evento, los clientes pueden suscríbase a al canal recién publicado.

Para obtener más información sobre sesiones, tokens, transmisiones y mucho más, echa un vistazo a nuestra Página «Conceptos básicos de la Video API».

Consigue tu clave API

  1. Consigue tu clave API registrándote para obtener un Account gratuito aquí. Asegúrate de utilizar tu código promocional del hackatón al inscribirte.
  2. Una vez que hayas iniciado sesión en tu Account, crear un nuevo proyecto. Mientras desarrollas tu aplicación, utilizarás el Resumen del proyecto para generar identificadores de sesión y tokens (más información al respecto a continuación).

Configuración de un cliente (con aplicaciones de ejemplo)

El lado del cliente de una aplicación de OpenTok proporciona la mayor parte de la funcionalidad de dicha aplicación. El cliente utiliza el ID de sesión y el token (véase más arriba) para conectar al usuario a una sesión desde un navegador web o una aplicación móvil.

Videochat básico

Para ver cómo configurar el código del lado del cliente más básico en la web, echa un vistazo a nuestro Hola, mundo. Para el desarrollo de aplicaciones móviles, puedes clonar o descargar nuestras aplicaciones de ejemplo del lado del cliente para iOS Swift, iOS Objective-C y Android en GitHub.

Aplicaciones de ejemplo de Accelerator + extras

Para poner en marcha con relativa rapidez una interfaz de usuario un poco más pulida y con algunas funciones avanzadas, puedes utilizar nuestras aplicaciones de ejemplo de Accelerator para Web, iOSy Android en GitHub.

Estas aplicaciones de ejemplo incluyen funciones básicas de chat de audio y vídeo, junto con controles de usuario, chat de texto integrado y código de partida para configurar el uso compartido de pantalla y el archivado. Para obtener más información sobre la configuración y las funciones avanzadas de estas aplicaciones de ejemplo, consulta sus archivos README en GitHub. Puedes personalizar la interfaz de usuario de estos ejemplos tanto como desees utilizando CSS.

Muestras adicionales de dispositivos móviles

Si deseas implementar chats con varios participantes, controladores de audio y vídeo personalizados u otros casos de uso especiales en dispositivos móviles, disponemos de otras aplicaciones de ejemplo para Android, iOS Swifty iOS Objective-C

Más información

Para obtener más información sobre cómo configurar el código del lado del cliente para tu aplicación OpenTok, consulta nuestra Guías para desarrolladores.

Configuración de un servidor (opcional)

El componente del lado del servidor de una aplicación OpenTok se utiliza para generar identificadores de sesión y tokens para los usuarios de la aplicación. Si solo estás creando una demostración o una prueba de concepto, es posible que no necesites un componente del lado del servidor; puedes generar identificadores de sesión y tokens en la página «Descripción general del proyecto» de tu proyecto en tu Account de la Video API (solo tienes que abrir o crear un proyecto y, a continuación, desplazarte hacia abajo hasta «`Herramientas del proyecto`»).

Si te interesa configurar un componente del lado del servidor, aquí tienes algunas aplicaciones de ejemplo de inicio rápido para cada lenguaje de SDK del lado del servidor:
PHP | Java | .NET | Nodo | Rubí | Python

Para obtener más información sobre cómo configurar el código del lado del servidor, consulta nuestra Guías para desarrolladores.

Realidad aumentada y vídeo en directo

Para dar tus primeros pasos con la realidad aumentada y el vídeo en directo, echa un vistazo a los ejemplos que aparecen a continuación:
ARKit
Metadatos de los fotogramas de ARKit

Funciones avanzadas

Además del chat de vídeo básico, OpenTok permite utilizar una amplia variedad de funciones más avanzadas. Nuestro Aplicaciones de ejemplo de Accelerator Lo anterior incluye código para algunas de estas funciones (compartir pantalla, archivado y chat de texto), pero aquí tienes algunas guías útiles con más información sobre cómo configurar las funciones avanzadas:

Compartir pantalla:
El Aplicaciones de ejemplo de Accelerator Lo anterior incluye el código inicial para la función de compartir pantalla, pero también te recomendamos que consultes nuestras guías sobre cómo compartir pantalla para Web, iOSy Android. Por lo general, para compartir la pantalla en Internet es necesario crear una extensión personalizada para el navegador, pero si solo utilizas «localhost» para mostrar una demostración de tu aplicación, puedes utilizar esta extensión ya preparada.

Otras guías sobre funciones avanzadas:
Archivado - Tutorial | Guía
Chat de texto
Emisión
Interconexión SIP (conecta las sesiones de OpenTok con llamadas SIP y telefonía)

Para obtener más información sobre cómo implementar estas y otras funciones, consulta nuestra Guías para desarrolladores. También puedes consultar nuestro Documentación de referencia de la API para obtener información sobre métodos y llamadas concretos.

Consejos y trucos

  • Un servidor web local es la mejor forma de hacer una demostración rápida de tu aplicación web. Si no dispones de uno, algunos de los servicios más habituales son: XAMPP y MAMP. Como alternativa, podrías utilizar SimpleHttpServer de Python, un servidor web PHP o una aplicación Node.js.
  • Si quieres conectarte a tu localhost desde varios dispositivos (por ejemplo, un portátil y un smartphone), ngrok Se puede configurar en cuestión de minutos para acceder a tu localhost a través de una URL pública segura.
  • Puedes consultar una lista de los navegadores compatibles con OpenTok aquí
  • Chrome solo permite las comunicaciones WebRTC a través de HTTPS

Obtener ayuda

Si tienes alguna duda o necesitas ayuda para desarrollar tu aplicación, hay varias formas de ponerte en contacto con nosotros para obtener una respuesta rápida: