Ajustes de abonado

Visión general

Los SDK del cliente de video de Vonage permiten que los participantes se suscriban a audio y video en una sesión. Los SDK de cliente permiten configurar el objeto Suscriptor según tus preferencias y caso de uso.

Este tutorial repasará:

  • Suscribirse sólo a audio o vídeo
  • Detectar si un flujo tiene audio o vídeo
  • Cambiar la configuración de vídeo de un abonado
  • Modificar la configuración de audio de un abonado

Suscribirse sólo a audio o vídeo

Cuando suscribirse a un flujopuede especificar si desea suscribirse inicialmente a audio o vídeo (si están disponibles). Por ejemplo, el siguiente código sólo se suscribe al flujo de audio:

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

Después de crear un objeto Subscriber, puede activar o desactivar el audio llamando a la función subscribeToAudio() del objeto Subscriber:

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

Para activar o desactivar el vídeo, llame al botón subscribeToVideo() del objeto Subscriber:

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

Tenga en cuenta, sin embargo, que sólo puede suscribirse a audio o vídeo si el cliente que publica el flujo incluye audio o vídeo. Por ejemplo, si llama a subscribeToVideo(false) no tendrá ningún efecto si el cliente que publica el flujo sólo publica audio.

Detectar si un flujo tiene audio o vídeo

Por defecto, un objeto Suscriptor reproduce tanto audio como vídeo (si están disponibles). Puede comprobar si una transmisión tiene audio o vídeo (si el editor de la transmisión está transmitiendo audio o vídeo) comprobando el parámetro hasAudio y hasVideo del objeto Stream:

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

You may want to set state properties based on the hasAudio and hasVideo properties and adjust the UI for the OTSubscriber based on these state values. You may want to adjust the user interface based on whether the stream has audio or video. For example, you may want to indicate to the user whether a stream has audio or not; or you may not want to hide a subscriber if a stream does not have video.

Por ejemplo, cuando suscribirse a un flujoPor ejemplo, es posible que desee ajustar la interfaz de usuario en función de si el flujo tiene audio o vídeo. Por ejemplo, puede que desee indicar al usuario si un flujo tiene audio o no; o puede que no desee ocultar a un abonado si un flujo no tiene vídeo.

Detectar cuándo un flujo añade o elimina audio o vídeo

The OTSession object dispatches a streamPropertyChanged event when a stream toggles audio or video on or off. The event object has a changedProperty property set to hasAudio or hasVideo when the audio or video changes. The newValue property is set to a Boolean value. For example, the following code listens for changes in a audio and video in a 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.
    }
}}/>

Cambiar la configuración de vídeo de un abonado

Ajustar la resolución y la frecuencia de imagen de un vídeo

Puede establecer la frecuencia de imagen y la resolución para la transmisión de un abonado configurando en preferredFrameRate y preferredResolution de las opciones que introduzca en el campo session.subscribe() método. Se recomienda configurar el preferredResolution opción de "auto" para optimizar el uso de la CPU y la red. El sitio "auto" es una función beta. Consulte Ajuste de la frecuencia de imagen y la resolución preferidas

Cambiar la configuración de audio de un abonado

Conmutación de la salida de audio utilizada por un abonado

You can switch the audio output device (a speaker or headphones) used to play audio from all publishers and subscribers (in all Vonage Video sessions in the browser).

The OT.getAudioOutputDevices() method enumerates the audio and video input devices available to the browser.

The OT.getActiveAudioOutputDevice() method identifies the currently active audio output device.

Use the OT.setAudioOutputDevice() method to set the audio output device.

For example, the following code shows you how to implement a cycleAudioOutput() function that cycles through the available audio output devices:

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

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

After you create a Subscriber object, you can set its volume by calling its setAudioVolume() method, passing in a value from 0 (silent) to 100 (full volume):

subscriber.setAudioVolume(0); (silent)

Note that the user can also mute the subscriber via user interface controls in the subscriber.