Utilizando a biblioteca do Vonage Media Processor

Use a biblioteca do Vonage Media Processor para aplicar transformações personalizadas ao áudio e ao vídeo.

Você pode usar o Publisher.setAudioMediaProcessorConnector(), Publisher.setVideoMediaProcessorConnector(), Subscriber.setAudioMediaProcessorConnector(), e Subscriber.setVideoMediaProcessorConnector(), métodos para aplicar transformadores personalizados de áudio e vídeo que utilizam a biblioteca Vonage Media Processor a áudio e vídeo. Os métodos do Publisher afetarão os vídeos dos assinantes, enquanto os métodos do Subscriber se aplicarão apenas a esse único assinante.

O OpenTok.js oferece 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. Use o Publisher.applyAudioFilter() método para aplicar facilmente o filtro avançado de supressão de ruído predefinido. Esses métodos implementam esses filtros utilizando a Biblioteca de Mídia da Vonage, exigindo apenas algumas configurações:
await publisher.applyVideoFilter({
  type: 'backgroundBlur',
  blurStrength: 'high',
});

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

Veja Aplicando um filtro de desfoque de fundo ou de substituição de fundo e Aplicação do filtro avançado de supressão de ruído.

  • Moderado: Você pode usar os transformadores do conjunto de transformadores de aprendizado de máquina da Vonage ([@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());

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

Veja Aplicando um transformador de vídeo da Biblioteca de Mídia da Vonage.

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.

Aplicando um filtro de desfoque de fundo ou de substituição de fundo

Veja esta documentação.

Aplicação do filtro avançado de supressão de ruído

Veja esta documentação.

Aplicando um transformador de vídeo da Biblioteca de Mídia da Vonage

A biblioteca inclui duas classes principais:

  • 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 '@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);
});

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 '@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()

O Subscriber.setVideoMediaProcessorConnector() O método aplica um transformador de vídeo a um fluxo assinado:

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()

O Subscriber.setAudioMediaProcessorConnector() aplica um transformador de áudio a um fluxo assinado:

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 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 e WebView para Android, bem como 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 esses recursos chamando a função OT.hasMediaProcessorSupport() método.

Transformadores, filtros de áudio e filtros de vídeo 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 benchmark no maior número possível de dispositivos compatíveis, independentemente de a implementação da transformação ser básica, moderada ou avançada.

Você pode usar o evento `cpuPerformanceChanged` da sessão para detectar alterações no desempenho da CPU e desativar os transformadores de vídeo conforme necessário. Consulte Detecção de alterações no desempenho da CPU.

Para obter orientações adicionais sobre como otimizar a qualidade das chamadas, consulte Monitoramento da qualidade das chamadas.

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-web-do-opentok 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.