Ajustes del editor

Visión general

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

Este tutorial repasará:

  • Publicar sólo audio o vídeo
  • Cambiar la configuración de vídeo de un editor
  • Cambiar la configuración de audio de un editor

Publicar sólo audio o vídeo

Cuando crear un objeto Publisherpuede especificar si desea publicar inicialmente sólo audio o sólo vídeo. Por ejemplo, el siguiente código crea un Publisher sólo de audio:

To toggle audio and video on and off, set the publishAudio and publishVideo properties of the properties prop passed into the OTPublisher component:

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

By default, these are set to true (both audio and video are published).

Una vez creado un objeto Publisher, puede activar o desactivar el audio y el vídeo llamando a la función publishAudio() y publishVideo() (pasando un valor booleano). Por ejemplo, el siguiente código desactiva el audio:

publisher.publishAudio(false);

Al activar o desactivar el audio o el vídeo, el objeto Session de cada cliente conectado envía un comando streamPropertyChanged evento. También hay una serie de optimizaciones de la interfaz de usuario que puedes realizar en una sesión de sólo voz. Consulta la sección Voz guía.

Publicar en una sesión de sólo voz

Para configurar una sesión de sólo voz, configure la opción videoSource propiedad a null o false al crear cada objeto Publisher en la sesión. Por ejemplo, el siguiente código crea un editor para una sesión de sólo voz:

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

Cuando ajuste el videoSource propiedad a nullel cliente de publicación no solicita acceso a la cámara y no se publica ningún vídeo.

Publicación de audio sólo para editores con poco ancho de banda

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

Para más información, consulte el Audio fallback guía del desarrollador.

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

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

To set a recommended video resolution for a published stream, set the resolution property of the properties prop of the OTPublisher component:

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

This resolution property is a string, defining the desired resolution of the video. The format of the string is "widthxheight", where the width and height are represented in pixels. Valid values are "1920x1080", "1280x720", "640x480", and "320x240".

The default resolution for a stream (if you do not specify a resolution) is 640x480 pixels. If the client system cannot support the resolution you requested, the stream will use the next largest setting supported.

It is best to try to match the resolution to the size that the video will be displayed. If you are only displaying the video at 320x240 pixels then there is no point in streaming at 1280x720 or 1920x1080. Reducing the resolution can save bandwidth and reduce congestion and connection drops.

Note: See the 1080p developer guide for considerations about using 1080p resolution.

To set a recommended frame rate for a published stream, set the frameRate property of the properties prop of the OTPublisher component:

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

Set the value to the desired frame rate, in frames per second, of the video. Valid values are 30 (the default), 15, 7, and 1.

Activar la antorcha de la cámara (linterna)

Set the cameraTorch property of the object passed in as the properties prop of the OTPublisher object to enable or disable the camera flashlight (torch) while capturing video:

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

The default value is false (the flashlight is not used).

Note the not all device cameras have a camera flashlight. If the active camera does not support camera flashlight functionality (for example, the front camera typically does not support it), setting cameraTorch has no effect.

Ajuste del zoom de la cámara

Set the cameraZoomFactor property of the object passed in as the properties prop of the OTPublisher object to set the camera zoom ratio (factor):

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

The ratio/factor value ranges from 0.5 to the maximum zoom factor. Values between 0.5 and 1.0 represent ultra-wide-angle (zoom out), and values between 1.0 and the maximum zoom factor represent zooming in. The actual zoom factor applied is clamped to the range supported by the active camera's configuration — if the camera does not support ultra-wide-angle, zoom factors set below 1.0 will not take effect and no zoom will be applied. For values over the maximum zoom factor supported by the camera, the zoom factor will be set to the maximum supported value.

Cambiar la cámara utilizada por un editor

You can have the publisher use the rear-facing camera of the device by setting a properties prop of the OTPublisher component and setting the cameraPosition property of that object to "back":

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

Reflejar la visualización local de un vídeo de un editor

You can set the mirror property of the options passed into the OT.initPublisher() method to have the publisher's locally rendered video mirrored (true) or not (false). By default, video is mirrored for a publisher that has a camera video source, and not mirrored for a screen-sharing video.

This setting only affects the rendered video in the publisher's client application. It has no effect on the video in subscribing clients.

Cambiar la configuración de audio de un editor

Cambiar la fuente de audio utilizada por un editor

You can switch the microphone or MediaStreamTrack object used as the audio source for a Publisher by calling the setAudioSource() method of the Publisher object.

Pass a device ID for a microphone or an audio MediaStreamTrack object into the Publisher.setAudioSource() method. The method returns a Promise that is rejected on error (see the reference documentation for setAudioSource()).

For example, the following code shows you how to implement a cycleMicrophone() function that cycles through the microphones available:

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

The Publisher.setAudioSource() method only works for a publisher that has an audio source. If you set audioSource to null (or false) when calling OT.initPublisher(), you cannot later add an audio source to the publisher.

The Publisher.getAudioSource() method returns the MediaStreamTrack object used as the current audio input source for the publisher.

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

Detectar cuándo un editor cambia de dispositivo de entrada de audio (Web)

Por defecto, el SDK gestiona automáticamente el cambio de dispositivo de entrada de audio para cualquier objeto Editor cuando se añade o elimina un dispositivo de entrada de audio, a menos que se haya desactivado la gestión de dispositivos de entrada de audio. Consulte Desactivación de la gestión de dispositivos de entrada de audio por defecto si desea desactivar la conmutación automática de dispositivos de entrada de audio.

El objeto Publisher envía un audioInputDeviceChanged cuando el SDK cambia automáticamente la entrada de audio. Este evento se enviará cuando se añada un nuevo dispositivo de entrada de audio, se elimine el dispositivo de entrada de audio actual o cuando el sistema operativo del editor cambie los dispositivos de entrada de audio. El evento enviado tiene un valor device que contiene información sobre el dispositivo de entrada de audio. Es posible que desee que sus usuarios sepan que su micrófono ha cambiado:

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

Cambio de la salida de audio utilizada por un editor

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

Ajuste de la calidad de audio

To set the audio bitrate for a publisher's audio stream, set the audioBitrate property of the properties prop passed into the OTPublisher component:

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

The audioBitrate setting is the desired bitrate for the published audio, in bits per second. The supported range of values is 6,000 - 510,000. Set this value to enable high-quality audio (or to reduce bandwidth usage with lower-quality audio).

The following are recommended settings:

  • 8,000 - 12,000 for narrowband (NB) speech
  • 16,000 - 20,000 for wideband (WB) speech
  • 28,000 - 40,000 for full-band (FB) speech
  • 48,000 - 64,000 for full-band (FB) music

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

Opus DTX (Transmisión discontinua) es un códec de audio que puede reducir el uso de ancho de banda cuando un participante no está hablando. Esto puede ser útil en sesiones grandes con muchos participantes de audio.

Para activar Opus DTX, configure la opción enableDtx propiedad cuando inicializar un Publisher. Para más información, consulte Artículo de la base de conocimientos de la API de Video de Vonage.