Ajustando o áudio e o vídeo — Web

Você pode fazer ajustes de áudio e vídeo em publicado e inscrito fluxos:

Publicação apenas de áudio ou vídeo

Quando você criar um objeto Publisher, é possível especificar se, inicialmente, será publicado apenas áudio ou apenas vídeo. Por exemplo, o código a seguir cria um Publisher apenas para áudio:

var pubOptions = {publishAudio:true, publishVideo:false};

// Replace replacementElementId with the ID of the DOM element to replace:
publisher = OT.initPublisher(replacementElementId, pubOptions);

Por padrão, um objeto Subscriber é inicializado para assinar áudio e vídeo, caso estejam disponíveis.

Depois de criou um objeto Publisher, você pode ativar ou desativar o áudio e o vídeo chamando a função publishAudio() e publishVideo() métodos (passando um valor booleano). Por exemplo, o código a seguir desativa o áudio:

publisher.publishAudio(false);

Ao ativar ou desativar o vídeo com o publishVideo() No método, é possível passar um manipulador de conclusão opcional que será executado após o início ou o término da publicação do vídeo. Por exemplo, o código a seguir poderia ser usado para fazer alterações na interface do usuário após a publicação do vídeo:

publisher.publishVideo(true, (error) => { if (!error) { // You may want to adjust the user interface to let users know // their video is visible to others } });

Quando você ativa ou desativa o áudio ou o vídeo, o objeto Session em cada cliente conectado envia um streamPropertyChanged evento. Para mais informações, consulte StreamPropertyChangedEvent.

Como definir a resolução e a taxa de quadros de um vídeo

É possível definir a taxa de quadros e a resolução da transmissão de um editor configurando um resolution propriedade das opções que você passa para o OT.initPublisher() método. Veja Definindo a resolução de vídeo de uma transmissão e Configurando a taxa de quadros de uma transmissão.

Você também pode alterar a taxa de quadros e a resolução da transmissão de um criador de conteúdo em tempo real, chamando a função setPreferredResolution e setPreferredFrameRate APIs do editor. Consulte Alteração da taxa de quadros e da resolução preferidas para editores.

É possível definir a taxa de quadros e a resolução da transmissão de um assinante configurando o preferredFrameRate e preferredResolution propriedades das opções que você passa para o session.subscribe() método. Recomendamos definir o preferreResolution opção de "auto" para otimizar o uso da CPU e da rede. Consulte Definição da taxa de quadros e da resolução preferidas para os assinantes.

Trocar a câmera usada por um editor

É possível alternar o dispositivo de entrada de vídeo (câmera) usado como fonte de vídeo para um Publisher chamando a função Publisher.cycleVideo() ou Publisher.setVideoSource() método:

Publisher.cycleVideo()

O Publisher.cycleVideo() Esse método permite alternar entre as fontes de vídeo disponíveis (câmeras). Por exemplo, em um dispositivo móvel, é possível alternar entre a câmera frontal e a traseira. O método retorna uma promessa que se resolve quando a operação é concluída com sucesso. A promessa se resolve com um objeto que possui um deviceId propriedade definida como o ID do dispositivo da câmera utilizada:

publisher.cycleVideo().then(console.log);
// Output: {deviceId: "967a86e52..."}

Se ocorrer um erro, a promessa é rejeitada. Isso pode acontecer nas seguintes situações:

  • O usuário negou acesso ao dispositivo de entrada de vídeo.
  • O apresentador não está utilizando uma fonte de vídeo da câmera. Esse método não funciona para um apresentador que compartilha a tela, um apresentador que utiliza uma fonte MediaStreamTrack ou um apresentador que não inclui uma trilha de vídeo (um apresentador apenas de áudio).
  • Não há dispositivos de entrada de vídeo (câmeras) disponíveis.
  • Ocorreu um erro ao obter o vídeo do dispositivo de entrada de vídeo.

Observe que esse método só funciona para um editor que esteja usando uma fonte de vídeo de câmera.

Publisher.setVideoSource()

O Publisher.setVideoSource() Esse método permite passar o ID do dispositivo da nova fonte de vídeo (câmera). O método retorna uma promessa que é resolvida quando a operação é concluída:

publisher.setVideoSource(deviceId)
  .then(() => console.log('video source set'))
  .catch((error) => console.error(error.name));

O seguinte resultará em erros:

  • Se o videoSourceId Se o parâmetro não for uma string ou o ID de um dispositivo de entrada de vídeo válido, a promessa será rejeitada com um erro com o name propriedade definida como 'OT_INVALID_VIDEO_SOURCE'.
  • Se o editor não estiver utilizando uma entrada de câmera no momento, a promessa será rejeitada com um erro com o name propriedade definida como 'OT_SET_VIDEO_SOURCE_FAILURE'.

Você pode usar o OT.getDevices() método para listar os dispositivos de entrada de vídeo disponíveis (e obter seus IDs).

Você pode usar o Publisher.getVideoSource() método para obter a fonte de vídeo atual e o ID do dispositivo (caso se trate de um dispositivo de entrada de vídeo).

Espelhar a exibição local do vídeo de um editor

Você pode definir o mirror propriedade das opções passadas para o OT.initPublisher() método para espelhar o vídeo renderizado localmente pelo editor (true) ou não (false). Por padrão, o vídeo é espelhado para um apresentador que tenha uma fonte de vídeo de câmera, e não é espelhado para um vídeo de compartilhamento de tela.

Essa configuração afeta apenas o vídeo renderizado no aplicativo cliente do editor. Ela não tem efeito sobre o vídeo nos clientes assinantes.

Como alterar a fonte de áudio utilizada por um Publisher

É possível alternar entre o microfone e o objeto MediaStreamTrack usado como fonte de áudio para um Publisher chamando a função setAudioSource() método do objeto Publisher.

Passe um ID de dispositivo de um microfone ou um objeto MediaStreamTrack de áudio para o Publisher.setAudioSource() método. O método retorna uma Promise que é rejeitada em caso de erro (consulte a documentação de referência para setAudioSource()).

Por exemplo, o código a seguir mostra como implementar um cycleMicrophone() função que alterna entre os microfones disponíveis:

// Setting an audio source to a new MediaStreamTrack
const stream = await OT.getUserMedia({
  videoSource: null
});

const [audioSource] = stream.getAudioTracks();
publisher.setAudioSource(audioSource).then(() => console.log('Audio source updated'));

// Cycling through microphone inputs
let audioInputs;
let currentIndex = 0;
OT.getDevices((err, devices) => {
  audioInputs = devices.filter((device) => device.kind === 'audioInput');
  // Find the right starting index for cycleMicrophone
  audioInputs.forEach((device, idx) => {
    if (device.label === publisher.getAudioSource().label) {
      currentIndex = idx;
    }
  });
});

const cycleMicrophone = () => {
  currentIndex += 1;
  let deviceId = audioInputs[currentIndex % audioInputs.length].deviceId;
  publisher.setAudioSource(deviceId);
};

O Publisher.setAudioSource() Esse método só funciona para um publisher que tenha uma fonte de áudio. Se você definir audioSource para null (ou false) ao chamar OT.initPublisher(), não é possível adicionar posteriormente uma fonte de áudio ao editor.

O Publisher.getAudioSource() O método retorna o objeto `MediaStreamTrack` usado como fonte de entrada de áudio atual para o editor.

O OT.getDevices() O método enumera os dispositivos de entrada de áudio e vídeo disponíveis para o navegador.

Alterar a saída de áudio utilizada

Você pode alterar o dispositivo de saída de áudio (um alto-falante ou fones de ouvido) usado para reproduzir o áudio de todos os emissores e receptores (em todas as sessões do OpenTok no navegador).

O OT.getAudioOutputDevices() O método enumera os dispositivos de entrada de áudio e vídeo disponíveis para o navegador.

O OT.getActiveAudioOutputDevice() O método identifica o dispositivo de saída de áudio ativo no momento.

Use o OT.setAudioOutputDevice() método para definir o dispositivo de saída de áudio.

Por exemplo, o código a seguir mostra como implementar um cycleAudioOutput() função que percorre os dispositivos de saída de áudio disponíveis:

// Cycling through audio output devices
let currentIndex = 0;
const audioOutputs = await OT.getAudioOutputDevices();
const currentOutputDevice = await OT.getActiveAudioOutputDevice();
audioOutputs.forEach((device, index) => {
  if (device.label === currentOutputDevice.label) {
    currentIndex = index;
  }
});

const cycleAudioOutput = async () => {
  currentIndex += 1;
  let deviceId = audioOutputs[currentIndex % audioOutputs.length].deviceId;
  await OT.setAudioOutputDevice(deviceId);
};

Detectar quando um reprodutor alterna entre dispositivos de entrada de áudio

Por padrão, o SDK lida automaticamente com a troca do dispositivo de entrada de áudio para qualquer objeto Publisher quando um dispositivo de entrada de áudio é adicionado ou removido, a menos que o gerenciamento de dispositivos de entrada de áudio tenha sido desativado. Consulte Desativando o gerenciamento do dispositivo de entrada de áudio padrão se você quiser desativar a alternância automática do dispositivo de entrada de áudio.

O objeto Publisher dispara um audioInputDeviceChanged evento em que o SDK altera automaticamente a entrada de áudio. Esse evento será disparado quando um novo dispositivo de entrada de áudio for adicionado, quando o dispositivo de entrada de áudio atual for removido ou quando o sistema operacional do Publisher alternar entre dispositivos de entrada de áudio. O evento disparado possui um device propriedade que contém informações sobre o dispositivo de entrada de áudio. Talvez você queira informar aos usuários que o microfone deles mudou:

publisher.on('audioInputDeviceChanged', (event) => {
  console.log('audio input device', event.device);
  console.log(`changing device to: ${event.device.label}`);
});

Publicação em uma sessão apenas de voz

Para configurar uma sessão apenas de voz, defina o videoSource propriedade para null ou false quando você criar cada objeto Publisher na sessão. Por exemplo, o código a seguir cria um Publisher para uma sessão apenas de voz:

var pubOptions = {videoSource: null};

// Replace replacementElementId with the ID of the DOM element to replace:
publisher = OT.initPublisher(replacementElementId, pubOptions);

Quando você define o videoSource propriedade para null, o cliente de publicação não solicita acesso à câmera, e nenhum vídeo é publicado.

Inscrever-se apenas para áudio ou vídeo

Quando você inscrever-se em um canal, você pode especificar se deseja se inscrever inicialmente no áudio ou no vídeo (se estiverem disponíveis). Por exemplo, o código a seguir se inscreve apenas no fluxo de áudio:

var options = {subscribeToAudio:true, subscribeToVideo:false};

// Replace stream and replacementElementId with your own values:
subscriber = session.subscribe(stream,
                             replacementElementId,
                             options);

Depois de criar um objeto Subscriber, você ativa ou desativa o áudio chamando o método subscribeToAudio() método do objeto Subscriber:

subscriber.subscribeToAudio(false); // audio off
subscriber.subscribeToAudio(true); // audio on

Para ativar ou desativar o vídeo, basta chamar a função subscribeToVideo() método do objeto Subscriber:

subscriber.subscribeToVideo(false); // video off
subscriber.subscribeToVideo(true); // video on

Observe, no entanto, que só é possível assinar o áudio ou o vídeo se o cliente que está transmitindo a transmissão incluir áudio ou vídeo. Por exemplo, ao chamar subscribeToVideo(false) não terá efeito se o cliente que está transmitindo o stream estiver transmitindo apenas áudio.

Alteração do nível de áudio de um assinante

Quando você inscrever-se em um canal, você pode definir o volume inicial do assinante ao chamar a função subscribe() método do objeto Session:

// Set a value between 0 (silent) and 100 (full volume):
var subOptions = {audioVolume = 10};

// Replace stream and replacementElementId with your own values:
subscriber = session.subscribe(stream,
                             replacementElementId,
                             subOptions);

Depois de criar um objeto Subscriber, você pode definir seu volume chamando seu setAudioVolume() método, passando um valor entre 0 (silêncio) e 100 (volume máximo):

subscriber.setAudioVolume(0); (silent)

Observe que o usuário também pode silenciar o assinante por meio dos controles da interface do usuário no próprio assinante.

Como verificar se um stream contém áudio ou vídeo

Por padrão, um objeto Subscriber reproduz tanto o áudio quanto o vídeo (se estiverem disponíveis). É possível verificar se um stream possui áudio ou vídeo (se o emissor do stream estiver transmitindo áudio ou vídeo) verificando o hasAudio e hasVideo propriedades do objeto Stream:

if (!stream.hasAudio) {
	// You may want to adjust the user interface
}
if (!stream.hasVideo) {
	// You may want to adjust the user interface
}

Por exemplo, quando você inscrever-se em um canal, talvez seja interessante ajustar a interface do usuário dependendo de o stream conter áudio ou vídeo. Por exemplo, talvez seja interessante indicar ao usuário se um stream contém áudio ou não; ou talvez não seja recomendável ocultar um assinante caso o stream não contenha vídeo.

Detectar quando um stream adiciona ou remove áudio ou vídeo

O objeto Session despacha um streamPropertyChanged evento que ocorre quando uma transmissão ativa ou desativa o áudio ou o vídeo. O streamPropertyChanged O evento é definido pelo StreamPropertyChangedEvent classe. O objeto de evento possui um changedProperty propriedade (que identifica a propriedade do Stream que foi alterada) e um newValue propriedade (o novo valor da propriedade Stream). Por exemplo, o código a seguir monitora alterações em um áudio e em um vídeo em um Stream:

session.on("streamPropertyChanged", function (event) {
    var subscribers = session.getSubscribersForStream(event.stream);
    for (var i = 0; i < subscribers.length; i++) {
        // You may want to display some UI text for each
        // subscriber, or make some other UI change,
        // based on event.changedProperty and
        // event.newValue
    }
}

Observe que o vídeo de um assinante pode ser desativado ou ativado por motivos que não sejam a desativação ou ativação por parte do editor. Um objeto Assinante dispacha videoDisabled e videoEnabled eventos em todas as condições que levam à desativação ou ativação do fluxo do assinante. Para mais detalhes, consulte a documentação do Vídeo do assinante: desativado e Vídeo do assinante ativado eventos.

Otimizações em sessões apenas por voz

Há várias otimizações na interface do usuário que você pode realizar em uma sessão exclusivamente por voz. Consulte o Voz tutorial.

Ajuste da qualidade do áudio

O OT.initPublisher() O método inclui opções para ajustar a qualidade do áudio. Isso permite que você publique transmissões que utilizem áudio de alta qualidade (ou de qualidade inferior):

taxa de bits de áudio (Número) — A taxa de bits desejada para o áudio publicado, em bits por segundo. O intervalo de valores aceito é de 6.000 a 510.000. (Valores inválidos são ignorados.) Defina esse valor para ativar o áudio de alta qualidade (ou para reduzir o uso de largura de banda com áudio de qualidade inferior).

A seguir, apresentamos as configurações recomendadas:

  • 8.000 – 12.000 para voz em banda estreita (NB)
  • 16.000 – 20.000 para fala em banda larga (WB)
  • 28.000 – 40.000 para fala em banda completa (FB)
  • 48.000 a 64.000 para música com banda completa (FB)

Se você não definir essa opção, o OpenTok.js define automaticamente a taxa de bits de áudio para a transmissão.

No momento, essa configuração não é compatível com transmissões publicadas no Firefox.

autoGainControl (Booleano) — Se o controle automático de ganho deve ser ativado para o áudio publicado. Você pode definir esse parâmetro como false ao publicar áudio de alta qualidade (configurando o audioBitrate propriedade do OT.initPublisher() opções). O valor padrão é true. Essa configuração é ignorada se você definir disableAudioProcessing para true (o que desativa o cancelamento de eco, o controle automático de ganho e a supressão de ruído para a transmissão publicada).

desativarProcessamentoDeÁudio (Booleano) — Indica se o cancelamento de eco, o controle automático de ganho e a supressão de ruído devem ser desativados para o áudio transmitido. Você pode definir esse parâmetro como true ao publicar áudio de alta qualidade (configurando o audioBitrate propriedade do OT.initPublisher() opções). O valor padrão é false.

Cancelamento de eco (Booleano) — Se o cancelamento de eco deve ser ativado para o áudio transmitido. Você pode definir esse parâmetro como false ao publicar áudio de alta qualidade (configurando o audioBitrate propriedade do OT.initPublisher() opções). O valor padrão é true. Essa configuração é ignorada se você definir disableAudioProcessing para true (o que desativa o cancelamento de eco, o controle automático de ganho e a supressão de ruído para a transmissão publicada).

Observação: Alguns navegadores (como o Chrome 73+) não oferecem suporte ao cancelamento de eco para áudio estéreo (consulte este relatório de problema do Chrome).

ativarEstéreo (Booleano) — Indica se o áudio estéreo deve ser publicado. O valor padrão é false.

supressão de ruído (Booleano) — Se a supressão de ruído deve ser ativada para o áudio publicado. Você pode definir esse parâmetro como false ao publicar áudio de alta qualidade (configurando o audioBitrate propriedade do OT.initPublisher() opções). O valor padrão é true. Essa configuração é ignorada se você definir disableAudioProcessing para true (o que desativa o cancelamento de eco, o controle automático de ganho e a supressão de ruído para a transmissão publicada). Você também pode utilizar o advancedNoiseSuppression filtro de áudio, que utiliza a biblioteca de mídia da Vonage (consulte esse assunto).

Reduzindo a largura de banda de áudio com o Opus DTX

Opus DTX (Transmissão Discontínua) é um codec de áudio capaz de reduzir o uso de largura de banda quando um participante não está falando. Isso pode ser útil em sessões grandes com muitos participantes de áudio.

Para ativar o Opus DTX, basta definir o enableDtx propriedade do options objeto que você passa para o OT.initPublisher() método (quando inicializando um Publisher).

Para mais informações, consulte isto Artigo da base de conhecimento da Video API da Vonage.

Aplicação de filtros e efeitos em áudio e vídeo

Você pode aplicar filtros e efeitos a arquivos de áudio e vídeo publicados das seguintes maneiras:

Você pode aplicar filtros e efeitos ao áudio e ao vídeo dos canais que você segue ao utilizando a biblioteca do Vonage Media Processor para aplicar transformações.

Esses aspectos são descritos nas seções a seguir.

Publicar um objeto MediaStreamTrack e aplicar efeitos a ele

Você pode usar um faixa de áudio do MediaStream ou um faixa de vídeo do MediaStream como fonte de áudio ou vídeo para uma transmissão publicada. Com esse recurso, você pode aplicar filtros e efeitos, como desfoque de fundo ou substituição de fundo, ao áudio ou vídeo publicado.

Você pode usar o OT.getUserMedia() método para obter uma referência a um MediaStream que utilize a câmera selecionada pelo usuário. Em seguida, você pode usar o MediaStreamTrack de vídeo obtido a partir desse objeto MediaStream como fonte para um elemento Video. Em seguida, é possível adicionar esse elemento `Video` a um elemento `Canvas` do HTML, aplicar filtros ou efeitos à tela e usar o objeto `MediaStreamTrack` do vídeo filtrado, obtido da tela, como fonte de vídeo para uma transmissão publicada. Para ver um exemplo, consulte o exemplo Stream-Filter repositório opentok-web-samples no GitHub.

Você pode usar o OT.getUserMedia() método para obter uma referência a um MediaStream que utilize o microfone selecionado pelo usuário. Em seguida, você pode usar o MediaStreamTrack de áudio obtido a partir desse objeto MediaStream como o audioSource ao ligar OT.initPublisher(). Em seguida, você pode criar um AudioContext objeto e chamar seu createMediaStreamSource() objeto, passando o objeto MediaStream para criar um MediaStreamAudioSourceNode objeto. Em seguida, é possível aplicar filtros de áudio ao objeto `MediaStreamAudioSourceNode`, o que fará com que os filtros sejam aplicados ao fluxo publicado.

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

Use o Publisher.applyVideoFilter() Método para aplicar um filtro de vídeo ao editor. É possível aplicar um filtro de desfoque de fundo ou um filtro de imagem de fundo. Um editor pode ter apenas um (ou nenhum) filtro aplicado por vez. Ao definir um novo filtro, o filtro definido anteriormente é removido.

O código a seguir aplica um filtro de desfoque de fundo ao vídeo de um editor:

publisher.applyVideoFilter({
  type: 'backgroundBlur',
  blurStrength: 'low',
});

O código a seguir aplica um filtro de substituição de plano de fundo ao vídeo de um criador de conteúdo:

publisher.applyVideoFilter({
  type: 'backgroundReplacement',
  backgroundImgUrl: 'http://example.com/image.jpg',
});

Você também pode aplicar um filtro de vídeo definindo o videoFilter opção ao chamar o OT.initPublisher() método:

const publisher = OT.initPublisher(null, {
  videoFilter: {
    type: 'backgroundReplacement',
    backgroundImgUrl: 'http://example.com/image.jpg',
  },
  mirror: false,
});

Importante:

  • Os 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. Consulte Requisitos do cliente.
  • Observação sobre as Políticas de Segurança de Conteúdo (CSP): Se o script-src Se essa diretiva estiver definida, certifique-se de que 'wasm-unsafe-eval' estiver especificado. Caso contrário, o WebAssembly, necessário para filtros de desfoque de fundo ou de substituição, será impedido de carregar e ser executado na página.
  • A imagem de fundo é redimensionada para se adequar às dimensões do vídeo do editor. Para obter melhores resultados, use uma imagem com as mesmas dimensões (ou, pelo menos, a mesma proporção) do vídeo publicado. Defina o mirror opção de false ao chamar o OT.initPublisher() método para que a imagem de fundo apareça na orientação correta (sem estar invertida) na página do editor.

Para obter mais detalhes, consulte a documentação de referência sobre Publisher.applyVideoFilter().

Esse método é incompatível com o Publisher.setVideoMediaProcessorConnector() método. Ao chamar esse método após Publisher.setVideoMediaProcessorConnector(connector) retorna uma promessa que é rejeitada com um erro, com o name propriedade do conjunto de erros definida como 'OT_NOT_SUPPORTED'. Você pode remover o conector chamando Publisher.setVideoMediaProcessorConnector(null).

Você também pode definir o filtro de vídeo inicial configurando um videoFilter opção ao fazer a chamada OT.initPublisher() método.

Para limpar o filtro de vídeo, chame a função Publisher.clearVideoFilter() método.

Notas:

  • Os filtros de vídeo são compatíveis apenas 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+). Você pode verificar se o cliente é compatível com esse recurso chamando o OT.hasMediaProcessorSupport('video') método.
  • A Biblioteca de Mídia da Vonage inclui transformadores que oferecem mais opções do que os filtros de desfoque de fundo e de imagem de fundo fornecidos pelo Publisher.applyVideoFilter('video') método. Além disso, você pode usar a Biblioteca de Mídia da Vonage para criar seus próprios transformadores personalizados de áudio e vídeo. Consulte o Utilização do Processador de Mídia da Vonage guia do desenvolvedor.

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

A supressão avançada de ruído é um filtro de áudio que reduz significativamente o ruído de fundo ao redor do apresentador. Isso pode ser útil quando um participante está em um ambiente lotado ou barulhento, como em um café, ou se houver ruído branco, como o proveniente de um sistema de climatização. Ele pode funcionar separadamente ou em conjunto com o noiseSuppression propriedade definida ao chamar a função OT.initPublisher método.

Use o Publisher.applyAudioFilter() Método para aplicar um filtro de áudio ao editor. É possível aplicar um filtro avançado de supressão de ruído. Um editor pode ter apenas um (ou nenhum) filtro aplicado por vez. Ao definir um novo filtro, qualquer filtro definido anteriormente é removido.

O código a seguir aplica um filtro de áudio avançado para supressão de ruído ao áudio de um editor:

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

Você também pode aplicar o filtro de áudio avançado de supressão de ruído configurando o audioFilter opção ao chamar o OT.initPublisher() método:

const publisher = OT.initPublisher(null, {
  audioFilter: {
    type: 'advancedNoiseSuppression'
  },
});

Importante:

  • Os filtros de áudio 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. Consulte Requisitos do cliente.
  • Observação sobre as Políticas de Segurança de Conteúdo (CSP): Se o script-src Se essa diretiva estiver definida, certifique-se de que 'wasm-unsafe-eval' estiver especificado. Caso contrário, o WebAssembly, necessário para a supressão avançada de ruído, será impedido de carregar e ser executado na página.

Para obter mais detalhes, consulte a documentação de referência sobre Publisher.applyAudioFilter().

Esse método é incompatível com o Publisher.setAudioMediaProcessorConnector() método. Ao chamar esse método após Publisher.setAudioMediaProcessorConnector(connector) retorna uma promessa que é rejeitada com um erro, com o name propriedade do conjunto de erros definida como 'OT_NOT_SUPPORTED'. Você pode remover o conector chamando Publisher.setAudioMediaProcessorConnector(null).

Para desativar o filtro avançado de supressão de ruído, ligue para o Publisher.clearAudioFilter() método.

Notas:

  • Os filtros de áudio são compatíveis apenas com as versões mais recentes do Chrome, Electron, Opera, Edge, Samsung Internet e WebView para Android. Eles 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.
  • Ao usar Publisher.applyAudioFilter(), os recursos são baixados dos servidores da Vonage. Se você preferir hospedar esses recursos por conta própria, consulte esta postagem no blog para obter informações sobre hospedagem e sobre como usar o Publisher.setAudioMediaProcessorConnector() método para aplicar o filtro avançado de supressão de ruído com recursos hospedados localmente.

Utilizando a biblioteca do Vonage Media Processor para aplicar transformações personalizadas

Veja o Utilização do Processador de Mídia da Vonage guia do desenvolvedor.

Publicação apenas de áudio para editores com baixa largura de banda

Os editores podem ser configurados para desativar o vídeo, mantendo o áudio ativado, em situações de baixa largura de banda. A publicação do vídeo será retomada quando a largura de banda do editor melhorar. Para obter mais informações, consulte o Alternativa de áudio guia do desenvolvedor.

Detecção de alterações no desempenho da CPU

É possível detectar alterações na carga da CPU do dispositivo monitorando a sessão cpuPerformanceChanged evento. O evento contém um cpuPerformanceState propriedade, que contém um dos seguintes valores: “nominal”, “razoável”, “grave”, “crítico” (consulte esta especificação do W3C). Em resposta a esse evento, uma aplicação pode notificar os usuários sobre o consumo de recursos ou desativar processos que exigem muito da computação, tais como transformadores de vídeo. Veja a sessão cpuPerformanceChanged evento.

O código a seguir desativa a captura de vídeo quando a CPU entra em um estado crítico de desempenho e a reativa assim que o estado volta a ser “razoável” ou melhor:

let videoDisabledByCPU = false;
  session.on('cpuPerformanceChanged', (event) => {
    if (event.cpuPerformanceState === 'critical'){
      // The application should alert the user why their video is being disabled
      publisher.publishVideo(false);
      videoDisabledByCPU = true;
    } else if (event.cpuPerformanceState === 'nominal' || event.cpuPerformanceState === 'fair'){
      if (videoDisabledByCPU){
        publisher.publishVideo(true);
        videoDisabledByCPU = false;
      }
    }
  })

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

Importante: Esta API tem disponibilidade limitada. cpuPerformanceChanged Atualmente, está disponível apenas para o Chrome 125 ou superior, o Edge 125 ou superior e o Opera 111 ou superior.

Notas para depuração:

  • Esse evento só é disparado quando o navegador está em foco.
  • Para usar esse evento em conjunto com iframes, é necessário habilitar o calcular a política de permissões de pressão. Isso pode causar problemas ao usar IDEs on-line.

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.