Ajustar el audio y el vídeo — React Native

Puedes realizar ajustes de audio y vídeo en publicado y suscrito fuentes:

Publicar sólo audio o vídeo

Para activar y desactivar el audio y el vídeo, ajuste la opción publishAudio y publishVideo propiedades del properties prop pasado a la Componente OTPublisher:

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

Por defecto, están configurados en true (se publican tanto audio como vídeo).

Al activar o desactivar el audio o el vídeo, el objeto OTSession de cada cliente conectado envía una streamPropertyChanged evento con el changedProperty del objeto de evento como "hasAudio" o "hasVideo".

Publicar en una sesión solo de voz

Para configurar un sesión de sólo voz, fije el videoTrack propiedades del properties prop pasado a la Componente OTPublisher a false:

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

Configuración de la resolución y la velocidad de fotogramas de un vídeo

Para establecer una resolución de vídeo recomendada para una transmisión publicada, configura el resolution propiedad del properties prop del componente OTPublisher:

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

Este resolution es una cadena que define la resolución deseada del vídeo. El formato de la cadena es "widthxheight"donde la anchura y la altura se representan en píxeles. Los valores válidos son "1920x1080", "1280x720", "640x480"y "320x240".

La resolución predeterminada de una transmisión (si no se especifica ninguna resolución) es de 640 x 480 píxeles. Si el sistema del cliente no es compatible con la resolución solicitada, la transmisión utilizará la siguiente configuración más alta que admita.

Lo mejor es intentar ajustar la resolución al tamaño en que se mostrará el vídeo. Si sólo vas a visualizar el vídeo a 320x240 píxeles, no tiene sentido transmitir a 1280x720 o 1920x1080. Reducir la resolución puede ahorrar ancho de banda y reducir la congestión y las caídas de la conexión.

Nota: Consulta el Guía del desarrollador 1080p para conocer los aspectos que hay que tener en cuenta a la hora de utilizar una resolución de 1080p.

Para establecer una frecuencia de fotogramas recomendada para una transmisión publicada, configura el frameRate propiedad del properties prop del componente OTPublisher:

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

Ajuste el valor a la velocidad de fotogramas deseada, en fotogramas por segundo, del vídeo. Los valores válidos son 30 (por defecto), 15, 7 y 1.

En el caso de las sesiones que utilizan el OpenTok Media Router (sesiones con elmodo multimedia (configurado en «routed»), al reducir la frecuencia de fotogramas se reduce proporcionalmente el ancho de banda máximo que puede utilizar la transmisión. Sin embargo, en una sesión con el modo multimedia en retransmitido, la reducción de la frecuencia de imagen no reduce el ancho de banda del flujo.

Reducir la frecuencia de fotogramas puede reducir el ancho de banda necesario. Los vídeos con una resolución más baja pueden tener una frecuencia de fotogramas menor sin que el usuario note una gran diferencia. Por lo tanto, si utilizas una resolución baja, quizá también te interese plantearte utilizar una frecuencia de fotogramas baja.

También puedes limitar la frecuencia de fotogramas de la transmisión de vídeo de un suscriptor. Para obtener más información, consulta Limitar la frecuencia de fotogramas de una transmisión a la que se está suscrito.

Configuración de la cámara utilizada por la editorial

Puede hacer que el editor utilice la cámara trasera del dispositivo estableciendo un properties prop del componente OTPublisher y configurando el cameraPosition propiedad de ese objeto a "back":

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

Ten en cuenta que también puedes publicar una transmisión compartida de pantalla, es decir, una en la que la fuente sea la pantalla del cliente, y no una cámara. Para obtener más información, consulta Compartir pantalla.

Activar la linterna de la cámara

Fije el cameraTorch propiedad del objeto pasado como properties puntal del OTPublisher objeto para activar o desactivar la linterna de la cámara (antorcha) mientras se captura vídeo:

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

El valor por defecto es false (la linterna no se utiliza).

Tenga en cuenta que no todas las cámaras de los dispositivos disponen de linterna. Si la cámara activa no admite la función de linterna de cámara (por ejemplo, la cámara frontal no suele admitirla), configurando cameraTorch no tiene ningún efecto.

Ajuste del zoom de la cámara

Fije el cameraZoomFactor propiedad del objeto pasado como properties puntal del OTPublisher para ajustar la relación de zoom de la cámara (factor):

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

El valor de la relación o factor oscila entre 0,5 y el factor de zoom máximo. Los valores comprendidos entre 0,5 y 1,0 corresponden al gran angular (alejamiento), mientras que los valores comprendidos entre 1,0 y el factor de zoom máximo corresponden al acercamiento. El factor de zoom real aplicado se limita al rango admitido por la configuración de la cámara activa: si la cámara no admite el gran angular, los factores de zoom establecidos por debajo de 1,0 no surtirán efecto y no se aplicará ningún zoom. En el caso de valores superiores al factor de zoom máximo admitido por la cámara, el factor de zoom se establecerá en el valor máximo admitido.

Suscribirse solo a contenido de audio o vídeo

Para desactivar el audio o el vídeo de un suscriptor, configura el subscribeToAudio o subscribeToVideo propiedades del properties prop pasó al OTSubscriber componente:

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

Por defecto, están configurados en true (se consumen tanto el audio como el vídeo).

Fije el subscribeToAudio pro Cuando tú suscribirse a un flujo, puedes especificar si deseas suscribirte inicialmente al audio o al vídeo (si están disponibles). Por ejemplo, el siguiente código se suscribe únicamente al audio:

Ten en cuenta, sin embargo, que solo puedes suscribirte al audio o al vídeo si el cliente que publica la transmisión incluye audio o vídeo. Por ejemplo, al configurar subscribeToVideo a false no tendrá ningún efecto si el cliente que publica el flujo sólo publica audio.

Modificar el nivel de audio de un abonado

Cuando suscribirse a un flujopuede ajustar el volumen inicial del abonado cuando llama al subscribe() del 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);

