Compartir:
){kind=small}
Sina es promotora de desarrollo Java en Vonage. Procede del mundo académico y, en general, siente curiosidad por todo lo relacionado con los coches, los ordenadores, la programación, la tecnología y la naturaleza humana. En su tiempo libre, se le puede encontrar paseando o jugando a videojuegos de competición.
Desenfoque para mayor claridad: Proteger la intimidad de los participantes y facilitar la atención
Tiempo de lectura: 5 minutos
Las reuniones virtuales son diferentes de las presenciales. Una de las muchas razones es la necesidad de un entorno compartido. Dado que la ubicación de cada uno (y, por tanto, lo que ocurre en su entorno) es diferente, puede distraer a los participantes. Además, los participantes pueden querer proteger su intimidad durante las videollamadas sin tener que desplazarse, lo que sólo a veces resulta práctico.
Una solución es desenfocar el fondo de los participantes para que su cara aparezca enfocada. De este modo, se mantiene el fondo natural y se reducen los detalles para distraer menos. Otra solución es sustituir el fondo por otra imagen, que puede aplicarse a algunos o a todos los participantes. La ventaja de este enfoque es que se puede utilizar un fondo adecuado en función del tono y la naturaleza de la reunión. Por ejemplo, si una videollamada es una reunión entre personas de distintas organizaciones, se puede aplicar un logotipo o un fondo normalizado a los representantes de cada organización para mayor claridad.
Ambas soluciones pueden aplicarse fácilmente a tu aplicación de video de Vonage con sólo agregar unas pocas líneas de código. Este artículo te mostrará cómo aplicar estos filtros con una guía paso a paso usando un ejemplo mínimo.
Se necesitarán credenciales para que la aplicación de demostración funcione. Inicia sesión o crea una cuenta de Vonage Video y luego haz clic en "Proyectos" en el menú de la izquierda. Puedes seleccionar un proyecto personalizado anterior o crear uno nuevo. Navega hasta tu proyecto: la página se verá así:
Anote la clave API del proyecto. Desplácese hasta la sección "Herramientas del proyecto" (cerca de la parte inferior de la página) y haga clic en "Crear ID de sesión". Cópielo y péguelo en la siguiente sección para generar un token. Para el rol, seleccione "Editor", y el tiempo de expiración a 24 horas (o el tiempo que necesite la sesión). Para este ejercicio necesitará la clave API del proyecto, el identificador de sesión y el token.
Crea un directorio para trabajar y navega hasta él. A continuación, cree los archivos de aplicación de la siguiente manera:
Ahora que hemos creado nuestro proyecto, vamos a añadir algo de código a nuestro archivo index.js archivo. Por supuesto, debes establecer los valores de apiKey, sessionIdy token apropiadamente.
const apiKey = '';
const sessionId = '';
const token = '';
function handleError(error) {
if (error) {
alert(error.message);
}
}
const session = OT.initSession(apiKey, sessionId);
const subscriberOptions = {};
const publisherOptions = {
insertMode: 'append',
width: '100%',
height: '100%',
resolution: '1280x720'
};
const publisher = OT.initPublisher('publisher', publisherOptions, handleError);
session.on({
streamCreated: event => session.subscribe(event.stream, 'subscriber', subscriberOptions, handleError),
sessionConnected: event => session.publish(publisher)
});
session.connect(token, error => handleError(error));
En el código anterior, hemos inicializado Sesión y Publisher utilizando OT.initSession y OT.initPublisher respectivamente. A continuación, procedemos a establecer escuchadores de eventos en el objeto de sesión para los métodos streamCreated y sessionConnected donde nos suscribimos a un flujo cuando se crea y publicamos nuestro flujo cuando nos conectamos a la sesión. Después de configurar los escuchadores de eventos de sesión, intentamos conectarnos a la sesión utilizando un Token OpenTok.
Cargue el index.js y index.css en index.html junto con el OpenTok.js SDK:
<html>
<head>
<title>Vonage Video Background Filter demo</title>
<link href="index.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="index.js"></script>
</body>
</html>
Añada lo siguiente a su archivo index.css archivo:
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: 640px;
height: 480px;
bottom: 10px;
left: 10px;
z-index: 100;
border: 3px solid white;
border-radius: 3px;
}Ahora, si abre index.html con un navegador y permite el acceso a su cámara web y micrófono, debería ver el vídeo de su cámara. Por favor, compruebe su código y los valores de Token / Session ID / API Key si este no es el caso. Puede obtener más información sobre el problema desde la consola de desarrollador del navegador (normalmente se accede pulsando F12).
Podemos añadir filtros a nuestro Video usando la opción videoFilter opción. Esto se puede aplicar durante o después de inicializar el editor. Por lo general, tiene sentido hacerlo inmediatamente. Tenga en cuenta que esta función no es compatible con todos los navegadores (especialmente los más antiguos). No hay que preocuparse - podemos aplicar filtros condicionalmente. Por ejemplo, así es como se puede difuminar el fondo añadiendo un filtro al objeto publisherOptions que creamos anteriormente:
// Add background blur, if supported
if (OT.hasMediaProcessorSupport()) {
publisherOptions.videoFilter = {
type: 'backgroundBlur',
blurStrength: 'low'
};
}Si la lógica de su aplicación requiere que el filtro se aplique en un momento posterior (por ejemplo, en respuesta a un evento), puede conseguirlo así:
publisher.applyVideoFilter({
type: 'backgroundBlur',
blurStrength: 'high'
});Para eliminar el filtro en algún momento, puede llamar a publisher.clearVideoFilter(). Añada lo siguiente a su archivo index.js para eliminar el efecto después de 8 segundos:
setTimeout(() => publisher.clearVideoFilter(), 8000);
Para cambiar el fondo, utilice la siguiente configuración para el campo videoFilter:
if (OT.hasMediaProcessorSupport()) {
publisherOptions.videoFilter = {
type: 'backgroundReplacement',
backgroundImgUrl: 'https://example.com/image.jpg'
};
}
Tenga en cuenta que no puede utilizar a la vez el reemplazo de imagen y el desenfoque de fondo. Si tiene problemas con la imagen de fondo no se aplica, esto podría ser debido a CORS. Se trata de un problema del servidor, así que pruebe con una imagen de otro sitio web. Tenga en cuenta que la imagen debe ser un BMP, PNG, JPEG o GIF.
Ahora que tienes un ejemplo funcional, puedes personalizar la apariencia editando index.css si lo desea y construir una lógica adicional en su aplicación. Para una aplicación de producción, necesitará automatizar la adquisición de su API Key, Token, y Session ID desde el servidor. Consulte nuestros tutoriales para más información.
Para obtener más información sobre el uso de Publisher y los filtros de vídeo, consulte la referencia de API para Editor. Encontrará los parámetros de opción de editor compatibles en el método OT.initPublisher método documentación.
Puedes encontrar el ejemplo de código completo utilizado en esta demo y probarlo tú mismo desde esta aplicación Glitch. Después, todo lo que tienes que hacer es pegar tu API Key, Token y Session ID para que funcione.
No dude en ponerse en contacto con nosotros en nuestra Comunidad Slack o en Twitter si tiene alguna pregunta o comentario.
Compartir:
Sina es promotora de desarrollo Java en Vonage. Procede del mundo académico y, en general, siente curiosidad por todo lo relacionado con los coches, los ordenadores, la programación, la tecnología y la naturaleza humana. En su tiempo libre, se le puede encontrar paseando o jugando a videojuegos de competición.