Uso de la biblioteca Vonage Media Processor

Utiliza la biblioteca Vonage Media Processor para aplicar transformaciones personalizadas al audio y al vídeo.

Puedes utilizar el Publisher.setAudioMediaProcessorConnector(), Publisher.setVideoMediaProcessorConnector(), Subscriber.setAudioMediaProcessorConnector()y Subscriber.setVideoMediaProcessorConnector(), métodos para aplicar transformadores de audio y vídeo personalizados que utilizan la biblioteca Vonage Media Processor al audio y al vídeo. Los métodos de «Publisher» afectarán a los vídeos de los suscriptores, mientras que los métodos de «Subscriber» solo se aplicarán a ese suscriptor concreto.

OpenTok.js ofrece tres formas de implementar transformadores:

Básico: Utiliza el Publisher.applyVideoFilter() método para aplicar fácilmente el filtro predefinido de desenfoque de fondo o de sustitución de fondo. Utiliza el Publisher.applyAudioFilter() método para aplicar fácilmente el filtro avanzado de supresión de ruido predefinido. Estos métodos implementan dichos filtros mediante la biblioteca multimedia de Vonage, para lo cual solo se necesitan unos pocos ajustes de configuración:

await publisher.applyVideoFilter({
  type: 'backgroundBlur',
  blurStrength: 'high',
});

publisher.applyAudioFilter({
  type: 'advancedNoiseSuppression',
});

Véase Aplicar un filtro de desenfoque de fondo o de sustitución de fondo y Aplicación del filtro avanzado de supresión de ruido.

