Processador de mídia (Web)

Use a biblioteca do Vonage Media Processor para aplicar transformações personalizadas aos fluxos publicados.

Você pode usar o Publisher.setAudioMediaProcessorConnector() e Publisher.setVideoMediaProcessorConnector() métodos para aplicar transformadores personalizados de áudio e vídeo que utilizam a biblioteca Vonage Media Processor.

Existem três maneiras de implementar transformadores:

  • Básico: Use o Publisher.applyVideoFilter() método para aplicar facilmente o filtro predefinido de desfoque de fundo ou de substituição de fundo. Esse método implementa esses filtros utilizando a Biblioteca de Mídia da Vonage, exigindo apenas algumas configurações:
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());

Veja o substituição da imagem de fundo e desfoque de fundo aplicativos de exemplo.

  • Avançado: Você pode criar sua própria classe de transformador que implemente o Transformador classe:
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);

Observação: As transformações de mídia não são compatíveis com todos os dispositivos. Consulte Navegadores compatíveis.

O Processador de Mídia da Vonage biblioteca, disponível em npm, facilita o uso do Fluxos inseríveis API para realizar operações de transformação em faixas de vídeo e áudio.

A biblioteca inclui duas classes principais:

  • MediaProcessor — Controla transformadores e inclui um setTransformers() método que permite definir transformadores.
  • MediaProcessorConnector — Aceita um MediaProcessor objeto em seu construtor e gerencia as faixas de entrada e saída. A implementação do OpenTok.js é responsável por gerenciar as faixas. Você só precisa fornecer o MediaProcessorConnector instância.

Para usar um MediaProcessorConnector Para conectar um transformador ao áudio ou vídeo de um editor, use o Publisher.setAudioMediaProcessorConnector() e Publisher.setVideoMediaProcessorConnector() métodos.

Método Publisher.setVideoMediaProcessorConnector()

O Publisher.setVideoMediaProcessorConnector() O método aplica um transformador de vídeo a um stream 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);
});

Observação: O Publisher.setVideoMediaProcessorConnector() O método é incompatível com o Publisher.applyVideoFilter() método.

Método Publisher.setAudioMediaProcessorConnector()

O Publisher.setAudioMediaProcessorConnector() aplica um transformador de áudio a um fluxo 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 do cliente

A API de fluxos inseríveis utilizada pelo Publisher.setVideoMediaProcessorConnector(), Subscriber.setVideoMediaProcessorConnector() e Publisher.applyVideoFilter() Esses métodos são compatíveis com as versões mais recentes do Chrome, Firefox, Electron, Opera, Edge, Samsung Internet, WebView do Android e com as versões mais recentes do Safari (versão 26+) e do WebView do iOS (versão 26+). Publisher.setAudioMediaProcessorConnector(), Subscriber.setAudioMediaProcessorConnector() e Publisher.applyAudioFilter() não são compatíveis com outros navegadores (que não sejam baseados no Chromium) nem no iOS. Você pode verificar se o cliente suporta esse recurso chamando a função OT.hasMediaProcessorSupport('audio') método.

Os transformadores exigem suporte adequado do processador. Mesmo em navegadores compatíveis, os transformadores podem não funcionar de maneira estável quando processos em segundo plano limitam os recursos de processamento disponíveis. Use o Chrome (versão para desktop ou Android) para obter os melhores resultados.

Para garantir a melhor experiência do usuário, certifique-se de que os laptops e computadores de mesa atendam a estes requisitos mínimos:

  • CPU — Intel Core i5 (com 4 núcleos ou mais) ou Apple Silicon M1 (ou superior)
  • 8 G de RAM (ou mais)
  • GPU dedicada (por exemplo, NVIDIA)

Alguns sistemas operacionais podem oferecer várias configurações ou modos de bateria para economizar energia (por exemplo, para prolongar a duração da bateria do laptop) por meio da redução do desempenho da CPU. Isso pode resultar em um desempenho abaixo do ideal do transformador e causar artefatos indesejados de áudio ou vídeo. Recomendamos configurar seu sistema operacional para usar o modo de melhor desempenho (ou para não (use o modo de baixo consumo de energia) nesses casos.

Muitas transformações de vídeo (como o desfoque do fundo) utilizam a segmentação para separar o locutor do fundo. Para obter melhores resultados, use iluminação adequada e um fundo liso. Iluminação insuficiente ou fundos complexos podem causar artefatos no vídeo (por exemplo, o locutor ou um chapéu que ele esteja usando podem ficar desfocados junto com o fundo).

Você deve realizar testes de desempenho no maior número possível de dispositivos compatíveis, independentemente da transformação.

Mais informações sobre transformadores e código de exemplo

Para obter mais informações, consulte o Processador de Mídia da Vonage documentação da biblioteca.

O exemplos-da-Video API-para-a-web O repositório inclui os seguintes aplicativos de exemplo que utilizam a biblioteca Vonage Media Processor para aplicar transformações aos fluxos publicados no OpenTok.js:

Existem exemplos adicionais que utilizam a biblioteca Vonage Media Transformers aqui.

Outras opções de personalização da interface do usuário

Para conhecer outras opções disponíveis para personalizar a interface do usuário, consulte o Personalização da interface do usuário guia.