Personnalisation générale

Vous pouvez effectuer un certain nombre de réglages pour personnaliser l'interface utilisateur de Vonage Video :

Ajouter un nom à un flux publié

Lorsque vous créez un éditeur, vous pouvez (éventuellement) spécifier un nom à afficher dans la vidéo :

// Replace the first parameter with the target element ID:
var publisher = OT.initPublisher("myPublisher",
                                 {name: "John"})
session.publish(publisher);

Vous pouvez utiliser ce nom pour identifier le client.

Notez que vous pouvez également ajouter des métadonnées sur le client lorsque vous créez un jeton. Ce nom n'est pas automatiquement affiché dans la vidéo. Cependant, en ajoutant les données lorsque vous créez un jeton, vous pouvez ajouter des informations de manière plus sécurisée (puisque les jetons sont créés sur le serveur, et non sur le client). Pour plus d'informations, voir Création de jetons.

Les clients peuvent choisir de masquer le nom dans une vue de l'éditeur ou de l'abonné. Voir aussi cette section

Ajout d'un bouton de mise en sourdine pour un éditeur

Par défaut, l'interface utilisateur d'un éditeur ou d'un abonné comprend un bouton "couper le son". Pour un éditeur, l'utilisateur peut cliquer sur ce bouton pour activer ou désactiver le micro.

Lorsque vous publiez un flux, vous pouvez spécifier si le bouton muet est affiché en passant un paramètre style.buttonDisplayMode dans la propriété OT.initPublisher() méthode :

const publisher = OT.initPublisher(
  'publisher-element-id', // Replace with the replacement element ID
  {
     name: 'John',
     style: {buttonDisplayMode: 'on'}
  }
);
session.publish(publisher);

Les style.buttonDisplayMode peut prendre l'une des trois valeurs suivantes :

  • "auto" - Le bouton muet s'affiche lorsque le flux est affiché pour la première fois et lorsque l'utilisateur passe la souris sur la vidéo (par défaut).
  • "off" - La touche mute n'est pas affichée.
  • "on" - La touche mute est affichée.

Une fois que vous avez créé l'éditeur, vous pouvez modifier le mode d'affichage du bouton muet en appelant la commande setStyle() de l'objet Publisher. Voir la documentation de l'objet Publisher.setStyle().

Ajout d'un bouton de mise en sourdine pour un abonné

Par défaut, l'interface utilisateur d'un éditeur ou d'un abonné comprend un bouton "couper le son". Pour un abonné, l'utilisateur peut cliquer pour activer ou désactiver le haut-parleur.

Lorsque vous vous abonnez à un flux, vous pouvez spécifier si le haut-parleur muet est affiché en passant un paramètre style.buttonDisplayMode dans la propriété Session.subscribe() méthode :

const subscriber = session.subscribe(stream,
  'subscriber-element-id', // Replace with the replacement element ID
  {
     style: {buttonDisplayMode: 'on'}
  }
);

Les style.buttonDisplayMode peut prendre l'une des trois valeurs suivantes :

  • "auto" - Le bouton muet s'affiche lorsque le flux est affiché pour la première fois et lorsque l'utilisateur passe la souris sur la vidéo (par défaut).
  • "off" - La touche mute n'est pas affichée.
  • "on" - La touche mute est affichée.

Une fois que vous avez créé l'abonné, vous pouvez modifier le mode d'affichage du bouton muet en appelant la fonction setStyle() de l'objet Abonné. Voir la documentation de l'objet Abonné.setStyle().

Ajout d'un bouton permettant de basculer l'appareil photo de l'éditeur

Il n'y a pas d'élément d'interface utilisateur par défaut pour basculer la caméra utilisée par l'éditeur. Cependant, vous pouvez ajouter un élément, tel qu'un bouton, qui appelle la fonction swapCamera de l'objet Publisher :

mPublisher.swapCamera();

