Ajustando áudio e vídeo — React Native

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

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

Para ativar e desativar o áudio e o vídeo, defina o publishAudio e publishVideo propriedades do properties prop passado para o Componente OTPublisher:

<OTPublisher
  properties={{
    publishAudio: true,
    publishVideo: false,
  }}
/>

Por padrão, esses parâmetros estão definidos como true (tanto o áudio quanto o vídeo são publicados).

Quando você ativa ou desativa o áudio ou o vídeo, o objeto OTSession em cada cliente conectado dispara um streamPropertyChanged evento com o changedProperty propriedade do objeto do evento definida como "hasAudio" ou "hasVideo".

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

Para configurar um sessão apenas de voz, defina o videoTrack propriedades do properties prop passado para o Componente OTPublisher para false:

<OTPublisher
  properties={{
    videoTrack: false,
  }}
/>

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

Para definir uma resolução de vídeo recomendada para uma transmissão publicada, defina o resolution propriedade do properties propriedade do componente OTPublisher:

<OTPublisher
  properties={{
    resolution: '1280x720',
  }}
/>

Isso resolution A propriedade é uma string que define a resolução desejada do vídeo. O formato da string é "widthxheight", em que a largura e a altura são representadas em pixels. Os valores válidos são "1920x1080", "1280x720", "640x480", e "320x240".

A resolução padrão para uma transmissão (caso você não especifique uma resolução) é de 640x480 pixels. Se o sistema do cliente não for compatível com a resolução solicitada, a transmissão utilizará a próxima configuração maior compatível.

É melhor tentar ajustar a resolução ao tamanho em que o vídeo será exibido. Se você estiver exibindo o vídeo apenas em 320x240 pixels, não faz sentido transmiti-lo em 1280x720 ou 1920x1080. Reduzir a resolução pode economizar largura de banda e diminuir o congestionamento e as quedas de conexão.

Observação: Veja o Guia para desenvolvedores sobre 1080p para considerações sobre o uso da resolução 1080p.

Para definir uma taxa de quadros recomendada para uma transmissão publicada, defina o frameRate propriedade do properties propriedade do componente OTPublisher:

<OTPublisher
  properties={{
    frameRate: 7,
  }}
/>

Defina o valor correspondente à taxa de quadros desejada, em quadros por segundo, do vídeo. Os valores válidos são 30 (padrão), 15, 7 e 1.

Para sessões que utilizam o OpenTok Media Router (sessões com omodo de mídia (configurado como “routed”), reduzir a taxa de quadros diminui proporcionalmente a largura de banda máxima que o stream pode utilizar. No entanto, durante a sessão com o modo de mídia Quando configurado para retransmissão, a redução da taxa de quadros não diminui a largura de banda da transmissão.

Reduzir a taxa de quadros pode diminuir a largura de banda necessária. Vídeos com resolução menor podem ter uma taxa de quadros mais baixa sem que o usuário perceba grande diferença. Portanto, se você estiver usando uma resolução baixa, talvez seja uma boa ideia considerar também uma taxa de quadros baixa.

Você também pode restringir a taxa de quadros do stream de vídeo de um assinante. Para obter mais informações, consulte Restrição da taxa de quadros de uma transmissão assinada.

Configurando a câmera utilizada pelo editor

Você pode fazer com que o desenvolvedor utilize a câmera traseira do dispositivo configurando um properties prop do componente OTPublisher e definindo o cameraPosition propriedade desse objeto para "back":

<OTPublisher
  properties={{
    cameraPosition: 'back',
  }}
/>

Observe que você também pode publicar uma transmissão de compartilhamento de tela — na qual a fonte é a tela do cliente, e não uma câmera. Para mais detalhes, consulte Compartilhamento de tela.

Ativando a lanterna da câmera

Defina o cameraTorch propriedade do objeto passado como o properties adereço do OTPublisher objeto para ativar ou desativar o flash da câmera (lanterna) durante a gravação de vídeo:

<OTPublisher
  properties={{
    cameraTorch: false,
  }}
/>

O valor padrão é false (a lanterna não é usada).

Observe que nem todas as câmeras dos dispositivos possuem flash. Se a câmera ativa não for compatível com a funcionalidade de flash (por exemplo, a câmera frontal normalmente não é compatível), configure cameraTorch não tem efeito.

Ajustando o zoom da câmera

Defina o cameraZoomFactor propriedade do objeto passado como o properties adereço do OTPublisher objeto para definir a taxa de zoom (fator) da câmera:

<OTPublisher
  properties={{
    cameraZoomFactor: 0.7,
  }}
/>

O valor da relação/fator varia de 0,5 até o fator de zoom máximo. Valores entre 0,5 e 1,0 representam a ultra-grande angular (zoom out), e valores entre 1,0 e o fator de zoom máximo representam o zoom in. O fator de zoom efetivamente aplicado é limitado ao intervalo suportado pela configuração da câmera ativa — se a câmera não suportar a ultra-grande angular, os fatores de zoom definidos abaixo de 1,0 não terão efeito e nenhum zoom será aplicado. Para valores acima do fator de zoom máximo suportado pela câmera, o fator de zoom será definido como o valor máximo suportado.

Inscrever-se apenas para áudio ou vídeo

Para desativar o áudio ou o vídeo de um assinante, defina o subscribeToAudio ou subscribeToVideo propriedades do properties prop passado para o OTSubscriber componente:

<OTSubscriber
  properties={{
    subscribeToAudio: true,
    subscribeToVideo: false,
  }}
/>

Por padrão, esses parâmetros estão definidos como true (tanto o áudio quanto o vídeo são reproduzidos).

Defina o subscribeToAudio prós 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 inscreve apenas no áudio:

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 definir subscribeToVideo para 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)

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

