Réglage du son et de l'image — Web

Vous pouvez régler les paramètres audio et vidéo de publié et abonné flux :

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 :

var pubOptions = {publishAudio:true, publishVideo:false};

// Replace replacementElementId with the ID of the DOM element to replace:
publisher = OT.initPublisher(replacementElementId, pubOptions);

Par défaut, un objet « Subscriber » est initialisé pour s'abonner aux flux audio et vidéo, s'ils sont disponibles.

Une fois que vous avez a créé un objet Publisher, vous pouvez activer ou désactiver le son 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 la vidéo à l'aide du publishVideo() Dans cette méthode, vous pouvez passer un gestionnaire de fin d'exécution facultatif qui s'exécutera une fois que la publication de la vidéo aura commencé ou pris fin. Par exemple, le code suivant pourrait être utilisé pour apporter des modifications à l'interface utilisateur après la publication de la vidéo :

publisher.publishVideo(true, (error) => { if (!error) { // You may want to adjust the user interface to let users know // their video is visible to others } });

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. Pour plus d'informations, consultez StreamPropertyChangedEvent.

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

Vous pouvez définir la fréquence d'images et la résolution pour le flux d'un éditeur en définissant une valeur de resolution des options que vous passez dans la fonction OT.initPublisher() méthode. Voir aussi Réglage de la résolution vidéo d'un flux et Réglage de la fréquence d'images d'un flux.

Vous pouvez également modifier la fréquence d'images et la résolution du flux d'un éditeur à la volée en appelant la fonction setPreferredResolution et setPreferredFrameRate API des éditeurs. Voir Modification de la fréquence d'images et de la résolution préférées des éditeurs.

Vous pouvez définir la fréquence d'images et la résolution du flux d'un abonné en configurant le preferredFrameRate et preferredResolution propriétés des options que vous transmettez à la fonction session.subscribe() méthode. Nous recommandons de définir la preferreResolution à l'option "auto" pour optimiser l'utilisation du processeur et du réseau. Voir Définition de la fréquence d'images et de la résolution souhaitées pour les abonnés.

Changer la caméra utilisée par un éditeur

Vous pouvez changer le périphérique d'entrée vidéo (caméra) utilisé comme source vidéo pour un éditeur en appelant la fonction Publisher.cycleVideo() ou Publisher.setVideoSource() méthode :

Publisher.cycleVideo()

Les Publisher.cycleVideo() vous permet de faire défiler les sources vidéo disponibles (caméras). Par exemple, sur un appareil mobile, vous pouvez passer de la caméra avant à la caméra arrière. La méthode renvoie une promesse qui se résout lorsque l'opération se termine avec succès. La promesse se résout avec un objet qui a une valeur deviceId est définie sur l'identifiant de l'appareil photo utilisé :

publisher.cycleVideo().then(console.log);
// Output: {deviceId: "967a86e52..."}

En cas d'erreur, la promesse est rejetée. Cela peut se produire dans les conditions suivantes :

  • L'utilisateur s'est vu refuser l'accès à l'appareil d'entrée vidéo.
  • L'éditeur n'utilise pas de source vidéo de type caméra. Cette méthode ne fonctionne pas pour un éditeur de partage d'écran, un éditeur qui utilise une source MediaStreamTrack ou un éditeur qui n'inclut pas de piste vidéo (éditeur audio uniquement).
  • Il n'y a pas de dispositifs d'entrée vidéo (caméras) disponibles.
  • Une erreur s'est produite lors de l'acquisition de la vidéo à partir du périphérique d'entrée vidéo.

Notez que cette méthode ne fonctionne que pour un éditeur qui utilise une source vidéo de type caméra.

Publisher.setVideoSource()

Les Publisher.setVideoSource() vous permet de transmettre l'identifiant du périphérique de la nouvelle source vidéo (caméra). La méthode renvoie une promesse qui se résout lorsque l'opération est terminée :

publisher.setVideoSource(deviceId)
  .then(() => console.log('video source set'))
  .catch((error) => console.error(error.name));

Les cas suivants entraîneront des erreurs :

  • Si le videoSourceId n'est pas une chaîne de caractères ou l'identifiant d'un périphérique d'entrée vidéo valide, la promesse sera rejetée par une erreur avec la directive name est définie comme étant la propriété 'OT_INVALID_VIDEO_SOURCE'.
  • Si l'éditeur n'utilise pas encore d'entrée caméra, la promesse sera rejetée avec une erreur ayant pour nom name est définie comme étant la propriété 'OT_SET_VIDEO_SOURCE_FAILURE'.

Vous pouvez utiliser le OT.getDevices() pour énumérer les périphériques d'entrée vidéo disponibles (et obtenir leurs identifiants).

Vous pouvez utiliser le Publisher.getVideoSource() pour obtenir la source vidéo actuelle et son identifiant (s'il s'agit d'un périphérique d'entrée vidéo).

Mise en miroir de l'affichage local d'une vidéo d'un éditeur

Vous pouvez régler la mirror des options transmises à la fonction OT.initPublisher() pour que la vidéo rendue localement par l'éditeur soit reflétée (true) ou non (false). Par défaut, la vidéo est mise en miroir pour un éditeur dont la source vidéo est une caméra, et n'est pas mise en miroir pour une vidéo en partage d'écran.

Ce paramètre n'affecte que la vidéo rendue dans l'application client de l'éditeur. Il n'a aucun effet sur la vidéo dans les clients abonnés.

Changer la source audio utilisée par un éditeur

Vous pouvez changer le microphone ou l'objet MediaStreamTrack utilisé comme source audio pour un Publisher en appelant la fonction setAudioSource() de l'objet Publisher.

Transmettre l'identifiant d'un microphone ou d'un objet MediaStreamTrack audio à la fonction Publisher.setAudioSource() La méthode renvoie une promesse qui est rejetée en cas d'erreur (voir la documentation de référence). La méthode renvoie une promesse qui est rejetée en cas d'erreur (voir la documentation de référence pour la méthode setAudioSource()).

Par exemple, le code suivant vous montre comment mettre en œuvre une fonction cycleMicrophone() qui fait défiler les microphones disponibles :

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

Les Publisher.setAudioSource() ne fonctionne que pour un éditeur disposant d'une source audio. Si vous définissez audioSource à null (ou false) lors de l'appel d'un OT.initPublisher()il n'est pas possible d'ajouter ultérieurement une source audio à l'éditeur.

Les Publisher.getAudioSource() renvoie l'objet MediaStreamTrack utilisé comme source d'entrée audio actuelle pour l'éditeur.

Les OT.getDevices() énumère les périphériques d'entrée audio et vidéo disponibles pour le navigateur.

Changement de la sortie audio utilisée

Vous pouvez changer de périphérique de sortie audio (haut-parleur ou casque) utilisé pour écouter le son provenant de tous les émetteurs et abonnés (dans toutes les sessions OpenTok du navigateur).

Les OT.getAudioOutputDevices() énumère les périphériques d'entrée audio et vidéo disponibles pour le navigateur.

Les OT.getActiveAudioOutputDevice() identifie le dispositif de sortie audio actuellement actif.

Utiliser le OT.setAudioOutputDevice() pour régler le dispositif de sortie audio.

Par exemple, le code suivant vous montre comment mettre en œuvre une fonction cycleAudioOutput() qui fait défiler les périphériques de sortie audio disponibles :

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

Détecter le moment où un éditeur change de périphérique d'entrée audio

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

Publication dans une session vocale uniquement

Pour configurer une session vocale uniquement, définissez le paramètre videoSource à la propriété null ou false quand tu créer chaque objet Publisher dans la session. Par exemple, le code suivant crée un « Publisher » pour une session exclusivement vocale :

var pubOptions = {videoSource: null};

// Replace replacementElementId with the ID of the DOM element to replace:
publisher = OT.initPublisher(replacementElementId, pubOptions);

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.

Abonnement audio ou vidéo uniquement

Lorsque vous s'abonner à un fluxVous pouvez spécifier si vous souhaitez vous abonner initialement au flux audio ou vidéo (s'ils sont disponibles). Par exemple, le code suivant s'abonne uniquement au flux audio :

var options = {subscribeToAudio:true, subscribeToVideo:false};

// Replace stream and replacementElementId with your own values:
subscriber = session.subscribe(stream,
                             replacementElementId,
                             options);

Après avoir créé un objet Subscriber, vous activez ou désactivez l'audio en appelant la fonction subscribeToAudio() de l'objet Abonné :

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

Vous pouvez activer ou désactiver la vidéo en appelant la fonction subscribeToVideo() de l'objet Abonné :

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

Notez toutefois que vous ne pouvez vous abonner à l'audio ou à la vidéo que si le client qui publie le flux inclut l'audio ou la vidéo. Par exemple, en appelant subscribeToVideo(false) n'aura aucun effet si le client qui publie le flux ne publie que de l'audio.

Modification du niveau sonore d'un abonné

Lorsque vous s'abonner à un fluxVous pouvez régler le volume initial de l'abonné lorsque vous appelez le numéro de téléphone de l'abonné. subscribe() de l'objet 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);

Après avoir créé un objet Abonné, vous pouvez définir son volume en appelant son objet setAudioVolume() en transmettant une valeur comprise entre 0 (silence) et 100 (plein volume) :

subscriber.setAudioVolume(0); (silent)

Notez que l'utilisateur peut également mettre l'abonné en sourdine via les commandes de l'interface utilisateur de l'abonné.

Détecter si un flux contient de l'audio ou de la vidéo

Par défaut, un objet Subscriber lit à la fois l'audio et la vidéo (s'ils sont disponibles). Vous pouvez vérifier si un flux contient de l'audio ou de la vidéo (si l'éditeur du flux diffuse de l'audio ou de la vidéo) en vérifiant l'attribut hasAudio et hasVideo de l'objet Stream :

