Shhhhh! Remova o ruído de fundo das suas videochamadas

Vivemos em um mundo conectado. Os usuários do seu aplicativo web podem estar participando de videochamadas de uma infinidade de locais diferentes e em diversas condições. Imagine: reuniões matinais em que um vizinho decide começar a cortar a grama. Enquanto trabalha em uma cafeteria movimentada, uma reunião improvisada é iniciada para discutir mudanças no design. É claro que, no dia da grande apresentação, as aulas são canceladas por causa da nevasca. Agora, com a Supressão de Ruído Video da Vonage, há uma preocupação a menos: o ruído de fundo.

Quer experimentar agora mesmo no seu navegador Chrome ou baseado no Chromium (Electron, Opera e Edge)? Temos repositórios no GitHub para ambos Moderado e Avançado que você pode implantar com um clique. Após a implantação, preencha as credenciais que você pode obter no Vonage Video Playground e você poderá começar a testar. Basta participar da chamada a partir de duas abas diferentes e clicar nos botões para ativar e desativar a supressão de ruído. Se você tiver a sorte de não estar em um ambiente barulhento, basta procurar e reproduzir vídeos de ruídos urbanos em um celular.

Vá em frente e experimente. Eu espero.

A funcionalidade de supressão de ruído é possibilitada pelo Processador de Mídia da Vonage, que ajuda a acessar os dados de áudio e remover qualquer ruído de fundo.

Conforme mencionado anteriormente, há duas maneiras de implementar a supressão de ruído em sua chamada Video da Vonage. Vamos ver como elas funcionam.

Implementação moderada

Com a implementação moderada da supressão de ruído, a Vonage integrou o transformador de supressão de ruído, o processador de mídia e o conector do processador de mídia em uma única função chamada createVonageNoiseSuppression().

Os pontos importantes são:

Criação de uma instância da biblioteca de supressão de ruído

const noiseSuppression = await createVonageNoiseSuppression();

Inicializando a instância

await noiseSuppression.init();

Conectando-se ao processador de mídia

const mediaProcessorConnector = await noiseSuppression.getConnector();

Configurando o conector ao inicializar seu emissor para a videochamada

publisher
  .setAudioMediaProcessorConnector(mediaProcessorConnector)

Agora, seu áudio será transmitido pelo Transformador de Supressão de Ruído e, em seguida, para a videochamada.

Para ativar e desativar a supressão de ruído, você deve chamar alguns métodos no noiseSuppression:

// enable Noise Suppression
noiseSuppression.enable();
// disable Noise Suppression
noiseSuppression.disable();

Implementação avançada

Se você quiser adicionar vários efeitos ao fluxo de áudio antes de iniciar a videochamada ou qualquer outra situação que exija maior controle sobre fluxos inseríveis e transformadores, o caso de uso avançado será a melhor opção.

Primeiro, crie uma nova instância de um MediaProcessor

const mediaProcessor = new MediaProcessor();

e um novo transformador supressor de ruído.

const noiseSuppressionTransformer = new NoiseSuppressionTransformer();

Em seguida, inicialize o Transformer

await noiseSuppressionTransformer.init();

Em seguida, defina os transformadores que o processador de mídia utilizará. É aqui também que você deve incluir outros transformadores que deseje adicionar ao fluxo de áudio.

mediaProcessor.setTransformers([noiseSuppressionTransformer]);

Agora, crie um Media Connector usando o mediaProcessor.

const mediaProcessorConnector = new MediaProcessorConnector(mediaProcessor);

Assim como no exemplo de implementação “Moderate”, você define o conector ao inicializar seu emissor para a videochamada.

publisher
  .setAudioMediaProcessorConnector(mediaProcessorConnector)

Como agora você tem acesso ao Transformador de Supressão de Ruído, é lá que você pode ativar e desativar essa funcionalidade.

// enable Noise Suppression
noiseSuppressionTransformer.enable();
// disable Noise Suppression
noiseSuppressionTransformer.disable();

Mais opções

Ao inicializar a Supressão de Ruído, é possível definir algumas opções.

O primeiro é o WebAssembly multithread. Com o multithreading do Wasm, o uso de vários núcleos da CPU pode aumentar significativamente o desempenho. Esse recurso está habilitado por padrão, mas, para funcionar, é necessário que os seguintes pré-requisitos sejam atendidos:

• Hospedar seu aplicativo web via HTTPS para garantir a transmissão segura de dados.

• Definir o cabeçalho 'Cross-Origin-Opener-Policy' como 'same-origin' para restringir os contextos de execução a fontes confiáveis.

• Definir o cabeçalho 'Cross-Origin-Embedder-Policy' com os valores 'require-corp' ou 'credentialless' para garantir o uso seguro de buffers de matriz compartilhados.

Se você quiser desativar essa opção, pode passar disableWasmMultiThread: true ao realizar a inicialização.

.init({disableWasmMultiThread: true});

O Web Worker, o Wasm e o modelo de supressão de ruído são carregados dinamicamente quando o Transformer é inicializado. Por padrão, esses recursos são carregados a partir de uma CDN da Vonage. Você tem a opção de hospedar esses recursos por conta própria. Basta especificar o assetsDirBaseUrl parâmetro com a URL do servidor de hospedagem que aponta para os recursos estáticos.

.init({assetsDirBaseUrl: "https://my-custom-server/path/to/the/resources/root"});

Procuramos tornar a adição da supressão de ruído ao seu aplicativo de Video o mais simples possível. Experimente!

Se você tiver alguma dúvida ou comentário, entre em contato conosco no nosso canal da Comunidade no Slack e siga-nos no X.