Solution de secours audio — Web

Utilisez l'API de repli audio d'OpenTok pour hiérarchiser dynamiquement l'audio en fonction de la qualité du réseau.

Pour des informations conceptuelles, voir le aperçu du repli audio.

Remarque : Les audioFallbackEnabled des options transmises à la fonction OT.initPublisher() sera obsolète. Veuillez utiliser la méthode audioFallback.subscriber de l'objet options.

Cette rubrique comprend les sections suivantes :

Activation de la solution de secours audio
Événements de repli audio et indicateurs de l'interface utilisateur

Activation et désactivation du mode de secours « audio uniquement »

Lors de l'initialisation de l'objet Publisher, définir le paramètre audioFallback de l'option que vous passez dans la fonction OT.initPublisher() méthode :

// Enable publisher audio fallback
const publisher = OT.initPublisher('target', {
  audioFallback: {
    publisher: true,
  }
});

// Enable publisher audio fallback and disable subscriber audio fallback
const publisher = OT.initPublisher('target', {
  audioFallback: {
    publisher: true,
    subscriber: false,
  }
});

// Enable subscriber audio fallback and disable publisher audio fallback
const publisher = OT.initPublisher('target', {
  audioFallback: {
    publisher: false,
    subscriber: true,
  }
});

Les audioFallback des options que vous passez dans la fonction OT.initPublisher() comprend deux propriétés booléennes :

publisher - Activer ou non (true) ou désactiver (false) de l'éditeur. La valeur par défaut est false (le repli audio de l'éditeur est désactivé).
subscriber - Activer ou non (true) ou désactiver (false) de l'abonné. Ce paramètre ne s'applique qu'aux sessions acheminées (sessions qui utilisent la fonction Routeur vidéo multimédia de Vonage). La solution de secours audio pour les abonnés n'est pas prise en charge dans les sessions relayées. La valeur par défaut est true (la solution de secours audio pour les abonnés est activée). Ce paramètre remplace le audioFallbackEnabled qui sera dépréciée.

Événements de repli audio et indicateurs de l'interface utilisateur

Lorsque le repli audio de l'éditeur est activé, l'objet éditeur envoie ces événements en réponse à des conditions de qualité changeantes :

videoDisableWarning - Envoyé lorsque l'éditeur détermine que la qualité du flux s'est dégradée et que la vidéo sera désactivée si la qualité se dégrade davantage.
videoDisableWarningLifted - Envoyé lorsque l'éditeur détermine que la qualité du flux s'est améliorée au point que la vidéo désactivée ne représente plus un risque immédiat.
videoDisabled - Envoyé lorsque l'éditeur détermine que la qualité du flux s'est dégradée et que le transport vidéo sortant a été désactivé. Remarque : lorsque la vidéo est désactivée, l'éditeur continue d'afficher la vidéo de l'éditeur (telle que l'image de la caméra) dans l'interface utilisateur du client de publication.
videoEnabled - Envoyé avec la raison : "qualité" lorsque l'éditeur détermine que la qualité du flux s'est améliorée et que le transport vidéo sortant a été réactivé.

Par défaut, l'éditeur affiche des icônes lorsque l'icône videoDisableWarning et videoDisabled se produisent.

Les style de la propriété options paramètre pour OT.initPublisher() comprend désormais un videoDisabledDisplayMode propriété. Vous pouvez définir la videoDisabledDisplayMode La définition de cette propriété sur l'une des valeurs de chaîne suivantes permet de contrôler l'affichage des éléments par défaut de l'interface utilisateur :

auto (par défaut) — Les icônes s'affichent automatiquement lorsque la vidéo est désactivée ou risque de l'être en raison d'une mauvaise qualité de diffusion.
off - Les icônes ne sont pas affichées. Vous pouvez afficher vos propres notifications d'interface utilisateur en fonction des événements décrits ci-dessus.
on — Les icônes s'affichent automatiquement lorsque la vidéo est désactivée ou risque de l'être en raison d'une mauvaise qualité de diffusion.

Par exemple, le code suivant désactive les éléments de l'interface utilisateur désactivant la vidéo par défaut et gère les événements associés (afin que vous puissiez fournir vos propres notifications d'interface utilisateur) :

// Enabled
const publisher = OT.initPublisher('target', {
  audioFallback: {
    publisher: true,
  },
  style: {
    videoDisabledDisplayMode: 'off',
  }
});