Después de crear un objeto Suscriptor, puede establecer su volumen llamando a su función setAudioVolume() pasando un valor de 0 (silencio) a 100 (volumen máximo):

subscriber.setAudioVolume(0); (silent)

Detectar si un flujo tiene audio o vídeo

En la sesión OTSession streamCreated El evento incluye hasAudio y hasVideo propiedades:

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

Quizá te interese establecer las propiedades de estado en función de la hasAudio y hasVideo propiedades y ajustar la interfaz de usuario para el OTSubscriber en función de estos valores de estado. Es posible que quieras ajustar la interfaz de usuario en función de si la transmisión tiene audio o vídeo. Por ejemplo, quizá quieras indicar al usuario si una transmisión tiene audio o no; o quizá no quieras ocultar a un suscriptor si una transmisión no tiene vídeo.

Detectar cuándo una transmisión añade o elimina audio o vídeo

El objeto OTSession envía un streamPropertyChanged cuando un flujo activa o desactiva el audio o el vídeo. El objeto de evento tiene un changedProperty con el valor hasAudio o hasVideo cuando cambia el audio o el vídeo. La dirección newValue La propiedad se establece en un valor booleano. Por ejemplo, el siguiente código detecta los cambios en el audio y el vídeo de un 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.
    }
}}/>

Configuración de la tasa de bits de audio

Para establecer la velocidad de bits de audio para el flujo de audio de un editor, establezca el parámetro audioBitrate propiedad del properties prop pasó al OTPublisher componente:

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

El audioBitrate Este parámetro indica la tasa de bits deseada para el audio publicado, en bits por segundo. El rango de valores admitido es de 6.000 a 510.000. Establece este valor para activar el audio de alta calidad (o para reducir el consumo de ancho de banda con audio de menor calidad).

A continuación se indican los ajustes recomendados:

  • 8.000 - 12.000 para voz de banda estrecha (NB)
  • 16.000 - 20.000 para voz de banda ancha (WB)
  • Entre 28 000 y 40 000 para la voz en banda completa (FB)
  • 48.000 - 64.000 para música de banda completa (FB)

Reducción del ancho de banda de audio con Opus DTX

Opus DTX (Transmisión discontinua) Es un códec de audio que permite reducir el consumo de ancho de banda cuando un participante no está hablando. Esto puede resultar útil en sesiones con un gran número de participantes de audio.

Para activar Opus DTX, configure la opción enableDtx propiedad del properties prop pasó al OTPublisher componente:

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

Para obtener más información, consulta esto Artículo de la base de conocimientos de la API de Video de Vonage.

Aplicar filtros a un vídeo publicado

Utiliza el OTPublisher.setVideoTransformers() Método para aplicar un filtro a un vídeo publicado. Puedes aplicar un filtro de desenfoque de fondo o un filtro de imagen de fondo.

Importante: En la versión 2.28.0+ del SDK de Vonage Video para React Native, es necesario instalar la biblioteca multimedia de Vonage por separado del SDK de Vonage Video para React Native. Para obtener más información, consulta Integración con la biblioteca multimedia de Vonage.