Il convient de noter que le cameraPosition n'est pas disponible dans la classe PublisherKit. Si vous utilisez la classe PublisherKit pour mettre en œuvre un capteur vidéo personnalisévous pouvez définir la caméra utilisée dans le code de capture vidéo personnalisé.

Ajustement de l'interface utilisateur lorsque la vidéo est activée ou désactivée

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 - Lancé lorsque la vidéo a été désactivée. La propriété reason de l'objet event indique la raison pour laquelle la vidéo a été désactivée. (Cet objet d'événement est un VideoEnabledChangedEvent objet.)
  • videoDisableWarning - Envoyé lorsque le routeur média 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. Si la qualité se dégrade encore, l'abonné désactive la vidéo et envoie un message d'avertissement. videoDisabled événement.
  • videoDisableWarningLifted - La vidéo a été activée alors qu'elle était précédemment désactivée.

Les videoDisableWarning et videoDisableWarningLifted ne sont disponibles que dans les sessions qui utilisent l'option Routeur média (sessions dont le mode média est réglé sur routé).

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 :

var indicatorBlinker = new IndicatorBlinker(subscriber);

var IndicatorBlinker = function(subscriber) {
  var timer;
  var indicatorOn = false;
  subscriber.on({
    videoDisabled: function(event) {
      start();
    },
    videoDisableWarning: function(event) {
      start();
    },
    videoDisableWarningLifted: function(event) {
      stop();
    },
    videoEnabled: function(event) {
      stop();
    }
  });
  var 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;
  };
  var stop = function() {
    if (timer) {
      clearInterval(timer);
    }
  };
};

Vous pouvez également régler la videoDisabledDisplayMode à "off" et ajoutez vos propres éléments d'interface utilisateur basés sur le style videoDisableWarning, videoDisabled, videoDisableWarningLiftedet videoEnabled événements.

Affichage d'un élément indicateur lorsqu'une session est en cours d'archivage

Lorsqu'une archive d'une session commence à enregistrer (ou si vous vous connectez à une session en cours d'enregistrement), l'icône Session.ArchiveListener.onArchiveStarted(session, name) est appelée. Lorsque l'enregistrement s'arrête, la méthode Session.ArchiveListener.onArchiveStopped(session, name) est appelée. Vous pouvez ajouter un élément d'interface utilisateur, tel qu'une icône affichée dans une vue éditeur, pour indiquer qu'une vidéo est en cours d'enregistrement :

@Override
public void onArchiveStarted(Session session, String id, String name) {
    // Display the archive indicator
}

@Override
public void onArchiveStopped(Session session, String id, String name) {
    // Hide the archive indicator
}

Ajustement de l'interface utilisateur en fonction des niveaux audio

Répartition des objets Publisher et Subscriber audioLevelUpdated périodiquement pour signaler le niveau audio. Vous pouvez utiliser ces événements pour afficher un indicateur de niveau audio. Vous pouvez également utiliser ces événements pour détecter les haut-parleurs actifs dans une session.

L'exemple suivant modifie la valeur d'un élément de compteur qui indique le volume d'un abonné. Le code définit la valeur de l'élément audioLevelDisplayMode style à 'off'qui désactive l'indicateur de niveau audio par défaut affiché dans l'Abonné. Notez que le niveau audio est ajusté de manière logarithmique et qu'une moyenne mobile est appliquée :

subscriber.setStyle('audioLevelDisplayMode', 'off');
var movingAvg = null;
subscriber.on('audioLevelUpdated', function(event) {
  if (movingAvg === null || movingAvg <= event.audioLevel) {
    movingAvg = event.audioLevel;
  } else {
    movingAvg = 0.7 * movingAvg + 0.3 * event.audioLevel;
  }

  // 1.5 scaling to map the -30 - 0 dBm range to [0,1]
  var logLevel = (Math.log(movingAvg) / Math.LN10) / 1.5 + 1;
  logLevel = Math.min(Math.max(logLevel, 0), 1);
  document.getElementById('subscriberMeter').value = logLevel;
});

L'exemple suppose qu'il existe un élément HTML meter avec l'ID "subscriberMeter".

Notez qu'en mode audio uniquement, un élément DOM éditeur ou abonné affiche par défaut un indicateur de volume (dans le coin supérieur droit de l'élément). Vous pouvez désactiver cet élément d'interface utilisateur par défaut et afficher votre propre indicateur de volume. Voir la rubrique suivante, Ajustement de l'interface utilisateur lorsque la vidéo est activée ou désactivée.

