Video Express ya está aquí, ¡y por qué es increíble!

Explicación exprés

Vonage, con una década de experiencia en el desarrollo de vídeo, ha creado una sencilla API de alto nivel llamada Video Express para acelerar el desarrollo y la integración de vídeo multipartito en aplicaciones web.

¿Multipartidista?

Empecemos por definir lo que significa multipartito. Es cuando una videollamada tiene varios participantes que publican sus flujos de audio y vídeo y se suscriben simultáneamente a los flujos de los demás.

Antes, era bastante habitual tener equipos de personas en la misma sala y luego hacer una videollamada con un equipo en otra sala.

2 teams 2 streams

Como habrá podido comprobar usted mismo últimamente, la situación está cambiando hacia personas que llaman desde distintos lugares.

6 people 36 streams

Como puedes ver en la imagen superior, puede convertirse rápidamente en un reto complejo seguir el ritmo de todas las conexiones de los participantes.

Aquí es donde Video Express entra en juego. Tal vez usted es nuevo en el desarrollo de aplicaciones que integran video o un desarrollador experimentado que quiere centrarse en otras cosas. Video Express te ayuda a eliminar la complejidad, además de optimizar la calidad, el uso de la CPU y el diseño. ¡Por eso es increíble!

Video Express utilizado en un proyecto proyecto vanilla JavaScript que puedes ver. Hay un botón de despliegue rápido, por lo que sólo tiene que introducir su clave de la API y el secreto en el archivo .env y usted tendrá su propio ejemplo de trabajo. Esta es una implementación básica para resaltar Video Express.

Eliminar la complejidad

Vea a continuación la comparación del código de inicio necesario para crear un chat de vídeo.

API de Video API JavaScript Client SDK de Vonage

const session = OT.initSession(this.apiKey, this.roomId); // Init session
session.on('sessionConnected', ...); // Handle session connected events
session.on('sessionDisconnected', ...); // Handle session end
session.on('streamCreated', ...); // Subscribe to newly published streams
session.on('streamDestroyed', ...); // Clean up on stream end
session.on('connectionCreated', ...); // Handle connection events (join)
session.on('connectionDestroyed', ...); // Handle disconnect events (leave)

// Build your own UI / Layout
// Active Speaker Detection
// Video / Audio Optimizations
const pub = OT.initPublisher(targetElement, options, (err) => console.error(err)); // Create a publisher
session.publish(pub, undefined, err => { // Try to publish media
 if (err) {
   reject(err);
 } else {
   resolve();
 }
});

Vonage Video Express

const room = new VideoExpress.Room({ apiKey, sessionId, token, roomContainer: 'roomContainer’ });

room.join();

Video Express se encarga de publicar y suscribir a todos los participantes de la videollamada. Sólo tienes que decirle el id del elemento HTML (en este ejemplo, "roomContainer") para colocar la "Sala" en, unirse y eso es todo. Lee nuestra documentación para saber más sobre lo que puedes hacer.

Responsable de calidad

Quality Manager diagram

Para ayudar a crear la mejor calidad de videollamada, Video Express aplicará varios métodos automáticamente. Entre ellos, maximizar el tamaño de los mosaicos para las secuencias de vídeo visibles y poner en pausa las que no se pueden ver. También ajustará la resolución y la frecuencia de imagen en función de las condiciones de la red y la CPU. Al establecer dinámicamente prioridades más altas en los altavoces y las pantallas compartidas, las cosas que necesitan más atención pueden conseguir la mejor calidad.

Gestor de experiencias

Para crear una gran experiencia de usuario, Video Express optimizará las cosas en el lado del cliente. Por ejemplo, todos los participantes después de 10 se silencian automáticamente para evitar salas muy ruidosas. Cuando el tamaño de un vídeo visualizado disminuye, se solicita un flujo más pequeño para ayudar a reducir el ancho de banda necesario para una reproducción fluida.

Ejemplo de sesión de vídeo sin optimizar

Table with data of an unoptimized multiparty video session

Ejemplo de sesión de Video optimizada

Table with data of an optimized multiparty video session

Responsable de diseño

Layout Manager diagram

Video Express ajusta automáticamente la distribución de las secuencias en función del tamaño de la pantalla y del número de participantes. Las pantallas compartidas y el orador activo tienen mayor prioridad u ocupan más espacio.

Vista previa Editor

Otra característica que Video Express maneja para usted es permitir al usuario una vista previa de su vídeo y audio antes de unirse a la sala. Aquí tienes un ejemplo de código:

const previewPublisher = new VideoExpress.PreviewPublisher('previewContainer');
await previewPublisher.previewMedia({
  targetElement: 'previewContainer',
  publisherProperties: {
    resolution: '1280x720',
    audioBitrate: 15,
  },
});

Compartir pantalla

La última característica de Video Express que quiero destacar es cómo se gestiona el uso compartido de la pantalla.

const startScreensharing = () => {
  room.startScreensharing("myScreenshare");
}

const stopScreensharing = () => {
  room.stopScreensharing();
}

screenshareStartBtn.addEventListener("click", startScreensharing, false);

screenshareStopBtn.addEventListener("click", stopScreensharing, false);

Ya está. Con estas pocas líneas de código, puedes compartir tu pantalla y Video Express reconfigurará la distribución de la sala para que sea la prioritaria.

Bueno...

¡¿Listo para construir algo increíble?!

Consulte la documentación de Video Express para más detalles.

Juegue con el proyecto básico de inicio.

Muéstranos en qué estás trabajando y danos tu opinión en nuestro Canal Slack de la Comunidad.