El siguiente código aplica un filtro de desenfoque de fondo al vídeo de un editor:

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

Tenga en cuenta que el OTPublisher.setVideoTransformers() El método toma una matriz de objetos «transformer». Cada objeto tiene dos propiedades:

  • A name con el valor 'BackgroundBlur' o 'BackgroundReplacement'.

  • A properties que define las opciones del filtro.

Para obtener más información, consulte la documentación de OTPublisher.setVideoTransformers() método.

El siguiente código aplica un filtro de sustitución de fondo al vídeo de un editor (sólo compatible con iOS):

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

Para eliminar los filtros de vídeo de la transmisión publicada, llama a la función OTPublisher.setVideoTransformers() y pasar un array vacío.

Importante: Los filtros de desenfoque de fondo y de sustitución de fondo consumen muchos recursos y requieren dispositivos con una gran potencia de procesamiento. Se recomienda utilizar estas transformaciones únicamente en dispositivos compatibles. Consulta la siguiente documentación:

Aplicación de un filtro de supresión de ruido a un vídeo publicado

Utiliza el OTPublisher.setAudioTransformers() Método para aplicar un transformador de audio a un vídeo publicado. Se admite un transformador: el filtro de supresión de ruido.

Importante: El filtro de supresión de ruido utiliza la biblioteca multimedia de Vonage. Es necesario instalar la biblioteca multimedia de Vonage por separado del SDK de Vonage Video para React Native. Para obtener más información, consulta Integración con la biblioteca multimedia de Vonage.

El siguiente código aplica un filtro de supresión de ruido al vídeo de un editor:

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

Para eliminar los transformadores de audio del flujo publicado, llame a la función OTPublisher.setAudioTransformers() y pasar un array vacío.

Importante: Los transformadores de audio consumen muchos recursos y requieren dispositivos con una gran capacidad de procesamiento. Se recomienda utilizar estas transformaciones únicamente en dispositivos compatibles. Consulta la siguiente documentación:

Publicación de audio solo para editores con poco ancho de banda

Los servidores de publicación se pueden configurar para desactivar el vídeo, manteniendo el audio activado, en situaciones de bajo ancho de banda. La publicación de vídeo se reanudará cuando mejore el ancho de banda del servidor de publicación.

Para más información, consulte el Alternativa de audio guía del desarrollador.

Configuración de las preferencias de reducción de calidad de los vídeos del editor

Cuando el ancho de banda o la CPU son limitados, el motor de vídeo puede reducir la frecuencia de imagen y/o la resolución del vídeo del editor para ajustarse a las limitaciones.

La «preferencia de degradación» es un parámetro de configuración que permite ajustar este comportamiento.

Los desarrolladores son responsables de definir y aplicar las preferencias de degradación en función de sus casos de uso y requisitos.

Funciona como una opción de configuración, lo que significa que el motor de vídeo intentará seguir la opción seleccionada, pero no hay garantías sobre el resultado.

Esta preferencia puede comportarse de forma diferente cuando se utiliza vídeo escalabledonde el motor de vídeo puede decidir eliminar capas en lugar de degradar la resolución.

Sugerencia sobre el contenido y la preferencia de degradación sirven a propósitos diferentes pero relacionados: La sugerencia de contenido describe el tipo de contenido que se transmite, mientras que la preferencia de degradación controla la estrategia de codificación. Al definir una sugerencia de contenido, el motor de vídeo determina automáticamente la preferencia de degradación adecuada (por ejemplo, "texto" selecciona automáticamente mantener la resolución). Una preferencia de degradación establecida explícitamente anulará esta selección automática.

Puedes configurar este valor utilizando cualquiera de las opciones proporcionadas DegradationPreference valores:

No se ha establecido

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

El valor por defecto. El motor de vídeo determinará la preferencia de degradación óptima.

Mantener la frecuencia de fotogramas y la resolución

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

El motor de vídeo intentará mantener constante la frecuencia de fotogramas y no reducir la resolución.

Mantener la frecuencia de fotogramas

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

El motor de vídeo intentará mantener constante la frecuencia de fotogramas, pero podría reducir la resolución si fuera necesario.

Mantener la resolución

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

El motor de vídeo no reducirá la resolución, pero podría reducir la frecuencia de fotogramas si fuera necesario.

Equilibrado

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

El motor de vídeo intentará encontrar un equilibrio entre la reducción de la resolución y la frecuencia de fotogramas cuando sea necesario.