By
El reemplazo del fondo y el desenfoque es una gran función que ofrecen los principales actores del espacio de videoconferencia, especialmente apreciada por quienes se han visto obligados a improvisar un espacio de trabajo en sus hogares como consecuencia de las medidas de cuarentena y permanencia en casa, aplicadas para combatir la propagación del COVID-19.
Esta función llega ahora al producto de Twilio Programmable Video a través de la librería JavaScript de Processors de Twilio Video. En este breve tutorial, aprenderá a agregar filtros de procesamiento de video a una secuencia de video capturada por su navegador web.
Requisitos previos
En el momento en que escribo este artículo, la librería Processors de video solo funciona en Chrome, por lo que deberá usar este navegador. Puede comprobar la lista actual de navegadores compatibles en la documentación para verificar si hay actualizaciones.
La aplicación de ejemplo que va a crear como parte de este tutorial es una aplicación de front-end de JavaScript alojada en un servidor web Express de Node.js. Para ejecutar el servidor web, necesita la versión 14 de Node.js o una más reciente instalada en su computadora.
Además de Chrome y Node.js, no hay requisitos adicionales. Las librerías de JavaScript que utilizará están disponibles libremente y son de código abierto. No es necesaria una cuenta de Twilio para este tutorial (pero es necesario implementar una aplicación de videollamada completa).
Configuración de un proyecto con JavaScript
Para comenzar, debe crear una aplicación web base en la que posteriormente agregará funciones de video.
Abra una ventana de terminal o símbolo del sistema, busque un lugar adecuado y cree un directorio para este proyecto:
mkdir twilio-video-backgrounds
cd twilio-video-backgroundsLas dependencias de JavaScript necesarias para este proyecto son el Express Framework, una extensión para proporcionar archivos estáticos y las librerías de Twilio Video y procesadores de video. Instale todos estos elementos con npm como se indica a continuación:
npm init -y
npm install express serve-static twilio-video @twilio/video-processorsLos archivos del lado del cliente para este proyecto se almacenarán en un directorio público. Cree este directorio ahora:
mkdir publicUn servidor web Express para atender el front-end se puede escribir en solo un puñado de líneas de JavaScript. Coloque el siguiente código en un archivo server.js dentro de su directorio twilio-video-backgrounds:
const express = require('express')
const path = require('path')
const serveStatic = require('serve-static')
const app = express()
app.use(serveStatic(path.join(__dirname, 'public')))
app.use(serveStatic(path.join(__dirname, 'node_modules/twilio-video/dist/')))
app.use(serveStatic(path.join(__dirname, 'node_modules/@twilio/video-processors/dist/build')))
app.listen(3000)Este servidor Express está configurado para ejecutarse en el puerto 3000. Utilizará tres ubicaciones como fuente para archivos estáticos: el directorio público que acaba de crear y los dos directorios de compilación para los paquetes twilio-video y video-processors instalados.
La aplicación de front-end comenzará desde un archivo index.html en el directorio público. Este será el punto de entrada de la aplicación, donde se cargan todos los archivos de JavaScript. Copie el siguiente código en este archivo:
<!doctype html>
<html>
<head>
<title>Twilio Video Processors Demo</title>
<script src="twilio-video.min.js"></script>
<script src="twilio-video-processors.min.js"></script>
</head>
<body>
<h1>Twilio Video Processors Demo</h1>
<div id="video"></div>
<script src="index.js"></script>
</body>
</html>En esta página, se cargan las librerías twilio-video y video-processors. Luego crea un elemento de marcador de posición <div> donde se agregará el video y finalmente importa el archivo index.js, donde escribirá el código de aplicación a continuación.
Puede iniciar el servidor web con el siguiente comando:
node server.jsCon el servidor en ejecución, abra http://localhost:3000 en su navegador web para confirmar que tiene una aplicación en funcionamiento. En esta etapa inicial, solo verá el encabezado <h1> que aparece en la página.
Puede dejar el servidor en ejecución mientras trabaja en los pasos restantes de este tutorial. Cada vez que actualice su código JavaScript o HTML, puede presionar Refresh (Actualizar) en su navegador para cargar la aplicación actualizada.
Visualización del video de su cámara web
Ya está listo para agregar el video. Para comenzar, va a visualizar el video sin filtrar de su cámara web en la página. El SDK de JavaScript de Twilio Video hace que esto sea increíblemente fácil.
¿Recuerda el archivo index.js al que se hizo referencia en el archivo html? Este archivo aún no existe. Se encuentra en el directorio público, junto con index.html. Cree este archivo en su editor de texto o IDE e ingrese el siguiente código allí:
const showLocalVideo = async () => {
const videoTrack = await Twilio.Video.createLocalVideoTrack({
width: 640,
height: 480,
frameRate: 24
});
document.getElementById('video').appendChild(videoTrack.attach());
}
showLocalVideo();La función showLocalVideo() usa el createLocalVideoTrack() desde la librería twilio-video para indicar al navegador que cree una pista de video con las dimensiones y la frecuencia de imagen indicadas. La segunda línea de la función agrega la representación HTML de esta pista (obtenida llamando al método attach()) al elemento de video del marcador de posición video incluido en la página index.html.
Vuelva a su navegador y actualice la página. Se le pedirá permiso para utilizar su cámara web y, un momento después, tendrá su propio video en la página.
Agregar un efecto de fondo
Ahora que el video se está reproduciendo, está listo para agregar un filtro de reemplazo de fondo. La librería Processors de Twilio Video le ofrece dos opciones: hacer que el fondo se vea desenfocado o reemplazarlo por una imagen de su elección. Veamos ambas opciones en orden.
Desenfocar del fondo
Para desenfocar el fondo, la clase GaussianBlurBackgroundProcessor de la librería Processors de Twilio Video se debe adjuntar a la pista de video. A continuación, puede ver una versión actualizada de index.js con las líneas agregadas resaltadas:
const showLocalVideo = async () => {
const videoTrack = await Twilio.Video.createLocalVideoTrack({
width: 640,
height: 480,
frameRate: 24
});
document.getElementById('video').appendChild(videoTrack.attach());
const bg = new Twilio.VideoProcessors.GaussianBlurBackgroundProcessor({
assetsPath: '/',
maskBlurRadius: 10,
blurFilterRadius: 5,
});
await bg.loadModel();
videoTrack.addProcessor(bg);
}
showLocalVideo();
El constructor de clase GaussianBlurBackgroundProcessor necesita tres argumentos:
assetsPath: la URL o la ruta relativa desde la que se pueden descargar recursos adicionales de la librería Processors de Twilio Video. En este proyecto, el directorio de creación de esta librería se agrega como un directorio estático sin una ruta, por lo que se usa/.maskBlurRadius: El radio de desenfoque que se utiliza al momento de alisar los bordes de la máscara que separa el primer plano del fondo. Tiene que jugar con diferentes valores para encontrar lo que funciona mejor. Descubrí que10es un buen punto de partida.blurFilterRadius: La cantidad de desenfoque gausiano que se aplica al fondo. Cuanto mayor sea el número, más desenfoque se aplica al fondo. En mi experimentación, descubrí que solo una pequeña cantidad de desenfoque es lo que me parece mejor, pero puede experimentar con valores más elevados para ver cómo luce el efecto.
El proceso que separa al sujeto del fondo utiliza un modelo de segmentación de imágenes que se debe cargar. El método loadModel() hace esto.
Una vez cargado el modelo, se añade el procesador a la pista de video con el método addProcessor(), y este va a aplicar el efecto a cada fotograma capturado antes de entregarlo a la página.
Actualice su página para ver cómo funciona el filtro de desenfoque de fondo.
Reemplazar el fondo
Para el siguiente efecto, necesitará una imagen de fondo. Si no tiene una a mano, puede usar este campo en Irlanda cerca de donde vivo. Escriba el nombre de la imagen background.jpg y colóquela en el directorio público.
El reemplazo del fondo es implementado por la clase VirtualBackgroundProcessor. La siguiente versión de index.js tiene el código necesario para reemplazar el fondo resaltado:
const showLocalVideo = async () => {
const videoTrack = await Twilio.Video.createLocalVideoTrack({
width: 640,
height: 480,
frameRate: 24
});
document.getElementById('video').appendChild(videoTrack.attach());
let img = new Image();
img.src = 'background.jpg';
img.onload = async () => {
const bg = new Twilio.VideoProcessors.VirtualBackgroundProcessor({
assetsPath: '/',
backgroundImage: img,
maskBlurRadius: 5,
});
await bg.loadModel();
videoTrack.addProcessor(bg);
}
}
showLocalVideo();
Reemplazar el fondo requiere un poco de trabajo adicional en comparación con el desenfoque, ya que antes de que se pueda agregar el efecto a la pista de video, es necesario cargar la imagen de fondo. En este ejemplo, la imagen background.jpg se carga en un nuevo objeto Image, y la lógica que agrega el procesador de video está conectada a su eventoonload, para que se realice una vez que la imagen esté cargada y disponible para su uso.
Los argumentos que se pueden pasar a la clase VirtualBackgroundProcessor son los siguientes:
assetsPath: Es la misma que para el desenfoque; esta es la ubicación desde donde se pueden descargar los recursos adicionales necesarios para realizar el análisis de la imagen.backgroundImage: La imagen que se mostrará en segundo plano.maskBlurRadius: Igual que para el desenfoque, la cantidad de desenfoque aplicada a la máscara calculada. El valor depende mucho de su gusto personal. La reduje a 5 para este efecto.
El resultado es bastante bueno, como puede ver a continuación.
Fondos virtuales en su aplicación de video programable
Puede que se pregunte cómo incorporar los efectos de fondo que acaba de aprender en una aplicación de videollamada creada con el video programable de Twilio. Lo importante es comprobar que su aplicación de video está utilizando una versión de twilio-video.js 2.15.1 o más reciente, ya que esta es la versión en la que generalmente está disponible esta función.
La buena noticia es que una vez que agregue un procesador de fondo a una pista de video local como se muestra anteriormente, esta pista está configurada para enviar la versión procesada de la transmisión de video a otros participantes en la videollamada, de modo que vean exactamente lo que usted ve. No hay nada más que hacer.
Para su referencia, el código completo de este proyecto está disponible en este repositorio de GitHub.
Me encantaría ver lo que crea.
Miguel Grinberg es ingeniero de software principal para contenidos técnicos en Twilio. Comuníquese con él a la dirección mgrinberg@twilio.com si tiene un proyecto genial que le gustaría compartir en este blog.
Este artículo ha sido traducido del original "Change the Background in your Video Calls with the Twilio Video Processors Library". Mientras continuamos con los procesos de traducción, nos encantaría recibir sus comentarios en help@twilio.com - Buenas contribuciones pueden generar regalos de Twilio.
