Compartir:
){kind=small}
Mofizur Rahman (@moficodes) es desarrollador senior en Vonage. Su lenguaje de programación favorito es Go. También juega con Node, Python y Java. También está aprendiendo y enseñando en la comunidad Go, Kubernetes, Docker y Microservice. Cree firmemente en el poder del código abierto y en la importancia de devolver algo a la comunidad. Se autoproclama adicto a coleccionar pegatinas y ha coleccionado varias cajas llenas de pegatinas sin signos de parar. A veces se dedica a la fotografía.
A veces escribe blogs sobre tecnología en https://dev.to/moficodes.
Diseño automático para la aplicación de Video de Vonage
Tiempo de lectura: 2 minutos
La Video API de Vonage facilita la creación de nuestra propia aplicación de videochat con tan solo 15 líneas de código. Para hacer que se vea y se sienta como una aplicación de video chat apropiada tenemos que hacer algo más de trabajo. Uno de los retos es colocar adecuadamente a los participantes en la pantalla. Aplicaciones como Zoom, Teams, Google Meet y Webex tienen todas su propio aspecto distintivo. Fundamentalmente, todas cumplen el mismo objetivo: colocar a los participantes en la pantalla en una especie de cuadrícula y reorganizarlos en función de los diferentes tamaños de pantalla. Eso es lo que haremos hoy para nuestra aplicación de Video de Vonage.
He aquí un ejemplo de lo que vamos a construir.
Editor de texto (por ejemplo VS Código)
Navegador web
El código fuente de esta demo se encuentra en este repositorio.
El ingrediente principal para que nuestro auto layout funcione es Opentok Layout JS. Esta es una librería de código abierto creada por Adam Ullman.
El código de esta demo es bastante corto. Hay 4 archivos en total. Tres que crearemos (index.html, style.css, script.js) y uno (opentok-layout.js) que se descarga de repositorio Opentok Layout JS repositorio.
En la sección <head> de nuestro archivo HTML, añadimos una referencia a Opentok Client Library. Se utiliza para obtener acceso a OT que nos permite acceder a la cámara. También incluimos opentok-layout.js y nuestro archivo style.css.
<script src="https://static.opentok.com/v2/js/opentok.min.js"></script>
<script src="js/opentok-layout.js"></script>
<link rel="stylesheet" href="css/style.css" />
En el <body>añadimos un div con id="layout". Este es el contenedor donde colocaremos todos los vídeos de nuestros participantes. También tenemos dos botones que sirven para añadir y eliminar vídeos de nuestro diseño.
<div id="layout"></div>
<div id="buttons">
<input
type="button"
name="add"
value="Add"
id="add"
onclick="addElement()"
/>
<input
type="button"
name="remove"
value="Remove"
id="remove"
onclick="removeElement()"
/>
</div>
Por último, añadimos una referencia a nuestro archivo script.js justo después de la etiqueta </body> etiqueta
La mayor parte del archivo CSS se utiliza para colocar los botones en la parte inferior de la pantalla Lo que deja el resto de la pantalla de bienes raíces para el layout contenedor. El contenedor tiene una propiedad de transición CSS definida para que los cambios de diseño al añadir y quitar vídeos sean suaves.
Aquí es donde inicializamos y hacemos uso de la librería Opentok Layout JS. Primero creamos una referencia a nuestro contenedor de diseño, layoutEl. Luego se inicializa una variable layout variable y la establecemos en una función de Opentok Layout JS que retorna cuando se le pasa la variable layoutEl y algunas opciones.
var layoutEl = document.getElementById('layout');
var layout;function updateLayoutValues() {
const opts = {
maxRatio: 3 / 2,
minRatio: 9 / 16,
fixedRatio: false,
alignItems: 'center',
bigPercentage: 0.8,
bigFixedRatio: false,
bigMaxRatio: 3 / 2,
bigMinRatio: 9 / 16,
bigFirst: true,
scaleLastRow: true,
smallMaxWidth: Infinity,
smallMaxHeight: Infinity,
bigMaxWidth: Infinity,
bigMaxHeight: Infinity,
bigAlignItems: 'center',
smallAlignItems: 'center',
};
layout = initLayoutContainer(layoutEl, opts).layout;
}
updateLayoutValues();Hay una explicación de todas las opts propiedades y sus posibles valores en Opentok Layout JS Léame.
layout se ejecuta cada vez que es necesario reorganizar el diseño de la aplicación cuando se añaden o eliminan vídeos o se cambia el tamaño de la ventana.
También hay escuchadores de eventos para los botones de añadir y eliminar. Se crea otro evento para cuando se hace doble clic en el vídeo de un participante, que alternará entre ampliar o reducir el vídeo.
Esta fue una explicación rápida para mostrar cómo puedes lograr un diseño adaptable para tu aplicación de Vonage Video.
Para crear una aplicación de video multipartita aún más rápido, puedes usar Vonage Video Express. Video Express utiliza opentok-layout-js y envuelve nuestro Client SDK de OpenTok. Puedes aprender a usar Vonage Video Express con este artículo por Enrico.
Si tiene alguna pregunta o comentario, póngase en contacto con nosotros a través de Twitter o Slack.
Compartir:
Mofizur Rahman (@moficodes) es desarrollador senior en Vonage. Su lenguaje de programación favorito es Go. También juega con Node, Python y Java. También está aprendiendo y enseñando en la comunidad Go, Kubernetes, Docker y Microservice. Cree firmemente en el poder del código abierto y en la importancia de devolver algo a la comunidad. Se autoproclama adicto a coleccionar pegatinas y ha coleccionado varias cajas llenas de pegatinas sin signos de parar. A veces se dedica a la fotografía.
A veces escribe blogs sobre tecnología en https://dev.to/moficodes.