Vous pouvez également utiliser la fonction audioLevelUpdated pour déterminer quand l'audio d'un éditeur ou d'un abonné est assez fort pendant suffisamment longtemps pour indiquer que le participant a commencé à parler. Ou, si l'audio est resté silencieux pendant suffisamment longtemps, vous pouvez identifier le participant comme ayant cessé de parler :

var subscriber = session.subscribe(event.stream);

SpeakerDetection(subscriber, function() {
  console.log('started talking');
}, function() {
  console.log('stopped talking');
});

var SpeakerDetection = function(subscriber, startTalking, stopTalking) {
  var activity = null;
  subscriber.on('audioLevelUpdated', function(event) {
    var now = Date.now();
    if (event.audioLevel > 0.2) {
      if (!activity) {
        activity = {timestamp: now, talking: false};
      } else if (activity.talking) {
        activity.timestamp = now;
      } else if (now- activity.timestamp > 1000) {
        // detected audio activity for more than 1s
        // for the first time.
        activity.talking = true;
        if (typeof(startTalking) === 'function') {
          startTalking();
        }
      }
    } else if (activity && now - activity.timestamp > 3000) {
      // detected low audio activity for more than 3s
      if (activity.talking) {
        if (typeof(stopTalking) === 'function') {
          stopTalking();
        }
      }
      activity = null;
    }
  });
};

(Au lieu d'enregistrer les données dans la console, votre application pourrait ajuster un élément de l'interface utilisateur lorsque l'utilisateur commence et arrête de parler.

Utilisation d'un moteur de rendu vidéo personnalisé

Les classes Subscriber et Publisher mettent en œuvre un moteur de rendu vidéo standard qui rend le flux et fournit des commandes d'interface utilisateur pour l'affichage du nom du flux et la coupure du microphone ou de la caméra. Vous pouvez utiliser les classes SubscriberKit et PublisherKit pour mettre en œuvre un moteur de rendu vidéo personnalisé.

Le SDK Android comprend une classe BaseVideoRenderer. Remplacez cette classe pour créer un moteur de rendu vidéo personnalisé.

Après avoir instancié un objet PublisherKit, vous pouvez définir un moteur de rendu vidéo personnalisé en appelant la fonction setRenderer() de l'objet PublisherKit :

mPublisher = new PublisherKit(MyClass.this, "publisher");

// Use a custom video renderer.
// MyVideoRenderer extends BaseVideoRenderer
mRenderer = new MyVideoRenderer();
mPublisher.setRenderer(new mRenderer);

La classe SubscriberKit possède également une fonction setRenderer() méthode.

Les onFrame() de la classe BaseVideoRenderer est appelée lorsqu'une nouvelle image est disponible :

public void onFrame(Frame frame) {
    // The new frame is available.
}

Les frame est un objet BaseVideoRenderer.Frame. Cet objet comprend un getBuffer() qui renvoie le tampon d'octets contenant les données de l'image vidéo. Vous pouvez utiliser ce tampon d'octets pour ajouter l'image de la trame vidéo à la vue de l'éditeur.

Pour un exemple, voir la classe OpenTokVideoRenderer dans l'exemple d'application OpenTokHelloWorld.

Vous pouvez également configurer un éditeur pour qu'il utilise un capteur vidéo personnalisé.