Procesador multimedia (Web)

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

Puedes utilizar el Publisher.setAudioMediaProcessorConnector() y Publisher.setVideoMediaProcessorConnector() métodos 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() Método para aplicar fácilmente el filtro predefinido de desenfoque de fondo o de sustitución de fondo. Este método implementa dichos filtros mediante la biblioteca multimedia de Vonage y solo requiere 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 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);

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

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.

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 '@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() 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 '@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 que utiliza el Publisher.setVideoMediaProcessorConnector(), Subscriber.setVideoMediaProcessorConnector() y Publisher.applyVideoFilter() Los métodos son compatibles con las versiones recientes de Chrome, Firefox, Electron, Opera, Edge, Samsung Internet, WebView Android y las últimas versiones de Safari (versión 26+) y WebView 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 admite esta función llamando a la función OT.hasMediaProcessorSupport('audio') método.

Los transformadores 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 (en ordenador o en 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).

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 obtener más información, consulta el Procesador multimedia de Vonage documentación de la biblioteca.

El 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:

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.