¡Shhhhh! Elimine el ruido de fondo en sus Video Llamadas

Vivimos en un mundo conectado. Los usuarios de su aplicación web podrían estar recibiendo videollamadas desde un sinfín de lugares diferentes y en diversas condiciones, imagínese: Por la mañana, cuando un vecino decide empezar a cortar el césped. Mientras se trabaja desde una concurrida cafetería, se inicia una reunión improvisada para discutir cambios en el diseño. Por supuesto, el día de la gran presentación, se cancelan las clases debido a una nevada. Ahora, con Vonage Video Noise Suppression, hay una cosa menos de qué preocuparse: el ruido de fondo.

¿Quieres probarlo en tu navegador Chrome / basado en Chromium (Electron, Opera y Edge) ahora mismo? Tenemos repositorios GitHub para ambos Moderado y Avanzado que puedes desplegar con un solo clic. Una vez implementada, completa las credenciales que puedes obtener de Vonage Video Playground y podrás comenzar a probar. Sólo tienes que unirte a la llamada desde dos pestañas diferentes y hacer clic en los botones para activar y desactivar la supresión de ruido. Si tienes la suerte de no estar en un entorno ruidoso, puedes buscar y reproducir videos de ruidos de la ciudad en un teléfono móvil.

Adelante, pruébalos. Esperaré.

La función de supresión de ruido es posible gracias al procesador de medios de Vonageque ayuda a acceder a los datos de audio y eliminar cualquier ruido de fondo.

Como se mencionó anteriormente, existen dos maneras de implementar la supresión de ruido en tu llamada de Vonage Video. Veamos cómo funcionan.

Aplicación moderada

Con la implementación moderada de la supresión de ruido, Vonage ha agrupado el transformador de supresión de ruido, el procesador de medios y el conector del procesador de medios en una única función llamada createVonageNoiseSuppression().

Las partes importantes son:

Creación de una instancia a partir de la biblioteca Supresión de ruido

const noiseSuppression = await createVonageNoiseSuppression();

Inicialización de la instancia

await noiseSuppression.init();

Obtener un conector para el procesador multimedia

const mediaProcessorConnector = await noiseSuppression.getConnector();

Configuración del conector al inicializar el editor para la videollamada

publisher
  .setAudioMediaProcessorConnector(mediaProcessorConnector)

Ahora, el audio pasará por el transformador de supresión de ruido y luego a la videollamada.

Para activar y desactivar la supresión de ruido se llaman a algunos métodos de la directiva noiseSuppression:

// enable Noise Suppression
noiseSuppression.enable();
// disable Noise Suppression
noiseSuppression.disable();

Aplicación avanzada

Si desea añadir múltiples efectos al flujo de audio antes de pasar a la videollamada o cualquier otra cosa que requiera un mayor control sobre los flujos insertables y los transformadores, el caso de uso avanzado será la mejor opción.

En primer lugar, cree una nueva instancia de MediaProcessor

const mediaProcessor = new MediaProcessor();

y un nuevo transformador de supresión de ruido.

const noiseSuppressionTransformer = new NoiseSuppressionTransformer();

A continuación, inicialice el Transformador

await noiseSuppressionTransformer.init();

A continuación, establece los transformadores que utilizará el procesador multimedia. Aquí también se incluyen otros transformadores que se quieran añadir al flujo de audio.

mediaProcessor.setTransformers([noiseSuppressionTransformer]);

Ahora, crea un Conector de Medios utilizando la función mediaProcessor.

const mediaProcessorConnector = new MediaProcessorConnector(mediaProcessor);

Al igual que en el ejemplo de implementación de Moderate, el conector se configura al inicializar el editor para la videollamada.

publisher
  .setAudioMediaProcessorConnector(mediaProcessorConnector)

Como ahora tiene acceso al Transformador de Supresión de Ruido, ahí es donde puede activar y desactivar la funcionalidad.

// enable Noise Suppression
noiseSuppressionTransformer.enable();
// disable Noise Suppression
noiseSuppressionTransformer.disable();

Más opciones

Al inicializar la Supresión de ruido, puede especificar un par de opciones.

El primero es Multithreaded WebAssembly. Con Wasm multithreading, el uso de varios núcleos de CPU puede aumentar significativamente el rendimiento. Esto está habilitado por defecto, pero para que funcione, se deben cumplir estos requisitos previos:

• Servir su aplicación web a través de HTTPS para una transmisión de datos segura.

• Establecer el encabezado 'Cross-Origin-Opener-Policy' a 'same-origin' para restringir los contextos de ejecución a fuentes de confianza.

• Establecer la cabecera 'Cross-Origin-Embedder-Policy' con valores 'require-corp' o 'credentialless' para garantizar un uso seguro de los buffers de matrices compartidas.

Si desea desactivar esta opción, puede introducir disableWasmMultiThread: true cuando realice la inicialización.

.init({disableWasmMultiThread: true});

El Web Worker, Wasm y el modelo de Supresión de Ruido se cargan dinámicamente cuando se inicializa el Transformador. Por defecto, estos recursos se cargan desde una CDN de Vonage. Tienes la opción de hacer el alojamiento tú mismo. Sólo tienes que especificar el parámetro assetsDirBaseUrl con la URL del servidor anfitrión apuntando a los recursos estáticos.

.init({assetsDirBaseUrl: "https://my-custom-server/path/to/the/resources/root"});

Hemos intentado que añadir la Supresión de Ruido a tu aplicación de Video sea lo más sencillo posible. ¡Pruébalo!

Si tiene alguna pregunta o comentario, háganoslo saber en nuestro Canal Slack de la Comunidad y síganos en X.