Procesador multimedia (Web)

Utiliza la biblioteca Vonage Media Processor para aplicar transformaciones personalizadas a los flujos publicados.

Puede utilizar la función Publisher.setAudioMediaProcessorConnector() y Publisher.setVideoMediaProcessorConnector() para aplicar transformadores de audio y vídeo personalizados que utilizan la biblioteca Vonage Media Processor.

Hay tres formas de aplicar los transformadores:

  • Básico: Utiliza el Publisher.applyVideoFilter() para aplicar fácilmente el filtro predefinido de desenfoque de fondo o reemplazo de fondo. Este método implementa estos filtros utilizando la biblioteca multimedia de Vonage, lo que requiere solo unos pocos ajustes de configuración:
await publisher.applyVideoFilter({
    type: 'backgroundBlur',
    blurStrength: 'high',
});

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 muestra.

  • 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);

Nota: Las transformaciones multimedia no son compatibles con todos los dispositivos. Consulte Navegadores compatibles.

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

La biblioteca incluye dos clases clave:

  • Procesador multimedia - 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 al audio o vídeo de un editor, utilice el botón Publisher.setAudioMediaProcessorConnector() y Publisher.setVideoMediaProcessorConnector() métodos.

Método Publisher.setVideoMediaProcessorConnector()

En Publisher.setVideoMediaProcessorConnector() aplica un transformador de vídeo a un flujo publicado:

import { MediaProcessor, MediaProcessorConnector } from '@vonage/media-processor';
import OT from '@vonage/client-sdk-video';
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() es incompatible con el método Publisher.applyVideoFilter() método.

Método Publisher.setAudioMediaProcessorConnector()

En Publisher.setAudioMediaProcessorConnector() aplica un transformador de audio a un flujo publicado:

import { MediaProcessor, MediaProcessorConnector } from '@vonage/media-processor';
import OT from '@vonage/client-sdk-video';
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);
    });

Requisitos del cliente

La API de flujos insertables utilizada por la aplicación Publisher.setVideoMediaProcessorConnector() y Publisher.setAudioMediaProcessorConnector() métodos sólo es compatible con las versiones recientes de Chrome, Electron, Opera, Samsung Internet, Edge y WebView Android. No es compatible en otros navegadores (no basados en Chrome) o en iOS. Puede comprobar si el cliente admite esta función llamando al método OT.hasMediaProcessorSupport() método.

Los transformadores requieren un soporte de procesador adecuado. Incluso en los navegadores compatibles, los transformadores pueden no ser estables cuando los procesos en segundo plano limitan los recursos de procesamiento disponibles. Utilice Chrome (escritorio o Android) para obtener resultados óptimos.

Para obtener la mejor experiencia de usuario, asegúrese de que los ordenadores portátiles/de sobremesa cumplen 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 estos 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).

Debe realizar pruebas comparativas en tantos dispositivos compatibles como sea posible, independientemente de la transformación.

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

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

En video-api-web-samples incluye las siguientes aplicaciones de ejemplo que utilizan la biblioteca Vonage Media Processor para aplicar transformaciones a las secuencias publicadas en OpenTok.js:

Existen ejemplos adicionales 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, consulte la sección Personalizar la interfaz de usuario guía.