if (!stream.hasAudio) {
	// You may want to adjust the user interface
}
if (!stream.hasVideo) {
	// You may want to adjust the user interface
}

Par exemple, lorsque vous s'abonner à un fluxIl se peut que vous souhaitiez adapter l'interface utilisateur en fonction de la présence d'audio ou de vidéo dans le flux. Par exemple, vous pouvez indiquer à l'utilisateur si un flux est audio ou non, ou ne pas masquer un abonné si un flux ne contient pas de vidéo.

Détecter quand un flux ajoute ou supprime du contenu audio ou vidéo

L'objet Session envoie un streamPropertyChanged lorsqu'un flux active ou désactive l'audio ou la vidéo. L'événement streamPropertyChanged est défini par le StreamPropertyChangedEvent classe. L'objet événement possède un changedProperty (identifiant la propriété du flux qui a été modifiée) et une propriété newValue propriété (la nouvelle valeur de la propriété Stream). Par exemple, le code suivant surveille les modifications apportées à un flux audio ou vidéo :

session.on("streamPropertyChanged", function (event) {
    var subscribers = session.getSubscribersForStream(event.stream);
    for (var i = 0; i < subscribers.length; i++) {
        // You may want to display some UI text for each
        // subscriber, or make some other UI change,
        // based on event.changedProperty and
        // event.newValue
    }
}

Notez que la vidéo d'un abonné peut être désactivée ou activée pour des raisons autres que la désactivation ou l'activation par l'éditeur. Un objet Abonné envoie videoDisabled et videoEnabled dans toutes les conditions qui entraînent la désactivation ou l'activation du flux de l'abonné. Pour plus de détails, voir la documentation relative à l'option Abonné videoDisabled et Vidéo réservée aux abonnés événements.

Optimisations dans les sessions exclusivement vocales

Il existe plusieurs optimisations de l'interface utilisateur que vous pouvez effectuer lors d'une session exclusivement vocale. Consultez la Voix tutoriel.

Réglage de la qualité audio

Les OT.initPublisher() comprend des options permettant de régler la qualité audio. Cela vous permet de publier des flux utilisant un son de haute qualité (ou de qualité inférieure) :

audioBitrate (Nombre) - Le débit souhaité pour l'audio publié, en bits par seconde. Les valeurs prises en charge sont comprises entre 6 000 et 510 000 (les valeurs non valides sont ignorées). (Les valeurs non valides sont ignorées.) Définissez cette valeur pour permettre un son de haute qualité (ou pour réduire l'utilisation de la bande passante avec un son de qualité inférieure).

