Compartir:
){kind=small}
Hui Jing es defensora de los desarrolladores en Nexmo. Tiene un amor desmesurado por CSS y la tipografía, y en general es una apasionada de todo lo relacionado con la web.
Crear un Video Chat básico con Video API de Vonage
Tiempo de lectura: 6 minutos
Esta serie de tutoriales explorará la Video API de Vonage (anteriormente TokBox OpenTok) y lo que puedes crear con ella. La Video API es muy robusta y altamente personalizable, y en cada post mostraremos cómo implementar una función específica usando la API, comenzando con el chat de audio-vídeo más básico.
Como esta aplicación requerirá algo de código del lado del servidor, utilizaremos Glitch para facilitar la configuración. También puede descargar el código de este proyecto Glitch y desplegarlo en su servidor o plataforma de alojamiento de elección (probablemente puede requerir algunos ajustes de configuración en función de los requisitos de su plataforma).
No vamos a utilizar ningún marco de front-end para esta serie, sólo Javascript de vainilla para mantener el foco en la propia Video API. Al final de este tutorial, usted debe ser capaz de iniciar un chat de audio-vídeo con un amigo compartiendo un enlace con ellos.
Todo el código de esta aplicación se puede encontrar en este repositorio GitHub o en remezclado en Glitch.
Antes de comenzar, necesitarás una cuenta de Video API de Vonage, que puedes crear gratis aquí. También necesitarás Node.js instalado (si no estás usando Glitch).
Tras acceder a su Account, verá la interfaz de su panel de control. Puede crear un nuevo proyecto seleccionando Crear nuevo proyecto en la barra lateral izquierda.
Se le presentarán 2 opciones, Insertar o API. Elija la opción API haciendo clic en el botón Crear proyecto personalizado personalizado.
El siguiente paso te pedirá el nombre del proyecto y el códec preferido. Ponga el nombre que desee al proyecto y elija la opción de códec sugerida de VP8 por el momento. Los detalles sobre la diferencia entre VP8 y H.264 se detallan aquí.
Una vez creado su proyecto, tendrá acceso a su clave y secreto API. Cada proyecto tendrá su propia clave API y su propio secreto.
Si decides no utilizar Glitch, puedes saltarte esta parte e ir directamente a la explicación del código en la siguiente sección.
En la página de inicio de Glitch, seleccione Nuevo proyecto en la esquina superior derecha de la página, y elige la opción hola-express que te dará una aplicación Node con Express instalado.
Puede instalar bibliotecas adicionales a través de la línea de comandos abriendo la consola. Pulse el botón Herramientas en la parte inferior de la barra lateral izquierda y, a continuación, haga clic en Registros.
Instala el SDK del servidor de Video API de Vonage mediante el siguiente comando:
pnpm install opentok --saveObsérvese el uso de pnpm en lugar de npmque es el gestor de paquetes preferido en Glitch. Hace lo mismo que npm.
Una vez hecho esto, limpie el archivo server.js para eliminar el código innecesario.
Ve al archivo .env y agrega tu clave y secreto de API de tu proyecto de API de Video de Vonage.
Este es el aspecto de la estructura de carpetas cuando se inicia un nuevo Glitch hello-express nuevo:
Nuestra aplicación constará de dos páginas: una página de inicio para que los usuarios creen una sesión (que llamaremos "Sala" y a la que podrán unirse los siguientes participantes) y, a continuación, la página de chat de vídeo propiamente dicha.
Añadamos un landing.html archivo a la carpeta views haciendo clic en el botón Nuevo archivo en la barra lateral izquierda. Nombre del archivo views/landing.html y pegue el siguiente código en la página. La página tendrá un simple elemento de formulario con una entrada que permite a los usuarios enviar un nombre de habitación. Puede utilizar el siguiente código si no desea escribir el suyo propio desde cero.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Basic Video Chat</title>
<meta name="description" content="A basic audio-video chat application" />
<link
id="favicon"
rel="icon"
href="https://tokbox.com/developer/favicon.ico"
type="image/x-icon"
/>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="/style.css" />
</head>
<body>
<header>
<h1>The most basic video chat</h1>
</header>
<main>
<form id="registration" class="registration">
<label>
<span>Room</span>
<input
type="text"
name="room-name"
placeholder="Enter room name"
required
/>
</label>
<button>Enter</button>
</form>
</main>
</body>
</html>
La página index.html página también será relativamente escasa por ahora, una página con dos div uno para el suscriptor y otro para el editor. Repasaremos el significado de estos términos cuando lleguemos a la sección de la API de Video de Vonage de este tutorial.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Basic Video Chat</title>
<meta name="description" content="A basic audio-video chat application" />
<link
id="favicon"
rel="icon"
href="https://tokbox.com/developer/favicon.ico"
type="image/x-icon"
/>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="/style.css" />
</head>
<body>
<header>
<h1>The most basic video chat</h1>
</header>
<main>
<div id="subscriber" class="subscriber"></div>
<div id="publisher" class="publisher"></div>
</main>
<script src="https://static.opentok.com/v2/js/opentok.min.js"></script>
<script src="/client.js"></script>
</body>
</html>
Para el archivo server.js limpiemos el código innecesario. Usted debe ser dejado con algo como esto:
const express = require("express");
const app = express();
app.use(express.static("public"));
app.get("/", (request, response) => {
response.sendFile(__dirname + "/views/index.html");
});
const listener = app.listen(process.env.PORT, () => {
console.log("Your app is listening on port " + listener.address().port);
});
Por último, vamos a borrar los estilos existentes en el archivo style.css para que podamos reemplazarlos con los nuestros una vez que hayamos conectado todo.
La descripción general de cómo funciona la Video API de Vonage para conectar a las personas y permitirles tener un videochat es la siguiente:
Paso 1: El servidor de aplicaciones crea la sesión
Paso 2: Un cliente carga la aplicación y el servidor crea un token
Paso 3: El cliente se conecta y comienza a transmitir a la sesión
Paso 4: Un nuevo cliente se conecta a la sesión
Paso 5: Los clientes se suscriben a los flujos de los demás
Una introducción completa con GIF animados que muestran todo el flujo está disponible en el sitio de documentación de Video API de Vonage.
Como mencionamos al principio, TokBox OpenTok es ahora Vonage Video API. No hemos hecho ningún cambio en los nombres de nuestros paquetes, así que seguirás haciendo referencia a OpenTok en tu código. Comienza instanciando un objeto OpenTok con tu clave y secreto API en el archivo server.js archivo.
const OpenTok = require("opentok");
const OT = new OpenTok(process.env.API_KEY, process.env.API_SECRET);Vamos a modificar las rutas de nuestras dos páginas para que los usuarios vean la página de aterrizaje en la primera carga, que les permite introducir un nombre de sala para iniciar una sesión. Una vez hecho esto, serán redirigidos a la página principal de la aplicación, donde se mostrará el vídeo.
app.get("/", (request, response) => {
response.sendFile(__dirname + "/views/landing.html");
});
app.get("/session/:room", (request, response) => {
response.sendFile(__dirname + "/views/index.html");
});
En nuestro archivo landing.html archivo, vamos a añadir un manejador de eventos para el envío del formulario que POST el nombre de la habitación a nuestro servidor. Debido a que son cuatro líneas de código, vamos a añadirlo como una etiqueta script en la parte inferior de la página.
const form = document.getElementById("registration");
form.addEventListener("submit", event => {
event.preventDefault();
location.pathname = `/session/${form.elements["room-name"].value}`;
});
Esto significa que tendremos que manejar la POST en el archivo server.js archivo. El siguiente trozo de código es bastante largo, por lo que las explicaciones se incluyen como comentarios en el código. Lo esencial es que se comprobará si existe una sesión o se creará una nueva si es necesario, basándose en el nombre de la sala introducido en la página de inicio. Cada sesión tiene un ID de sesión único, que permite a otras personas unirse a la sesión.
A continuación, este código generará las credenciales necesarias para que el cliente se conecte a la sesión. Están compuestas por el ID de sesión, un token y la clave API. Estas credenciales se devolverán al cliente como respuesta.
let sessions = {};
app.post("/session/:room", (request, response) => {
const roomName = request.params.room;
// Check if the session already exists
if (sessions[roomName]) {
// Generate the token
generateToken(roomName, response);
} else {
// If the session does not exist, create one
OT.createSession((error, session) => {
if (error) {
console.log("Error creating session:", error);
} else {
// Store the session in the sessions object
sessions[roomName] = session.sessionId;
// Generate the token
generateToken(roomName, response);
}
});
}
});
function generateToken(roomName, response) {
// Configure token options
const tokenOptions = {
role: "publisher",
data: `roomname=${roomName}`
};
// Generate token with the OpenTok SDK
let token = OT.generateToken(
sessions[roomName],
tokenOptions
);
// Send the required credentials back to to the client
// as a response from the fetch request
response.status(200);
response.send({
sessionId: sessions[roomName],
token: token,
apiKey: process.env.API_KEY
});
}
En el lado del cliente, primero creamos un objeto de sesión con la clave de API y el ID de sesión de la respuesta. También tenemos que crear un objeto editor, que sustituirá el elemento div con el icono id=publisher con la fuente de vídeo.
Nos conectaremos a la sesión con el método session.connect() y, si tiene éxito, publicaremos nuestro flujo de vídeo con el método session.publish() método.
También escucharemos el evento streamCreated para poder suscribirnos a los usuarios que se unan a la sesión después de que nos hayamos conectado a ella.
// Create a session object with the session ID
const session = OT.initSession(apiKey, sessionId);
// Create a publisher
const publisher = OT.initPublisher(
"publisher", // should match the ID of an element in your HTML
{
insertMode: "append",
width: "100%",
height: "100%"
},
handleCallback
);
// Connect to the session
session.connect(token, error => {
// If the connection is successful, initialize the publisher and publish to the session
if (error) {
handleCallback(error);
} else {
session.publish(publisher, handleCallback);
}
});
// Subscribe to a newly created stream
session.on("streamCreated", event => {
session.subscribe(
event.stream,
"subscriber",
{
insertMode: "append",
width: "100%",
height: "100%"
},
handleCallback
);
});
// Callback handler
function handleCallback(error) {
if (error) {
console.log("error: " + error.message);
} else {
console.log("callback success");
}
}
Cuando se envíe el formulario con el nombre de la habitación, haremos una POST a la ruta /session/:room y utilizaremos los datos de la respuesta para ejecutar la funcionalidad detallada anteriormente. Para ello, vamos a envolver todo en una función llamada initializeSession() así:
fetch(location.pathname, { method: "POST" })
.then(res => {
return res.json();
})
.then(res => {
const apiKey = res.apiKey;
const sessionId = res.sessionId;
const token = res.token;
initializeSession(apiKey, sessionId, token);
})
.catch(handleCallback);
function initializeSession(apiKey, sessionId, token) {
// Create a session object with the sessionId
const session = OT.initSession(apiKey, sessionId);
// Create a publisher
const publisher = OT.initPublisher(
"publisher",
{
insertMode: "append",
width: "100%",
height: "100%"
},
handleCallback
);
// Connect to the session
session.connect(token, error => {
// If the connection is successful, initialize the publisher and publish to the session
if (error) {
handleCallback(error);
} else {
session.publish(publisher, handleCallback);
}
});
// Subscribe to a newly created stream
session.on("streamCreated", event => {
session.subscribe(
event.stream,
"subscriber",
{
insertMode: "append",
width: "100%",
height: "100%"
},
handleCallback
);
});
}
La funcionalidad general de nuestro chat de vídeo está hecha, así que lo único que queda es añadir algunos estilos para ajustar el diseño. Los dos elementos div originales (para el suscriptor y el editor) serán reemplazados por sus respectivas fuentes de vídeo.
Este es el estilo de diseño más básico para que el flujo de vídeo de tu editor se muestre en la esquina inferior izquierda de la página, mientras que el resto de personas del flujo ocupan todo el fondo de la página.
html {
box-sizing: border-box;
height: 100%;
}
*,
*::before,
*::after {
box-sizing: inherit;
margin: 0;
padding: 0;
}
body {
height: 100%;
display: flex;
flex-direction: column;
}
header {
text-align: center;
padding: 0.5em;
}
main {
flex: 1;
display: flex;
position: relative;
}
input,
button {
font-size: inherit;
padding: 0.5em;
}
.registration {
display: flex;
flex-direction: column;
margin: auto;
}
.registration input[type="text"] {
display: block;
margin-bottom: 1em;
}
.subscriber {
width: 100%;
height: 100%;
display: flex;
}
.publisher {
position: absolute;
width: 25vmin;
height: 25vmin;
min-width: 8em;
min-height: 8em;
align-self: flex-end;
}Esos estilos te darán el videochat más básico con el diseño más básico, que ya viste al principio de este tutorial.
A continuación, puede añadir cualquier tipo de estilo visual, como fuentes, colores e incluso imágenes de logotipos, si lo desea, para darle un toque especial.
Existen funcionalidades adicionales que podemos crear con la Video API de Vonage que se tratarán en futuros tutoriales, pero mientras tanto, puedes obtener más información en nuestro sitio de documentación integral. Si tienes algún problema o alguna pregunta, comunícate con nosotros en nuestra Slack de la comunidad. Gracias por leernos.