Moderado: Puedes utilizar los transformadores de Vonage ML ([@vonage/ml-transformers](https://www.npmjs.com/package/@vonage/ml-transformers)) biblioteca.

const config = {
  transformerType: 'VirtualBackground',
  backgroundAssetUri: "https://MY_IMAGE_URL"
};
const processor = await createVonageMediaProcessor(config);
publisher.setVideoMediaProcessorConnector(processor.getConnector());

Véase el sustitución de la imagen de fondo y desenfoque de fondo aplicaciones de ejemplo.

Avanzado: Puede escribir su propia clase transformadora que implemente el método Transformador clase:

class OverlayTextTransformer  implements  Transformer {
  // transform function must be implemented.
  transform(frame:any, controller:TransformStreamDefaultController) {
    // This will be more complicated in a real-world transformer...
    this.startCtx_.drawImage(frame, 0, 0, .., ..,)
    this.startCtx_.font = "30px Arial";
    this.startCtx_.fillText(this.message_, 50, 150);
    frame.close();
    controller.enqueue(new VideoFrame(this.startCanvas_, {timestamp, alpha: 'discard'}));
  }
}

const transformer = new OverlayTextTransformer('Hello World'); const transformers = [ transformer ] const mediaProcessor = new MediaProcessor(); mediaProcessor.setTransformers(transformers); const mediaProcessorConnector = new MediaProcessorConnector(mediaProcessor); publisher.setVideoMediaProcessorConnector(mediaProcessorConnector);

Véase Aplicación de un transformador de vídeo de la biblioteca multimedia de Vonage.

El Procesador multimedia de Vonage biblioteca, disponible en npm, facilita el uso del Flujos insertables API para realizar operaciones de transformación en pistas de vídeo y audio.

Aplicar un filtro de desenfoque de fondo o de sustitución de fondo

Véase esta documentación.

Aplicación del filtro avanzado de supresión de ruido

Véase esta documentación.

Aplicación de un transformador de vídeo de la biblioteca multimedia de Vonage

La biblioteca incluye dos clases clave:

MediaProcessor — Controla los transformadores e incluye un setTransformers() que permite establecer transformadores.

MediaProcessorConnector - Acepta un MediaProcessor en su constructor y maneja las pistas de entrada y salida. La implementación de OpenTok.js maneja las pistas. Sólo tienes que proporcionar el MediaProcessorConnector instancia.

Para utilizar un MediaProcessorConnector Para conectar un transformador a la salida de audio o vídeo de un dispositivo, utiliza el Publisher.setAudioMediaProcessorConnector() y Publisher.setVideoMediaProcessorConnector() métodos.

Método Publisher.setVideoMediaProcessorConnector()

El Publisher.setVideoMediaProcessorConnector() Este método aplica un transformador de vídeo a una transmisión publicada:

import { MediaProcessor, MediaProcessorConnector } from '@vonage/media-processor';
import OT from '@opentok/client';
import MyTransformer from './path/to/my-transformer';

const mediaProcessor = new MediaProcessor();
const transformers = [
  new MyTransformer(),
];

mediaProcessor.setTransformers(transformers);
const connector = new MediaProcessorConnector(mediaProcessor);
const publisher = OT.initPublisher('targetDiv', () => {
  publisher.setVideoMediaProcessorConnector(connector);
});

Nota: En Publisher.setVideoMediaProcessorConnector() El método es incompatible con el Publisher.applyVideoFilter() método.

Método Publisher.setAudioMediaProcessorConnector()

El Publisher.setAudioMediaProcessorConnector() aplica un transformador de audio a una transmisión publicada:

import { MediaProcessor, MediaProcessorConnector } from '@vonage/media-processor';
import OT from '@opentok/client';
import MyTransformer from './path/to/my-transformer';

const mediaProcessor = new MediaProcessor();
const transformers = [
  new MyTransformer(),
];

mediaProcessor.setTransformers(transformers);
const connector = new MediaProcessorConnector(mediaProcessor);
const publisher = OT.initPublisher('targetDiv', () => {
  publisher.setAudioMediaProcessorConnector(connector);
});

Método `Subscriber.setVideoMediaProcessorConnector()`

El Subscriber.setVideoMediaProcessorConnector() El método aplica un transformador de vídeo a una transmisión a la que se está suscrito:

import { MediaProcessor, MediaProcessorConnector } from '@vonage/media-processor';
import OT from '@opentok/client';
import MyTransformer from './path/to/my-transformer';

const mediaProcessor = new MediaProcessor();
const transformers = [
  new MyTransformer(),
];

mediaProcessor.setTransformers(transformers);
const connector = new MediaProcessorConnector(mediaProcessor);
await subscriber.setVideoMediaProcessorConnector(connector);

Método `Subscriber.setAudioMediaProcessorConnector()`

El Subscriber.setAudioMediaProcessorConnector() aplica un transformador de audio a un flujo suscrito:

import { MediaProcessor, MediaProcessorConnector } from '@vonage/media-processor';
import OT from '@opentok/client';
import MyTransformer from './path/to/my-transformer';

const mediaProcessor = new MediaProcessor();
const transformers = [
  new MyTransformer(),
];

mediaProcessor.setTransformers(transformers);
const connector = new MediaProcessorConnector(mediaProcessor);
await subscriber.setAudioMediaProcessorConnector(connector);

Requisitos del cliente

La API de flujos insertables que utiliza el Publisher.setVideoMediaProcessorConnector(), Subscriber.setVideoMediaProcessorConnector() y Publisher.applyVideoFilter() Estos métodos son compatibles con las versiones recientes de Chrome, Firefox, Electron, Opera, Edge, Samsung Internet y WebView para Android, así como con las últimas versiones de Safari (versión 26+) y WebView para iOS (versión 26+). Publisher.setAudioMediaProcessorConnector(), Subscriber.setAudioMediaProcessorConnector() y Publisher.applyAudioFilter() no son compatibles con otros navegadores (que no estén basados en Chromium) ni con iOS. Puedes comprobar si el cliente es compatible con estas funciones llamando a la función OT.hasMediaProcessorSupport() método.

Los transformadores, los filtros de audio y los filtros de vídeo requieren una compatibilidad adecuada con el procesador. Incluso en los navegadores compatibles, es posible que los transformadores no funcionen de forma estable cuando los procesos en segundo plano limiten los recursos de procesamiento disponibles. Utiliza Chrome (para ordenador o Android) para obtener resultados óptimos.

Para disfrutar de la mejor experiencia de usuario, asegúrate de que los ordenadores portátiles o de sobremesa cumplan estos requisitos mínimos:

CPU: Intel Core i5 (con 4 núcleos o superior) o Apple Silicon M1 (o superior)
8 G de RAM (o más)
GPU dedicada (por ejemplo, NVIDIA)

Algunos sistemas operativos pueden ofrecer múltiples configuraciones o modos de batería para conservar energía (por ejemplo, para prolongar la vida útil de la batería del portátil) estrangulando el rendimiento de la CPU. Esto puede dar lugar a un rendimiento subóptimo del transformador e introducir artefactos de audio o vídeo no deseados. Le recomendamos que configure su sistema operativo para utilizar el modo de mejor rendimiento (o para no (utilizar el modo de bajo consumo) en esos casos.

Muchas transformaciones de vídeo (como el desenfoque de fondo) utilizan la segmentación para separar al orador del fondo. Para obtener los mejores resultados, utilice una iluminación adecuada y un fondo liso. La iluminación insuficiente o los fondos complejos pueden provocar artefactos de vídeo (por ejemplo, el orador o un sombrero que lleve puesto pueden aparecer borrosos junto con el fondo).

Deberías realizar pruebas de rendimiento en el mayor número posible de dispositivos compatibles, independientemente de si la transformación se trata de una implementación básica, moderada o avanzada.

Puedes utilizar el evento «cpuPerformanceChanged» de la sesión para detectar cambios en el rendimiento de la CPU y desactivar los transformadores de vídeo según sea necesario. Consulta Detección de cambios en el rendimiento de la CPU.

Para obtener más información sobre cómo optimizar la calidad de las llamadas, consulta Supervisión de la calidad de las llamadas.

Más información sobre transformadores y ejemplos de código

Para obtener más información, consulta el Procesador multimedia de Vonage documentación de la biblioteca.

El opentok-ejemplos-web incluye las siguientes aplicaciones de ejemplo que utilizan la biblioteca Vonage Media Processor para aplicar transformaciones a las secuencias publicadas en OpenTok.js:

Transformador básico de audio - Muestra cómo aplicar un transformador de audio utilizando un web worker y un hilo separado para el web worker.
Transformador de vídeo básico - Muestra cómo aplicar un transformador de vídeo utilizando un canvas, un web worker y un hilo independiente para el web worker.
Zoom básico de vídeo — Muestra cómo utilizar un transformador básico para ampliar el editor.
Moderado-fondo-borroso — Muestra cómo aplicar un transformador de vídeo desde el @vonage/ml-transformers módulo.

Hay otros ejemplos que utilizan la biblioteca «Vonage Media Transformers». aquí.

Otras opciones de personalización de la interfaz de usuario

Para conocer otras opciones disponibles para personalizar la interfaz de usuario, consulta el Personalizar la interfaz de usuario guía.