Les paramètres suivants sont recommandés :

  • 8 000 - 12 000 pour la parole en bande étroite (NB)
  • 16 000 - 20 000 pour la parole à large bande (WB)
  • 28 000 - 40 000 pour la parole en bande complète (FB)
  • 48 000 - 64 000 pour la musique à bande complète (FB)

Si vous ne définissez pas cette option, OpenTok.js définit automatiquement le débit audio pour le flux.

Actuellement, ce paramètre n'est pas pris en charge dans les flux publiés dans Firefox.

autoGainControl (booléen) - Permet d'activer ou non le contrôle automatique du gain pour l'audio publié. Il peut être utile de régler ce paramètre sur false lors de la publication de fichiers audio de haute qualité (en réglant le paramètre audioBitrate de la propriété OT.initPublisher() options). La valeur par défaut est true. Ce paramètre est ignoré si vous réglez disableAudioProcessing à true (qui désactive l'annulation de l'écho, le contrôle automatique du gain et la suppression du bruit pour le flux publié).

disableAudioProcessing (booléen) - Désactive ou non l'annulation de l'écho, le contrôle automatique du gain et la suppression du bruit pour l'audio publié. Il peut être utile de régler ce paramètre sur true lors de la publication de fichiers audio de haute qualité (en réglant le paramètre audioBitrate de la propriété OT.initPublisher() options). La valeur par défaut est false.

