Configurar un cliente web básico

Este tutorial te guiará paso a paso por el proceso de configuración de un cliente básico para una aplicación web de la Video API de Vonage.

Visión general

Todas las aplicaciones que utilizan la Video API de Vonage requieren tanto un cliente y un servidor componente. El código del lado del cliente es el que se carga en el navegador del usuario final y gestiona la mayor parte de las funciones de OpenTok, entre ellas conectando a la sesión, edición audio-vídeo arroyos a la sesión, y suscribiéndose a a los flujos de otros clientes. Para más información sobre clientes, servidores y sesiones, véase Conceptos básicos de la Video API.

En este tutorial, vas a utilizar OpenTok.js, la biblioteca del lado del cliente de OpenTok para la web, que permite crear de forma rápida y sencilla una aplicación de vídeo interactiva en tiempo real.

Estos son los temas que se tratarán en este tutorial:

Tiempo estimado de realización: 20 minutos

¿Quieres saltarte este tutorial? Puedes ir directamente al código completo del cliente web en el Videochat básico de nuestra Repositorio de la aplicación de ejemplo web en GitHub. El repositorio incluye un archivo README con documentación sobre cómo ejecutar y explorar el código.

Requisitos

Para completar este tutorial, necesitarás:

Paso 1: Creación de las carpetas del proyecto y de la plantilla HTML