publisher.on({
  videoDisableWarning: () => {
    // Custom action — for example, add custom UI notification
  },
  videoDisableWarningLifted: () => {
    // Custom action — for example, remove custom UI notification
  },
  videoDisabled: () => {
    // Custom action — for example, add custom UI notification
  },
  videoEnabled: () => {
    // Custom action — for example, remove custom UI notification
  },
});

Vous pouvez également régler la videoDisabledDisplayMode de manière dynamique en appelant la fonction Publisher.setStyle() méthode :

publisher.setStyle('videoDisabledDisplayMode', 'off');

// Alternately:

publisher.setStyle({
  videoDisabledDisplayMode: 'off',
  // other styles ...
});

Du point de vue de l'abonné, les événements suivants indiquent qu'un basculement audio s'est produit. Bien que ces événements soient liés à l'abonné, ils peuvent survenir aussi bien en raison d'un basculement audio côté abonné qu'à la suite d'un basculement audio côté éditeur. En d’autres termes, la différence entre le basculement audio côté éditeur et celui côté abonné réside dans le fait que, dans le cas de l’éditeur, le client éditeur peut déclencher le basculement audio en raison de la dégradation de son propre flux, ce qui explique pourquoi des événements supplémentaires côté éditeur sont envoyés. Dans le cas du basculement audio côté abonné, le Vonage Video Media Router évalue la dégradation du réseau affectant l’abonné. Dans les deux cas, lors d’un basculement audio côté éditeur ou côté abonné, des événements côté abonné sont toujours envoyés pour indiquer qu’un basculement audio s’est produit pour le destinataire.

Un objet Abonné envoie les événements suivants liés à l'activation ou à la désactivation de la vidéo pour le flux de l'abonné :

videoEnabled - Envoyé lorsque la vidéo a été activée après avoir été désactivée.
videoDisabled - Envoyé lorsque la vidéo a été désactivée. Les reason de l'objet événement indique la raison pour laquelle la vidéo a été désactivée. (Cet objet événement est un VideoEnabledChangedEvent objet.)
videoDisableWarning — Envoyé lorsqu'il est constaté que la qualité du flux s'est dégradée ; la vidéo sera désactivée si la qualité continue de se dégrader. Si la qualité continue de se dégrader, l'abonné désactive la vidéo et envoie un videoDisabled événement. Cet événement peut également être déclenché lors de l'utilisation de la fonctionnalité bêta de repli audio de l'éditeur si la qualité du flux de l'éditeur se détériore.
videoDisableWarningLifted - La vidéo a été activée alors qu'elle était précédemment désactivée.

Par défaut, l'abonné affiche un indicateur d'avertissement de désactivation vidéo et un indicateur de désactivation vidéo lorsque l'écran de l'abonné s'éteint. videoDisableWarning et videoDisableWarningLifted sont envoyés. Vous pouvez désactiver l'affichage par défaut de l'indicateur en définissant le paramètre videoDisabledDisplayMode paramètre de style de l'objet Abonné.

L'exemple suivant utilise l'option videoDisabledDisplayMode pour que l'indicateur d'avertissement de désactivation vidéo et l'indicateur de désactivation vidéo clignotent toutes les secondes lorsque l'écran de l'ordinateur est éteint. videoDisableWarning et videoDisableWarningLifted sont envoyés :

const indicatorBlinker = new IndicatorBlinker(subscriber);

const IndicatorBlinker = function(subscriber) {
  const timer;
  const indicatorOn = false;
  subscriber.on({
    videoDisabled: function(event) {
      start();
    },
    videoDisableWarning: function(event) {
      start();
    },
    videoDisableWarningLifted: function(event) {
      stop();
    },
    videoEnabled: function(event) {
      stop();
    }
  });
  const start = function() {
    subscriber.setStyle('videoDisabledDisplayMode', 'on');
    if (timer) {
      clearInterval(timer);
    }
    timer = setInterval(function() {
      if (indicatorOn) {
        subscriber.setStyle('videoDisabledDisplayMode', 'off');
      } else {
        subscriber.setStyle('videoDisabledDisplayMode', 'on');
      }
      indicatorOn = !indicatorOn;
    }, 1000);
    indicatorOn = true;
  };
  const stop = function() {
    if (timer) {
      clearInterval(timer);
    }
  };
};

Vous pouvez également régler la videoDisabledDisplayMode style à 'off' et ajoutez vos propres éléments d'interface utilisateur en vous basant sur le modèle videoDisableWarning, videoDisabled, videoDisableWarningLiftedet videoEnabled événements.