echoCancellation (booléen) - Permet d'activer ou non l'annulation de l'écho pour l'audio publié. Il peut être utile de régler ce paramètre sur false lors de la publication de fichiers audio de haute qualité (en réglant le paramètre audioBitrate de la propriété OT.initPublisher() options). La valeur par défaut est true. Ce paramètre est ignoré si vous réglez disableAudioProcessing à true (qui désactive l'annulation de l'écho, le contrôle automatique du gain et la suppression du bruit pour le flux publié).

Remarque : Certains navigateurs (tels que Chrome 73 et versions ultérieures) ne prennent pas en charge l'annulation d'écho pour l'audio stéréo (voir ce rapport sur l'émission Chrome).

enableStereo (booléen) - Indique s'il faut publier de l'audio stéréo. La valeur par défaut est false.

suppression du bruit (booléen) - Permet d'activer ou non la suppression du bruit pour l'audio publié. Il peut être utile de régler ce paramètre sur false lors de la publication de fichiers audio de haute qualité (en réglant le paramètre audioBitrate de la propriété OT.initPublisher() options). La valeur par défaut est true. Ce paramètre est ignoré si vous réglez disableAudioProcessing à true (qui désactive l'annulation de l'écho, le contrôle automatique du gain et la suppression du bruit pour le flux publié). Vous pouvez également utiliser la fonction advancedNoiseSuppression filtre audio, qui utilise la bibliothèque multimédia de Vonage (voir ce sujet).

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 de la propriété options que vous passez dans l'objet OT.initPublisher() méthode (lorsque Initialisation d'un éditeur).

Pour plus d'informations, consultez ceci Article de la base de connaissances de Vonage Video API.

Appliquer des filtres et des effets à l'audio et à la vidéo

Vous pouvez appliquer des filtres et des effets aux fichiers audio et vidéo publiés de la manière suivante :

Vous pouvez appliquer des filtres et des effets aux fichiers audio et vidéo auxquels vous êtes abonné en en utilisant la bibliothèque Vonage Media Processor pour appliquer des transformations.