Para este proyecto, tendrás que crear un archivo HTML, un archivo JavaScript y un archivo CSS.

  1. Antes de empezar a programar, crea una nueva carpeta de proyecto en tu ordenador para guardar estos archivos (el ejemplo que aparece a continuación se llama mi proyecto pero puedes ponerle el nombre que quieras). A continuación, añada un /js y /css junto con archivos en blanco para index.html, app.jsy app.css con la siguiente estructura:

    /myproject
    /js
        app.js
    /css
        app.css
    index.html

    Una vez configurado el proyecto, abra la carpeta principal del proyecto en el editor de código y vaya a la sección index.html archivo.

  2. Copia el siguiente código (utilizando el (botón «Copiar») y añádelo a tu archivo index.html en el editor de código:

    <html> <head> <title> OpenTok Getting Started </title> <link href="css/app.css" rel="stylesheet" type="text/css"> <script src="https://static.opentok.com/v2/js/opentok.min.js"></script> </head> <body> <div id="videos"> <div id="subscriber"></div> <div id="publisher"></div> </div> <script type="text/javascript" src="js/app.js"></script> </body> </html>

    El código anterior incluye referencias a la OpenTok.js la biblioteca, así como los archivos JS y CSS que acabas de crear. El código también incluye editor y suscriptor divs, que contendrán las secuencias de vídeo; utilizaremos estas clases para personalizar el diseño más adelante.

    Este ejemplo carga OpenTok.js directamente desde static.opentok.com. OpenTok.js también está disponible como paquete de NPM. Para obtener instrucciones sobre cómo utilizar el paquete de NPM, consulta https://www.npmjs.com/package/@opentok/client.

Paso 2: Configuración de la autenticación

Sube tu blanco app.js en su editor de código - la mayoría de los pasos restantes consistirán en añadir código a este archivo.

Para conectarse a una sesión de OpenTok, el cliente necesitará tener acceso a unas credenciales de autenticación: un Clave API, ID de sesióny Token. En una aplicación de producción, estas credenciales deberían generarlas un servidor, pero para agilizar el proceso, por ahora simplemente introduciremos los valores de forma fija.

  1. Empieza copiando el siguiente bloque de código y añadiéndolo a tu archivo app.js:

    // replace these values with those generated in your Video API account var apiKey = "YOUR_API_KEY"; var sessionId = "YOUR_SESSION_ID"; var token = "YOUR_TOKEN"; // (optional) add server code here initializeSession();

  2. Tendrás que modificar el código anterior introduciendo directamente los valores para el apiKey, sessionId y token. Para ello, inicia sesión en tu Account de la Video API, crea un nuevo proyecto de la API de OpenTok o utiliza uno ya existente; a continuación, ve a la página de tu proyecto y desplázate hacia abajo hasta la sección Herramientas del proyecto sección — desde allí, puedes generar manualmente un ID de sesión y un token. Utiliza la clave API del proyecto junto con el ID de sesión y el token que hayas generado para sustituir YOUR_API_KEY, YOUR_SESSION_ID y YOUR_TOKEN en el código anterior (asegúrate de dejar las comillas).

Importante: Puedes seguir obteniendo los valores del ID de sesión y del token desde tu Account durante las fases de prueba y desarrollo, pero antes de pasar a producción debes configurar un servidor. Consulta la guía opcional para configuración de un servidor al final de este tutorial.

Para obtener más información sobre las sesiones, fichas, y servidores, echa un vistazo a Conceptos básicos de la Video API.

Paso 3: Conexión a la sesión y creación de un editor

Es posible que se haya dado cuenta de que initializeSession() que se llama en el último paso después de obtener el ID de sesión y el token. Este método inicializa un objeto de sesión y luego se conecta a la sesión, pero aún no lo hemos definido en nuestro código.

  1. Copia el siguiente código y pégalo debajo del código que ya hay en tu archivo app.js:

    // Handling all of our errors here by alerting them function handleError(error) { if (error) { alert(error.message); } } function initializeSession() { var session = OT.initSession(apiKey, sessionId); // Subscribe to a newly created stream // Create a publisher var publisher = OT.initPublisher('publisher', { insertMode: 'append', width: '100%', height: '100%' }, handleError); // Connect to the session session.connect(token, function(error) { // If the connection is successful, publish to the session if (error) { handleError(error); } else { session.publish(publisher, handleError); } }); }

Crear una editorial

La aplicación inicializa un OpenTok publisher objeto con OT.initPublisher(). Este método admite tres parámetros opcionales:

  • El elemento DOM que sustituye el vídeo del editor —en este caso, el publisher div
  • Las características de la editorial —en este caso, la insertMode, heighty width atributos
  • El tercer parámetro (que no aparece en nuestro código) especifica el controlador de finalización

Para obtener más información sobre estas opciones, consulta el OT.initPublisher() documentación de referencia.

Inicialización y conexión a la sesión

El OT.initSession() El método toma dos parámetros: la clave de la API de OpenTok y el ID de sesión. Inicializa y devuelve un OpenTok session objeto.

El connect() método del session El objeto conecta la aplicación cliente a la sesión de OpenTok. Debes conectarte antes de enviar o recibir flujos de audio y vídeo en la sesión (o antes de interactuar con la sesión de cualquier forma). El connect() El método toma dos parámetros: un token y una función de gestión de finalización function(error).

Una vez establecida la conexión con la sesión, publicamos en ella mediante session.publish(publisher).

Si el cliente no consigue conectarse a la sesión de OpenTok, se pasa un objeto de error al controlador de finalización del evento «connect»; en este caso, se muestra un mensaje de error en la consola mediante console.error().

Paso 4: Inicialización del suscriptor

Por último, queremos que los clientes puedan suscríbase a a (o ver) los flujos de los demás en la sesión.

  1. En tu actual app.js debe tener un comentario que diga // Subscribe to a newly created stream. Copie el siguiente código y añádalo directamente debajo de ese comentario:

    session.on('streamCreated', function(event) { session.subscribe(event.stream, 'subscriber', { insertMode: 'append', width: '100%', height: '100%' }, handleError); });

Cuando se crea un nuevo flujo en la sesión, el objeto Session envía un streamCreated evento. Cuando el cliente detecta un flujo, queremos que se suscriba a él, y esto lo hacemos en el código anterior mediante el session.subscribe() método. Este método admite cuatro parámetros:

  • El objeto Stream al que se suscribe el cliente — event.stream
  • El elemento DOM o el identificador del elemento DOM (opcional) que sustituye el vídeo del suscriptor; en este caso, el subscriber div
  • Un conjunto de propiedades (opcionales) que personalizan el aspecto de la vista del suscriptor; en este caso, la insertMode, heighty width atributos
  • La función de gestión de finalización (opcional) que se invoca cuando el subscribe() el método se ejecuta correctamente o falla

Para obtener más información sobre estas opciones, consulta el Session.subscribe() documentación de referencia.

Paso 5: Probar el código en un navegador

Llegados a este punto, tu app.js debería tener este aspecto (con algunos ajustes):

// replace these values with those generated in your Video API account var apiKey = "YOUR_API_KEY"; var sessionId = "YOUR_SESSION_ID"; var token = "YOUR_TOKEN"; // Handling all of our errors here by alerting them function handleError(error) { if (error) { alert(error.message); } } // (optional) add server code here initializeSession(); function initializeSession() { var session = OT.initSession(apiKey, sessionId); // Subscribe to a newly created stream session.on('streamCreated', function(event) { session.subscribe(event.stream, 'subscriber', { insertMode: 'append', width: '100%', height: '100%' }, handleError); }); // Create a publisher var publisher = OT.initPublisher('publisher', { insertMode: 'append', width: '100%', height: '100%' }, handleError); // Connect to the session session.connect(token, function(error) { // If the connection is successful, initialize a publisher and publish to the session if (error) { handleError(error); } else { session.publish(publisher, handleError); } }); }

En el código completado, debería haber valores codificados para sustituir a YOUR_API_KEY, YOUR_SESSION_ID y YOUR_TOKEN - si no lo ha hecho, consulte Configuración de la autenticación arriba.

  1. Si todo está bien, prueba tu código abriendo el archivo index.html en Chrome o Firefox.

    Al cargar la página, es posible que tengas que autorizar al navegador a acceder a tu cámara web y a tu micrófono. Una vez hecho esto, deberías ver en la página una transmisión de vídeo en la que aparezcas tú (o lo que esté captando tu cámara web).

  2. Si eso funcionara, silenciar el audio A continuación, abre otra pestaña (manteniendo abierta la original) y carga la misma URL. Ahora deberías poder desplazarte hacia abajo y ver un segundo vídeo. Si haces clic con el botón derecho del ratón en cualquiera de los vídeos y seleccionas «Inspeccionar elemento», deberías ver que uno de los vídeos ocupa todo el subscriber div, y la otra es rellenar el publisher div.

Consejo para solucionar problemas: Si no aparece ningún vídeo en la página, abre la pestaña "consola" en las herramientas de tu navegador (command+option+i en Mac, CTRL+i en Windows) y comprueba si hay errores. Lo más probable es que tu clave API, ID de sesión o token no estén configurados correctamente. Dado que codificaste tus credenciales, también es posible que tu token haya caducado.

Paso 6: Unos pequeños ajustes en el CSS

Llegados a este punto, ya dispones de un cliente totalmente operativo que utiliza OpenTok. En este último paso solo veremos cómo realizar algunas personalizaciones básicas con CSS para crear un diseño de «imagen en imagen».

  1. Abre tu archivo app.css en blanco en tu editor de código y añádele el siguiente código:

body, html { background-color: gray; height: 100%; } #videos { position: relative; width: 100%; height: 100%; margin-left: auto; margin-right: auto; } #subscriber { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 10; } #publisher { position: absolute; width: 360px; height: 240px; bottom: 10px; left: 10px; z-index: 100; border: 3px solid white; border-radius: 3px; }

  1. Una vez que hayas guardado el CSS, vuelve a abrir tu índice en dos pestañas distintas del navegador; ahora deberías ver dos secuencias de vídeo, pero una será más pequeña y estará anidada dentro de la secuencia de vídeo más grande.

Si echamos un vistazo al código CSS anterior, podemos ver que lo hemos conseguido ajustando la altura, la anchura y la posición del #publisher div. Este diseño de «imagen en imagen» es muy habitual en los chats de vídeo, pero no dudes en modificar el CSS para jugar con el tamaño y la posición de estos divs tanto como quieras.

¡Enhorabuena! Has terminado el tutorial 'Configurar un Cliente Web Básico'.
Puedes seguir jugando y ajustando el código que has desarrollado aquí para el lado del cliente de tu aplicación, pero ten en cuenta que tendrás que implementar la función componente de servidor de su aplicación antes de pasar a producción (véase Configuración del servidor más abajo).

Próximos pasos

Cuando hayas terminado aquí, sigue desarrollando y mejorando tu aplicación de OpenTok con estos útiles recursos:

Configuración del servidor

En el tutorial anterior, te pedimos que introducir las credenciales de autenticación de forma estática. Sin embargo, en el caso de una aplicación de producción, el sessionId y token Los valores de tu código deben ser generados por el servidor de la aplicación y transmitidos al cliente. A continuación te explicamos un par de razones por las que no es recomendable incluir credenciales codificadas de forma fija en tu aplicación de producción:

  • Los tokens caducan tras un tiempo determinado (especificado en el momento de su generación), por lo que es necesario generar otros nuevos periódicamente.
  • No podrás crear nuevas sesiones de forma dinámica, por lo que todos los usuarios de tu aplicación se quedarían atrapados en una única «sala».

Puedes seguir probando tu aplicación con valores fijados de forma estática, pero cuando estés listo para configurar un servidor, hay varias formas de hacerlo:

Opción de servidor 1: poner en marcha un servidor REST sencillo en Heroku con un solo clic

Probablemente esta sea la forma más rápida de poner en marcha un servidor, pero tiene una funcionalidad limitada. Solo tienes que hacer clic en el botón de Heroku que aparece a continuación; se te redirigirá a la página web de Heroku y se te pedirá tu clave API y tu secreto API de OpenTok; puedes encontrar estos valores en la página de tu proyecto en tu Account de la Video API. Si no tienes un Account de Heroku, tendrás que registrarte (es gratis).

Deploy

¿Quieres echar un vistazo al código? El botón de arriba ejecuta el código del servidor desde el aprender-opentok-php Repositorio de GitHub. Visita el repositorio para revisar el código y consultar la documentación adicional; incluso puedes crear una bifurcación del repositorio y realizar cambios antes de la implementación.

¿Prefieres Node.js? Visita la aprender-opentok-node Repositorio con la misma funcionalidad utilizando Node.js (incluido el botón de implementación en Heroku).

Una vez que el servidor esté implementado en Heroku (ya sea PHP o Node.js), tendrás que añadir unas cuantas líneas al código del lado del cliente. En tu app.js archivo, deberías ver un comentario // (optional) add server code here.

Copia el siguiente código y utilízalo para sustituir // (optional) add server code here y el initializeSession() Llámalo en tu archivo app.js:

// (optional) add server code here var SERVER_BASE_URL = 'https://YOURAPPNAME.herokuapp.com'; fetch(SERVER_BASE_URL + '/session').then(function(res) { return res.json() }).then(function(res) { apiKey = res.apiKey; sessionId = res.sessionId; token = res.token; initializeSession(); }).catch(handleError);

Tendrás que sustituir https://YOURAPPNAME.herokuapp.com con la URL real de tu aplicación de Heroku; la encontrarás en la página de tu aplicación en la web de Heroku.

El código anterior utiliza Ajax para enviar una solicitud al /sesión punto final (https://YOURAPPNAME.herokuapp.com/session), que debería devolver una respuesta HTTP que incluya el ID de sesión, el token y la clave de API en formato JSON, datos que luego se asignan a las variables correspondientes.

Este /session El punto final siempre devolverá el mismo ID de sesión, pero generará un nuevo token cada vez que se llame a él, lo que hace que cada cliente reciba un token único.

Opción 2 para el servidor: compilar desde cero utilizando los SDK del servidor

La opción 1 utiliza puntos finales REST para transmitir las credenciales al cliente, pero esa es solo una de las muchas formas de implementar un servidor con OpenTok. Si deseas un mayor nivel de personalización, puedes consultar la documentación de OpenTok sobre Documentación del SDK del servidor para el lenguaje del lado del servidor que elijas (disponible para PHP, Node.js, Java, .NET, Python y Rubí). La documentación explica el proceso de configuración y los distintos métodos que necesitarás para generar sesiones y tokens, así como otras funcionalidades del lado del servidor.

Opción 3 del servidor: utiliza una de nuestras aplicaciones de ejemplo cliente-servidor para la web

Hemos desarrollado aplicaciones de ejemplo básicas con el código cliente-servidor completo para cada lenguaje del lado del servidor (PHP, Node.js, Java, .NET, Python y Ruby). Estas incluyen los clientes completos, por lo que no necesitarás el código de cliente que has configurado en este tutorial.

Para ver las aplicaciones de ejemplo en tu idioma preferido, visita nuestra Página de ejemplos de código y selecciona uno de los lenguajes del lado del servidor que aparecen en Sistema cliente-servidor sencillo para la web.