Na OTSession streamCreated O evento inclui hasAudio e hasVideo propriedades:

<OTSession
  eventHandlers={{
    streamCreated: event => {
      console.log('Stream created -- stream ID:', event.streamId);
      console.log('hasAudio:', event.hasAudio);
      console.log('hasVideo:', event.hasVideo);
    }
  }}/>

Talvez você queira definir propriedades de estado com base no hasAudio e hasVideo propriedades e ajustar a interface do usuário para o OTSubscriber com base nesses valores de estado. Talvez seja interessante ajustar a interface do usuário dependendo de o stream conter áudio ou vídeo. Por exemplo, pode ser 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 OTSession despacha um streamPropertyChanged evento que ocorre quando um stream ativa ou desativa o áudio ou o vídeo. O objeto do evento possui um changedProperty propriedade definida como hasAudio ou hasVideo quando o áudio ou o vídeo muda. O newValue A propriedade é definida como um valor booleano. Por exemplo, o código a seguir monitora alterações em um áudio e um vídeo em um Stream:

<OTSession
eventHandlers={{
  streamPropertyChanged: event => {
    if (event.changedProperty === 'hasAudio')
      // Adjust the UI for the subscriber to event.streamId.
    } else if (event.changedProperty === 'hasVideo') {
      // Adjust the UI for the subscriber to event.streamId.
    }
}}/>

Definição da taxa de bits de áudio

Para definir a taxa de bits de áudio do fluxo de áudio de um editor, defina o audioBitrate propriedade do properties prop passado para o OTPublisher componente:

<OTPublisher
  properties={{
    audioBitrate: 48000,
  }}
/>

O audioBitrate Essa configuração define a taxa de bits desejada para o áudio publicado, em bits por segundo. O intervalo de valores suportado é de 6.000 a 510.000. 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)

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 properties prop passado para o OTPublisher componente:

<OTPublisher
  properties={{
    enableDtx: true,
  }}
/>

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

Aplicando filtros a vídeos publicados

Use o OTPublisher.setVideoTransformers() método para aplicar um filtro de vídeo a um vídeo publicado. Você pode aplicar um filtro de desfoque de fundo ou um filtro de imagem de fundo.

Importante: Na versão 2.28.0+ do SDK do Vonage Video para React Native, é necessário instalar a Biblioteca de Mídia do Vonage separadamente do SDK do Vonage Video para React Native. Para mais detalhes, consulte Integração com a Biblioteca de Mídia da Vonage.

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

<OTPublisher
  eventHandlers={{
    streamCreated: () => {
      this.publisher.setVideoTransformers([
        {
          name: 'BackgroundBlur',
          properties: JSON.stringify({
            radius: 'low',
          }),
        }
      ])
    }
  }}
  ref={instance => {
    this.publisher = instance;
  }}
/>

Observe que o OTPublisher.setVideoTransformers() O método recebe uma matriz de objetos `transformer`. Cada objeto possui duas propriedades:

  • A name propriedade, definida como 'BackgroundBlur' ou 'BackgroundReplacement'.

  • A properties propriedade, definindo as opções do filtro.

Para mais detalhes, consulte a documentação do OTPublisher.setVideoTransformers() método.

O código a seguir aplica um filtro de substituição de plano de fundo ao vídeo de um editor (compatível apenas com iOS):