Ces éléments sont décrits dans les sections suivantes.

Publication d'un objet MediaStreamTrack et application d'effets à cet objet

Vous pouvez utiliser un piste MediaStream audio ou un vidéo MediaStream track comme source audio ou vidéo d'un flux publié. Cette fonction permet d'appliquer des filtres et des effets, tels que le flou d'arrière-plan ou le remplacement de l'arrière-plan, à l'audio ou à la vidéo publiée.

Vous pouvez utiliser le OT.getUserMedia() pour obtenir une référence à un MediaStream qui utilise la caméra sélectionnée par l'utilisateur. Vous pouvez ensuite utiliser la piste MediaStreamTrack vidéo obtenue à partir de cet objet MediaStream comme source d'un élément Video. Vous pouvez ensuite ajouter cet élément Video à un élément HTML Canvas, appliquer des filtres ou des effets au canevas et utiliser l'objet MediaStreamTrack vidéo filtré obtenu à partir du canevas comme source vidéo pour un flux publié. Pour un exemple, voir l'exemple Stream-Filter repo opentok-web-samples sur GitHub.

Vous pouvez utiliser le OT.getUserMedia() pour obtenir une référence à un MediaStream qui utilise le microphone sélectionné par l'utilisateur. Vous pouvez ensuite utiliser la piste audio MediaStreamTrack obtenue à partir de cet objet MediaStream comme la méthode audioSource lors de l'appel OT.initPublisher(). Vous pouvez ensuite créer un AudioContext et appeler son objet createMediaStreamSource() objet, en transmettant l'objet MediaStream pour créer un MediaStreamAudioSourceNode . Vous pouvez ensuite appliquer des filtres audio à l'objet MediaStreamAudioSourceNode, ce qui aura pour effet d'appliquer les filtres au flux publié.

Application d'un filtre de flou d'arrière-plan ou de remplacement d'arrière-plan

Utiliser le Publisher.applyVideoFilter() pour appliquer un filtre vidéo à l'éditeur. Vous pouvez appliquer un filtre de flou d'arrière-plan ou un filtre d'image d'arrière-plan. Un éditeur ne peut avoir qu'un (ou zéro) filtre appliqué à la fois. Lorsque vous définissez un nouveau filtre, le filtre précédemment défini est supprimé.

Le code suivant applique un filtre de flou d'arrière-plan à la vidéo d'un éditeur :

publisher.applyVideoFilter({
  type: 'backgroundBlur',
  blurStrength: 'low',
});

Le code suivant applique un filtre de remplacement de l'arrière-plan à la vidéo d'un éditeur :

publisher.applyVideoFilter({
  type: 'backgroundReplacement',
  backgroundImgUrl: 'http://example.com/image.jpg',
});

Vous pouvez également appliquer un filtre vidéo en définissant le paramètre videoFilter lors de l'appel de l'option OT.initPublisher() méthode :

const publisher = OT.initPublisher(null, {
  videoFilter: {
    type: 'backgroundReplacement',
    backgroundImgUrl: 'http://example.com/image.jpg',
  },
  mirror: false,
});

Important :

  • Les filtres vidéo nécessitent un processeur adéquat. Même dans les navigateurs compatibles, les transformateurs peuvent ne pas être stables lorsque les processus d'arrière-plan limitent les ressources de traitement disponibles. Voir aussi Exigences du client.
  • Remarque concernant les politiques de sécurité du contenu (CSP) : si la politique de sécurité du contenu (CSP) n'est pas respectée, il est possible de la modifier. script-src est définie, assurez-vous que 'wasm-unsafe-eval' est spécifié. Dans le cas contraire, le chargement et l'exécution de WebAssembly, nécessaire pour le flou d'arrière-plan ou les filtres de remplacement, sont bloqués sur la page.
  • L'image de fond est redimensionnée pour correspondre aux dimensions de la vidéo de l'éditeur. Pour de meilleurs résultats, utilisez une image ayant les mêmes dimensions (ou au moins le même rapport hauteur/largeur) que la vidéo publiée. Définir l'image d'arrière-plan mirror à l'option false lors de l'appel du OT.initPublisher() pour que l'image d'arrière-plan apparaisse dans le bon sens (sans miroir) dans la page de l'éditeur.

