Paramètres de l'éditeur

Vue d'ensemble

Les SDK du client vidéo de Vonage permettent aux participants de publier de l'audio et de la vidéo dans une session. Les SDK client permettent de configurer l'objet Publisher en fonction de vos préférences et de votre cas d'utilisation.

Ce mode d'emploi aborde les points suivants :

  • Publication d'audio ou de vidéo uniquement
  • Modifier les paramètres vidéo d'un éditeur
  • Modifier les paramètres audio d'un éditeur

Publication d'audio ou de vidéo uniquement

Lorsque vous créer un objet PublisherVous pouvez spécifier si vous souhaitez publier initialement uniquement de l'audio ou uniquement de la vidéo. Par exemple, le code suivant crée un Publisher audio uniquement :

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).

Une fois que vous avez créé un objet Publisher, vous pouvez activer ou désactiver l'audio et la vidéo en appelant la fonction publishAudio() et publishVideo() (en passant par une valeur booléenne). Par exemple, le code suivant désactive le son :

publisher.publishAudio(false);

Lorsque vous activez ou désactivez l'audio ou la vidéo, l'objet Session de chaque client connecté envoie une commande streamPropertyChanged événement. Il existe également un certain nombre d'optimisations de l'interface utilisateur que vous pouvez effectuer dans le cadre d'une session vocale uniquement. Voir la page Voix guide.

Publication dans une session vocale uniquement

Pour configurer une session vocale uniquement, définissez le paramètre videoSource à la propriété null ou false lorsque vous créez chaque objet éditeur dans la session. Par exemple, le code suivant crée un éditeur pour une session vocale uniquement :

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

Lorsque vous réglez le videoSource à la propriété nullle client de publication ne demande pas l'accès à la caméra et aucune vidéo n'est publiée.

Publication d'audio uniquement pour les éditeurs disposant d'une faible bande passante

Les éditeurs peuvent être configurés pour désactiver la vidéo, tout en conservant l'audio, dans les situations de faible bande passante. La publication de la vidéo reprendra lorsque la bande passante de l'éditeur s'améliorera.

Pour plus d'informations, voir le Repli audio guide du développeur.

Modifier les paramètres vidéo d'un éditeur

Réglage de la résolution et de la fréquence d'images d'une vidéo

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.

Activation de la torche de l'appareil photo (lampe de poche)

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.

Réglage du zoom de l'appareil photo

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.

Changement de la caméra utilisée par un éditeur

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',
  }}
/>

Miroir de l'affichage local de la vidéo d'un éditeur

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.

Modifier les paramètres audio d'un éditeur

Changement de la source audio utilisée par un éditeur

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.

Détecter quand un éditeur change de périphérique d'entrée audio (Web)

Par défaut, le SDK gère automatiquement le changement de périphérique d'entrée audio pour tout objet Publisher lorsqu'un périphérique d'entrée audio est ajouté ou supprimé, sauf si la gestion des périphériques d'entrée audio a été désactivée. Voir Désactivation de la gestion des périphériques d'entrée audio par défaut si vous souhaitez désactiver la commutation automatique des périphériques d'entrée audio.

L'objet Publisher envoie un audioInputDeviceChanged lorsque le SDK change automatiquement l'entrée audio. Cet événement est déclenché lorsqu'un nouveau périphérique d'entrée audio est ajouté, lorsque le périphérique d'entrée audio actuel est supprimé ou lorsque le système d'exploitation de l'éditeur change de périphérique d'entrée audio. L'événement déclenché a une valeur device qui contient des informations sur le périphérique d'entrée audio. Vous voudrez peut-être faire savoir à vos utilisateurs que leur microphone a changé :

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

Changement de la sortie audio utilisée par un éditeur

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

Réglage de la qualité 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

Réduction de la bande passante audio avec Opus DTX

Opus DTX (transmission discontinue) est un codec audio qui permet de réduire l'utilisation de la bande passante lorsqu'un participant ne parle pas. Cela peut s'avérer utile lors de sessions importantes avec de nombreux participants audio.

Vous activez Opus DTX en réglant le paramètre enableDtx lorsque Initialisation d'un éditeur. Pour plus d'informations, voir Article de la base de connaissances de Vonage Video API.