<OTPublisher
  eventHandlers={{
    streamCreated: () => {
      this.publisher.setVideoTransformers([
        {
          name: 'BackgroundReplacement',
          properties: JSON.stringify({
            image_file_path: 'path/to/image',
          }),
        }
      ])
    }
  }}
  ref={instance => {
    this.publisher = instance;
  }}
/>

Para remover os filtros de vídeo da transmissão publicada, chame a função OTPublisher.setVideoTransformers() método e passe um array vazio.

Importante: Os filtros de desfoque de fundo e de substituição de fundo consomem muitos recursos e exigem dispositivos com alto poder de processamento. Recomenda-se utilizar essas transformações apenas em dispositivos compatíveis. Consulte a documentação a seguir:

Aplicação de um filtro de supressão de ruído a um vídeo publicado

Use o OTPublisher.setAudioTransformers() método para aplicar um transformador de áudio a um vídeo publicado. Um transformador, o filtro de supressão de ruído, é compatível.

Importante: O filtro de supressão de ruído utiliza a Vonage Media Library. É necessário instalar a Vonage Media Library separadamente do SDK do Vonage Video para React Native. Para mais detalhes, consulte Integração com a Biblioteca de Mídia da Vonage.

O código a seguir aplica um filtro de supressão de ruído ao vídeo de um editor:

<OTPublisher
  eventHandlers={{
    streamCreated: () => {
      this.publisher.setAudioTransformers([
        {
          name: 'NoiseSuppression',
          properties: '',
        }
      ])
    }
  }}
  ref={instance => {
    this.publisher = instance;
  }}
/>

Para remover transformadores de áudio do fluxo publicado, chame a função OTPublisher.setAudioTransformers() método e passe um array vazio.

Importante: Os transformadores de áudio consomem muitos recursos e exigem dispositivos com alto poder de processamento. Recomenda-se utilizar essas transformações apenas em dispositivos compatíveis. Consulte a documentação a seguir:

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

Os publicadores 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 publicador melhorar.

Para obter mais informações, consulte o Opção alternativa de áudio guia do desenvolvedor.

Definição da preferência de redução da qualidade de vídeo do editor

Quando a largura de banda ou a CPU estão limitadas, o mecanismo de vídeo pode reduzir a taxa de quadros e/ou a resolução do vídeo do editor para se adaptar a essas limitações.

A preferência de degradação é uma configuração que permite ajustar esse comportamento.

Os desenvolvedores são responsáveis por definir e aplicar as preferências de degradação de acordo com seu caso de uso e requisitos.

Isso funciona como uma preferência, o que significa que o mecanismo de vídeo tentará seguir a preferência selecionada, mas não há garantias quanto ao resultado.

Essa preferência pode se comportar de maneira diferente ao usar vídeo escalável, onde o mecanismo de vídeo pode optar por remover camadas em vez de reduzir a resolução.

Dica de conteúdo e a preferência de degradação têm finalidades diferentes, mas relacionadas: a dica de conteúdo descreve o tipo de conteúdo que está sendo transmitido, enquanto a preferência de degradação controla a estratégia de codificação. Ao definir uma dica de conteúdo, o mecanismo de vídeo determina automaticamente a preferência de degradação adequada (por exemplo, “texto” seleciona automaticamente a manutenção da resolução). Uma preferência de degradação definida explicitamente substituirá essa seleção automática.

Você pode definir esse valor usando qualquer uma das opções fornecidas DegradationPreference valores:

Não definido

<OTPublisher properties={{ degradationPreference: DegradationPreference.NotSet }}/>

O valor padrão. O mecanismo de vídeo determinará a preferência ideal de redução de qualidade.

Manter a taxa de quadros e a resolução

<OTPublisher properties={{ degradationPreference: DegradationPreference.MaintainFrameRateAndResolution }}/>

O motor de vídeo tentará manter a taxa de quadros estável e não reduzir a resolução.

Manter a taxa de quadros

<OTPublisher properties={{ degradationPreference: DegradationPreference.MaintainFrameRate }}/>

O motor de vídeo tentará manter a taxa de quadros estável, mas poderá reduzir a resolução, se necessário.

Manter a resolução

<OTPublisher properties={{ degradationPreference: DegradationPreference.MaintainResolution }}/>

O motor de vídeo não reduzirá a resolução, mas poderá reduzir a taxa de quadros, se necessário.

Equilibrado

<OTPublisher properties={{ degradationPreference: DegradationPreference.Balanced }}/>

O motor de vídeo tentará encontrar um equilíbrio entre a redução da resolução e da taxa de quadros, quando necessário.