Pour plus de détails, voir la documentation de référence pour Publisher.applyVideoFilter().

Cette méthode est incompatible avec la méthode Publisher.setVideoMediaProcessorConnector() méthode. L'appel de cette méthode après Publisher.setVideoMediaProcessorConnector(connector) renvoie une promesse qui est rejetée avec une erreur, avec l'attribut name de l'erreur fixée à 'OT_NOT_SUPPORTED'. Vous pouvez retirer le connecteur en appelant Publisher.setVideoMediaProcessorConnector(null).

Vous pouvez également définir le filtre vidéo initial en définissant une valeur de videoFilter lors de l'appel de l'option OT.initPublisher() méthode.

Pour effacer le filtre vidéo, appelez le Publisher.clearVideoFilter() méthode.

Notes :

  • Les filtres vidéo ne sont pris en charge que dans les versions récentes de Chrome, Firefox, Electron, Opera, Edge, Samsung Internet, WebView Android, ainsi que dans les dernières versions de Safari (version 26 et plus) et de WebView iOS (version 26 et plus). Vous pouvez vérifier si le client prend en charge cette fonctionnalité en appelant la méthode OT.hasMediaProcessorSupport('video') méthode.
  • La médiathèque de Vonage comprend des transformateurs qui offrent plus d'options que les filtres de flou d'arrière-plan et d'image d'arrière-plan fournis par l'interface utilisateur de Vonage. Publisher.applyVideoFilter('video') méthode. Vous pouvez également utiliser la médiathèque de Vonage pour écrire vos propres transformateurs audio et vidéo personnalisés. Voir la méthode Utilisation du processeur média de Vonage guide du développeur.

Application du filtre avancé de suppression du bruit

La suppression avancée du bruit est un filtre audio qui réduit considérablement le bruit de fond autour de l'éditeur. Cela peut être utile lorsqu'un participant se trouve dans un environnement bondé ou bruyant, comme dans un café, ou si un bruit blanc est présent, comme celui d'un système de chauffage, de ventilation et de climatisation. Il peut fonctionner séparément ou conjointement avec le filtre noiseSuppression définie lors de l'appel à la fonction OT.initPublisher méthode.

Utiliser le Publisher.applyAudioFilter() méthode permettant d'appliquer un filtre audio à l'éditeur. Vous pouvez appliquer un filtre avancé de suppression du bruit. Un éditeur ne peut avoir qu'un seul filtre (ou aucun) appliqué à la fois. Lorsque vous définissez un nouveau filtre, tout filtre précédemment défini est supprimé.

Le code suivant applique un filtre audio avancé de suppression du bruit à l'audio d'un éditeur :

publisher.applyAudioFilter({
  type: 'advancedNoiseSuppression',
});

Vous pouvez également appliquer le filtre audio avancé de suppression du bruit en réglant le paramètre audioFilter lors de l'appel de l'option OT.initPublisher() méthode :

const publisher = OT.initPublisher(null, {
  audioFilter: {
    type: 'advancedNoiseSuppression'
  },
});

Important :

  • Les filtres audio nécessitent une prise en charge suffisante par le processeur. Même dans les navigateurs compatibles, les transformateurs peuvent ne pas fonctionner de manière stable lorsque des processus en arrière-plan limitent les ressources de traitement disponibles. Voir Exigences du client.
  • Remarque concernant les politiques de sécurité du contenu (CSP) : si la politique de sécurité du contenu (CSP) n'est pas respectée, il est possible de la modifier. script-src est définie, assurez-vous que 'wasm-unsafe-eval' est spécifié. Sinon, le chargement et l'exécution de WebAssembly, nécessaire à la suppression avancée du bruit, sont bloqués sur la page.

Pour plus de détails, voir la documentation de référence pour Publisher.applyAudioFilter().

Cette méthode est incompatible avec la méthode Publisher.setAudioMediaProcessorConnector() méthode. L'appel de cette méthode après Publisher.setAudioMediaProcessorConnector(connector) renvoie une promesse qui est rejetée avec une erreur, avec l'attribut name de l'erreur fixée à 'OT_NOT_SUPPORTED'. Vous pouvez retirer le connecteur en appelant Publisher.setAudioMediaProcessorConnector(null).

Pour supprimer le filtre avancé de suppression du bruit, appelez le Publisher.clearAudioFilter() méthode.

Notes :

  • Les filtres audio ne sont pris en charge que dans les versions récentes de Chrome, Electron, Opera, Edge, Samsung Internet et WebView pour Android. Ils ne sont pas pris en charge dans les autres navigateurs (non basés sur Chromium) ni sur iOS. Vous pouvez vérifier si le client prend en charge cette fonctionnalité en appelant la méthode OT.hasMediaProcessorSupport('audio') méthode.
  • Lors de l'utilisation de Publisher.applyAudioFilter()Les ressources sont téléchargées à partir des serveurs de Vonage. Si vous préférez héberger vous-même ces ressources, veuillez vous référer à la section cet article de blog pour obtenir des informations sur l'hébergement et sur l'utilisation du Publisher.setAudioMediaProcessorConnector() pour appliquer le filtre avancé de suppression du bruit aux ressources hébergées par l'utilisateur lui-même.

Utilisation de la bibliothèque Vonage Media Processor pour appliquer des transformations personnalisées

Voir le Utilisation du processeur média de Vonage guide du développeur.

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

Les diffuseurs peuvent être configurés pour désactiver la vidéo tout en conservant l'audio activé en cas de faible bande passante. La diffusion vidéo reprendra dès que la bande passante du diffuseur s'améliorera. Pour plus d'informations, consultez la Repli audio guide du développeur.

Détection des variations de performances du processeur

Vous pouvez détecter les changements dans la charge de l'unité centrale de l'appareil en surveillant la Session cpuPerformanceChanged événement. L'événement contient un cpuPerformanceState propriété, qui contient l'une des valeurs suivantes : « nominal », « fair », « serious », « critical » (voir cette spécification du W3C). En réponse à cet événement, une application peut avertir les utilisateurs de la consommation de ressources ou désactiver les processus gourmands en ressources de calcul, tels que transformateurs vidéo. Voir la session cpuPerformanceChanged événement.

Le code suivant désactive la capture vidéo lorsque le processeur entre dans un état de performance critique et la réactive dès que cet état revient à « correct » ou mieux :

let videoDisabledByCPU = false;
  session.on('cpuPerformanceChanged', (event) => {
    if (event.cpuPerformanceState === 'critical'){
      // The application should alert the user why their video is being disabled
      publisher.publishVideo(false);
      videoDisabledByCPU = true;
    } else if (event.cpuPerformanceState === 'nominal' || event.cpuPerformanceState === 'fair'){
      if (videoDisabledByCPU){
        publisher.publishVideo(true);
        videoDisabledByCPU = false;
      }
    }
  })

Pour obtenir des conseils supplémentaires sur l'optimisation de la qualité des appels, consultez Contrôle de la qualité des appels.

Important : Cette API est disponible de manière limitée. cpuPerformanceChanged n'est actuellement disponible que pour Chrome 125 et versions ultérieures, Edge 125 et versions ultérieures, ainsi que pour Opera 111 et versions ultérieures.

Remarques pour le débogage :

  • Cet événement n'est déclenché que lorsque le navigateur est actif.
  • Pour utiliser cet événement avec des iframes, il faut activer la calculer la politique d'autorisations de pression. Cela peut poser des problèmes lors de l'utilisation d'IDE en ligne.

Autres options de personnalisation de l'interface utilisateur

Pour connaître les autres options disponibles pour personnaliser l'interface utilisateur, voir la section Personnaliser l'interface utilisateur guide.