Personnalisation de l'interface utilisateur — Web

Voici les réglages que vous pouvez effectuer pour personnaliser l'interface utilisateur des vidéos OpenTok :

Définition de la position initiale et des dimensions d'une vidéo

Lorsque vous publiez une vidéo, vous pouvez spécifier l'élément DOM (ou son ID) que l'éditeur remplacera. Vous pouvez également spécifier la largeur et la hauteur initiales de l'éditeur :

// Replace the first parameter with ID of the target DOM element:
const publisher = OT.initPublisher('myPublisherElementId',
                                 {width:400, height:300});
session.publish(publisher);

Vous pouvez également régler la insertMode des options que vous passez dans la fonction OT.initPublisher() à la méthode 'append' Pour que l'éditeur soit ajouté en tant qu'élément enfant de l'élément DOM (conteneur) que vous spécifiez :

const publisherOptions = {
  insertMode: 'append',
  width: 400,
  height: 300
};
const publisher = OT.initPublisher('publisherContainerElementId', publisherOptions);
session.publish(publisher);

De même, lorsque vous vous abonnez à un flux, vous pouvez spécifier l'élément DOM cible (ou son ID). Vous pouvez également spécifier la largeur et la hauteur initiales de l'abonné :

const options = {width: 400, height: 300, insertMode: 'append'}
const subscriber = session.subscribe(stream, 'containerElementId', options);

Vous pouvez également spécifier la largeur et la hauteur initiales en pourcentage de la taille de l'élément DOM parent :

const publisherOptions = {
  insertMode: 'append',
  width: '100%',
  height: '100%'
};
const publisher = OT.initPublisher(publisherContainerElement, publisherOptions);
session.publish(publisher);

Si vous ne spécifiez pas d'ID d'élément de remplacement (ou si vous lui attribuez la valeur null), l'application ajoute un nouvel élément DOM au corps du code HTML. La largeur par défaut est de 264 pixels et la hauteur par défaut est de 198 pixels.

Si vous souhaitez appliquer plusieurs règles CSS, appliquez-les à l'élément DOM parent (conteneur) :

<style>
	#publisherContainer.large
	{ width: 640px; height: 480px; }
	#publisherContainer.small
	{ width:100px; height: 100px; }
</style>
<div id="publisherContainer"></div>
<script>
	const publisher = OT.initPublisher('publisherContainer',
	{width: '100%', height: '100%', insertMode: 'append'}
</script>

Pour appliquer une taille différente à une vidéo sur un appareil mobile, utilisez les requêtes média CSS :

<style>
	#publisherContainer
	{ width: 100px; height: 100px; }
	@media screen and (max-width: 650px) {
	#publisherContainer
	{ width: 89px; height: 50px; }
	}
</style>
<div id="publisherContainer"></div>
<script>
	const publisher = OT.initPublisher('publisherContainer',
	{width: '100%', height: '100%', insertMode: 'append'}
</script>

Si vous souhaitez redimensionner dynamiquement la vidéo, définissez le paramètre insertMode à 'append' et définir le height et width à '100%'.

Voir la section suivante pour plus d'informations sur le redimensionnement ou le repositionnement d'une vidéo d'éditeur ou d'abonné.

Redimensionnement ou repositionnement d'une vidéo

Les element de l'objet Publisher ou Subscriber est son élément HTML DOM. Vous pouvez repositionner cet objet dans le DOM HTML et redimensionner l'élément en modifiant sa propriété style.width et style.height propriétés, comme vous le feriez pour n'importe quel autre élément DOM :

document.getElementById("target").appendChild(publisher.element);
publisher.element.style.width = "100px";
publisher.element.style.height = "75px";

Si vous spécifiez la valeur initiale de width et height de l'objet Publisher ou Subscriber sous la forme d'un pourcentage (tel que "100 %"), vous pouvez le redimensionner en redimensionnant l'un de ses éléments parents. L'exemple suivant comprend une fonction qui redimensionne un éditeur :

<script type="text/javascript">
	const publisherOptions = {
		insertMode: "append",
		height: "100%",
		width: "100%"
	}
	const publisher = OT.initPublisher("publisherContainer", publisherOptions);
	session.publish(publisher);

	function resizePublisher() {
		const publisherContainer = document.getElementById("publisherContainer");
		publisherContainer.style.width = "1000px";
		publisherContainer.style.height = "750px";
	}
</script>

<div id="container">
	<div id="publisherContainer"></div>
	<a href="javascript:resizePublisher()">resize</a>
</div>

Voir la section précédente, Définition des dimensions initiales d'une vidéo pour obtenir des informations sur la définition de la position initiale et des dimensions d'un éditeur ou d'un abonné.

Important : Si vous désactivez l'interface utilisateur par défaut de l'éditeur ou de l'abonné en définissant insertDefaultUI à false lors de l'instanciation de l'objet Publisher ou Subscriber, le element La propriété de l'éditeur ou de l'abonné sera indéfinie. Surveillez la videoElementCreated événement et utiliser le element propriété de l'objet événement permettant d'accéder à l'élément DOM HTML correspondant à l'éditeur ou à l'abonné. Voir Accès direct à l'élément vidéo pour un éditeur ou un abonné.

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:
const publisher = OT.initPublisher("myPublisher",
                                 {name: "John"})
session.publish(publisher);

Vous pouvez utiliser ce nom pour identifier le client.

Ne pas utiliser d'informations personnelles dans le champ "nom" de l'éditeur. — Le nom de l'éditeur peut être visible par les autres participants à la session et peut également apparaître dans l'outil « Inspector » ainsi que dans les journaux internes de Vonage ; par conséquent, vous ne devez en aucun cas utiliser d'informations sensibles ou personnelles non chiffrées dans le nom de l'éditeur. Consultez les bonnes pratiques en matière de sécurité.

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 d'un jeton.

Les clients peuvent choisir de masquer le nom dans une vue « Éditeur » ou « Abonné ». Voir la section suivante.

Afficher ou masquer le nom dans une vidéo

Lorsque vous publiez un flux, vous pouvez indiquer un nom qui s'affichera dans la vidéo (voir la section précédente).

Lorsque vous créez un éditeur, vous pouvez spécifier si le nom est affiché dans la vidéo de l'éditeur, en définissant le paramètre style.nameDisplayMode des options que vous passez dans la fonction OT.initPublisher() méthode :

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

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

  • "auto" - Le nom est affiché lors du premier affichage du flux et lorsque l'utilisateur passe la souris sur la vidéo (par défaut).
  • "off" - Le nom n'est pas affiché.
  • "on" - Le nom est affiché.

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

Lorsque vous vous abonnez à un flux, vous pouvez spécifier si le nom est affiché dans la vidéo de l'abonné, en définissant le paramètre style.nameDisplayMode des options que vous passez dans la fonction Session.subscribe() méthode :

// Replace the first two parameters with the stream and target element ID:
const subscriber = session.subscribe(stream,
  "mySubscriber",
  {
    style: { nameDisplayMode: "off" }
  });

Une fois que vous avez créé l'abonné, vous pouvez modifier le mode d'affichage du nom en appelant la commande setStyle() de l'objet Abonné. (Voir la méthode la documentation pour les Subscriber.setStyle() méthode.)

Affichage ou masquage de la touche audio mute

Par défaut, l'interface utilisateur d'un diffuseur ou d'un abonné comporte un bouton permettant de couper le son. Pour un diffuseur, l'utilisateur peut cliquer dessus pour activer ou désactiver le micro. Pour un abonné, l'utilisateur peut cliquer dessus pour activer ou désactiver le haut-parleur.

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 dès le chargement de la vidéo et lorsque l'utilisateur passe la souris dessus (par défaut).
  • "off" — Le bouton « Muet » n'apparaît pas.
  • "on" — Le bouton « Muet » s'affiche.

De même, lorsque vous vous abonnez à un flux, vous pouvez choisir d'afficher ou non le haut-parleur en mode silencieux en transmettant un 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'}
  }
);

Une fois que vous avez créé l'éditeur ou l'abonné, vous pouvez modifier le mode d'affichage du bouton « Muet » en appelant la fonction setStyle() méthode de l'objet Publisher ou de l'objet Subscriber. (Voir la documentation relative à Publisher.setStyle() et Abonné.setStyle().)

Ajustement du recadrage vidéo et du letterboxing

Vous pouvez spécifier le recadrage ou le letterboxing de la vidéo d'un éditeur ou d'un abonné en définissant le paramètre fitMode des options que vous passez dans OT.initPublisher() ou Session.subscribe(). Passez dans l'une des deux chaînes suivantes :

  • "cover" - La vidéo est recadrée si ses dimensions ne correspondent pas à celles de l'élément DOM. Il s'agit du paramètre par défaut pour les vidéos publiant un flux de caméra.
  • "contain" - La vidéo est mise en boîte aux lettres si ses dimensions ne correspondent pas à celles de l'élément DOM. Il s'agit du paramètre par défaut pour les vidéos de partage d'écran.

Par exemple, le code suivant initialise un éditeur avec l'élément vidéo letterboxed :

const publisher = OT.initPublisher("publisher-element-id",
  {fitMode: "contain"});

Le code suivant permet de s'abonner à un flux dont l'élément vidéo a été recadré :

const subscriber = session.subscribe(stream,
  "subscriber-element-id",
  {fitMode: "cover"});

Obtenir une image instantanée d'une vidéo

Le code suivant capture et affiche une image statique de la vidéo de l'éditeur :

const imgData = publisher.getImgData();
const img = document.createElement("img");
img.setAttribute("src", "data:image/png;base64," + imgData);

// Replace with the parent DIV for the img
document.getElementById("containerId").appendChild(img);

Le code suivant capture et affiche une image statique d'une vidéo d'abonné :

const imgData = subscriber.getImgData();
const img = document.createElement("img");
img.setAttribute("src", "data:image/png;base64," + imgData);

// Replace with the parent DIV for the img
document.getElementById("containerId").appendChild(img);

Définition d'une image à afficher en mode audio uniquement

Vous pouvez utiliser le backgroundImageURI d'un abonné pour définir l'image à afficher lorsqu'il n'y a pas de vidéo. La valeur que vous définissez peut être l'URL d'une image sur le web. Il peut également s'agir d'une data: telle qu'une URL obtenue à l'aide de la fonction getImgData() de l'objet Subscriber (voir la section section précédente).

Le code suivant définit l'image d'arrière-plan de l'abonné. Lorsque l'appel à Session.subscribe() se termine avec succès, l'image d'arrière-plan est définie. S'il y a un flux vidéo, l'arrière-plan est défini sur une image statique capturée à partir de la vidéo de l'abonné ; sinon, il est défini sur une image chargée à partir d'une URL web :

const subscriber = session.subscribe(event.stream, 'subscriberElement', function(error) {
  if (error) {
    console.log(error.message)'
    return;
  }
  if (subscriber.stream.hasVideo) {
    const imgData = subscriber.getImgData();
    subscriber.setStyle('backgroundImageURI', imgData);
  } else {
    subscriber.setStyle('backgroundImageURI',
      'data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="1" height="1"%3E%3Crect width="1" height="1" fill="%23f4eadf"/%3E%3C/svg%3E'
    );
  }
});

Si vous ne définissez pas d'image d'arrière-plan pour un abonné, en l'absence de vidéo, les initiales du flux s'afficheront, à condition que celles-ci aient été définies lors de l'initialisation du flux par son éditeur (voir Initialisation d'un éditeur).

Vous pouvez supprimer l'arrière-plan actuel en passant aucune image, par exemple : subscriber.setStyle('backgroundImageURI', null). Les initiales seront affichées si elles ont été définies au préalable.

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');
const 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]
  const 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 de type « Publisher » ou « Subscriber » 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. Reportez-vous à 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 :

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

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

const SpeakerDetection = function(subscriber, startTalking, stopTalking) {
  const activity = null;
  subscriber.on('audioLevelUpdated', function(event) {
    const 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'afficher des messages dans la console, votre application pourrait modifier un élément de l'interface utilisateur lorsque l'utilisateur commence ou cesse de parler.)

Affichage d'un élément d'interface utilisateur personnalisé lorsque l'audio de l'abonné est bloqué

Certains navigateurs bloquent automatiquement la lecture des fichiers audio, ce qui oblige à utiliser un logiciel de lecture. click avant que la lecture audio ne commence pour les abonnés. Les navigateurs concernés sont Safari, Firefox 66+ et Chrome 71+.

L'objet Abonné affiche un bouton de lecture audio si la lecture audio est bloquée. Vous pouvez désactiver le bouton de lecture audio par défaut de l'Abonné et afficher votre propre élément d'interface utilisateur sur lequel l'utilisateur devra cliquer pour lancer la lecture audio.

Pour désactiver l'affichage du bouton de lecture audio par défaut, définissez le paramètre style.audioBlockedDisplayMode de la propriété options du paramètre Session.subscribe() méthode) :

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

Ajouter des récepteurs d'événements pour le audioBlocked et audioUnblocked envoyés par l'abonné pour afficher et masquer votre élément d'interface utilisateur personnalisé (indiquant à l'utilisateur de cliquer pour lire l'audio) :

subscriber.on({
  audioBlocked: function(event) {
    // display custom UI
  },
  audioUnblocked: function(event) {
    // hide custom UI
  }
});

Lorsque l'utilisateur clique sur votre élément d'interface utilisateur personnalisé, appelez la méthode OT.unblockAudio() méthode :

customElement.addEventListener('click', async () => {
  try {
    await OT.unblockAudio();
  } catch (err) {
    console.error('Unblocking audio failed.', err);
    return;
  }
  console.log('Unblocked audio successfully.');
});

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

Adaptation de l'interface utilisateur en fonction des événements liés aux abonnés

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é lorsque le routeur multimédia OpenTok détecte une dégradation de la qualité du flux et que la vidéo sera désactivée si cette dégradation se poursuit. 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é de repli audio de l'éditeur si la qualité du flux de l'éditeur se détériore. Voir la section Guide du développeur sur les solutions de secours audio.
  • 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 multimédia OpenTok (sessions dont le mode « médias » est défini sur « routé »), sauf si l'on utilise le fonctionnalité de repli audio de l'éditeur, où les événements seront diffusés sous forme de sessions en direct ou en différé.

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.

Adaptation de l'interface utilisateur en fonction des événements de Publisher

Quand repli audio de l'éditeur Lorsqu'elle est activée, l'objet Publisher déclenche ces événements en réponse à l'évolution des conditions de qualité :

  • 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é à juste titre : quality lorsque l'éditeur constate 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 ...
});

Masquer toutes les commandes de l'interface utilisateur intégrée pour les vidéos

Les objets Publisher et Subscriber comprennent les contrôles d'interface utilisateur intégrés suivants :

  • L'affichage du nom du flux
  • L'indicateur de niveau audio
  • Bouton de mise en sourdine de l'audio
  • Indicateur de vidéo désactivée et icône d'avertissement de vidéo désactivée (abonné uniquement)

Vous pouvez désactiver tous ces éléments en définissant le paramètre showControls à la propriété false dans le properties que vous passez dans le paramètre OT.initPublisher() ou la méthode Session.subscribe() méthode.

Par exemple, le code suivant crée un objet Publisher qui ne comporte aucun contrôle d'interface utilisateur intégré :

const publisherOptions = {
     showControls: false
  };
const publisher = OT.initPublisher(
  'publisher-element-id', // Replace with the replacement element ID
  publisherOptions
);

Le code suivant crée un objet Abonné qui ne comporte aucun contrôle d'interface utilisateur intégré :

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

Vous pouvez contrôler l'affichage des différents éléments de l'interface utilisateur en laissant le showControls est définie comme étant la propriété true (par défaut) ; consultez ensuite les rubriques suivantes :

Accéder directement à l'élément « Video » pour un éditeur ou un abonné

Vous pouvez désactiver les éléments de l'interface utilisateur par défaut pour un éditeur ou un abonné et accéder à l'interface HTML Video directement. Lorsque vous publiez un flux ou que vous vous y abonnez, définissez l'élément insertDefaultUI à la propriété false lors de l'appel du OT.initPublisher() ou Session.subscribe() méthode. Si vous définissez cette option sur false, OpenTok.js n'insère pas d'élément d'interface utilisateur par défaut dans le DOM HTML, et le element La propriété de l'objet Publisher ou Subscriber n'est pas définie. À la place, l'élément Publisher déclenche un videoElementCreated lorsque l'événement Video élément est créé. Le element La propriété de l'objet événement est une référence à la Video élément. Ajoutez-le au DOM HTML pour afficher la vidéo.

Le code suivant initialise un éditeur et insère son Video dans le DOM HTML :

const publisher = OT.initPublisher({insertDefaultUI: false});
publisher.on('videoElementCreated', function(event) {
  document.getElementById('publisher-video-parent-id').appendChild(event.element);
});

Le code suivant s'abonne à un flux et insère son Video dans le DOM HTML :

const subscriber = session.subscribe(stream, {insertDefaultUI: false});
subscriber.on('videoElementCreated', function(event) {
  document.getElementById('subscriber-video-parent-id').appendChild(event.element);
});

Si vous réglez le insertDefaultUI à la propriété falsene pas régler le targetElement lors de l'appel à OT.initPublisher() ou Session.subscribe(). (Cela entraîne une erreur).

L'élément d'interface utilisateur par défaut contient des commandes d'interface utilisateur, un indicateur de chargement de la vidéo et un recadrage automatique de la vidéo ou un letter-boxing, en plus de la vidéo. Si vous laissez l'élément insertDefaultUI fixé à true (par défaut), vous pouvez contrôler les paramètres individuels de l'interface utilisateur à l'aide de l'option fitMode, showControlset style options. Voir les autres rubriques de cette page.

Vous pouvez également accéder à l'objet MediaStream d'un abonné (et l'utiliser dans votre propre Video élément). Voir la section suivante.

Accès aux objets MediaStream pour les éditeurs et les abonnés via l'API Media Stream Available

Il est possible d'accéder à l'objet MediaStream en écoutant la commande mediaStreamAvailable envoyé par les éditeurs et les abonnés. L'API Media Stream Available a été mise à disposition dans la version 2.27.7 ; les versions antérieures devront utiliser l'API Accès aux objets MediaStream pour les abonnés antérieurs à la version 2.27.7 dont le lien figure ci-dessous.

Remarques importantes :

  • Les objets Publisher et Subscriber doivent toujours être utilisés pour contrôler tous les aspects de l'API Video, tels que la mise en sourdine, la déconnexion, etc.
  • L'audio sera diffusé à la fois dans l'élément personnalisé et dans le widget de l'éditeur ou de l'abonné. Les éléments personnalisés doivent être mis en sourdine pour éviter l'écho.
  • Les éléments d'OpenTok pour Chrome, tels que la silhouette et les commandes vidéo, ne seront pas disponibles.
  • L'objet MediaStream Account pour tous les changements causés par le routage adaptatif des médias.

Vous trouverez ci-dessous un exemple de crochets contextuels React Session, Subscriber et Publisher utilisant l'API Media Stream Available. Bien que l'exemple utilise React, l'API Media Stream Available est indépendante du cadre. Notez que l'écouteur doit être attaché immédiatement après la création de l'éditeur et des abonnés, et non dans le cadre du rappel.

Composante de la session

const [subscriberStream, setSubscriberStreams] = useState([]);
  async function subscribe(stream, session, options = {}) {
    if (session) {
      const subscriber = session.current.subscribe(stream, null, { ...options, insertDefaultUI: false });
      subscriber.on('mediaStreamAvailable', ({ mediaStream }) => {
        setSubscriberStreams((prev) => [...prev, { mediaStream, subscriber }]);
      });
    }
  }

Composant « Abonné »

import { useEffect, useRef } from 'react';

    const Subscriber = ({ subscriber, mediaStream }) => {
      const videoRef = useRef(null);

      useEffect(() => {
        if (mediaStream) {
          videoRef.current.srcObject = mediaStream;
        }
      }, [mediaStream]);

      return (
          <video
            ref={videoRef}
            autoPlay
            id={subscriber.streamId}
            playsInline
            muted
          ></video>
      );
    }

    export default Subscriber;

Composant Éditeur

import { useEffect, useRef } from 'react';

    const Publisher = ({ publisher, mediaStream }) => {
      const videoRef = useRef(null);

      useEffect(() => {
        if (mediaStream) {
          videoRef.current.srcObject = mediaStream;
        }
      }, [mediaStream]);

      return (
          <video
            ref={videoRef}
            autoPlay
            id={publisher.streamId}
            playsInline
            muted
          ></video>
      );
    }

    export default Publisher;

Accès aux objets MediaStream pour les abonnés antérieurs à la version 2.27.7

Veuillez noter que l'API « Media Stream Available », telle que décrite ci-dessus, constitue la méthode recommandée pour accéder aux MediaStreams. Cette solution de contournement n'est nécessaire que dans les versions d'OpenTok antérieures à la version 2.27.7.

Vous pouvez accéder à l'objet MediaStream utilisé par un abonné. L'objet HTMLVideoElement (dans le videoElementCreated envoyé par l'abonné, décrit dans la section précédente), a une valeur de srcObject propriété. Il s'agit de l'objet MediaStream pour le flux audio-vidéo de l'abonné. Vous pouvez utiliser cet objet MediaStream comme source d'un autre objet MediaStream. Video (en tant qu'élément srcObject ) :

session.on('streamCreated', function(event) {
  const subscriber = session.subscribe(event.stream, { insertDefaultUI: false });
  subscriber.on('videoElementCreated', event => {
    // myVideoElement is a Video element you have created:
    myVideoElement.srcObject = event.element.srcObject;
  });
});

Dans une session routée qui utilise Routage adaptatif des médiasle MediaStream d'un abonné peut changer lorsque la session passe d'un flux relayé à un flux routé (voir cette Article de la base de connaissances du Centre d'aide). Ajoutez un écouteur d'événements pour le play pour l'élément Video d'un objet abonné afin d'obtenir l'instance MediaStream mise à jour :

session.on('streamCreated', function(event) {
  const subscriber = session.subscribe(event.stream, { insertDefaultUI: false });
  subscriber.on('videoElementCreated', event => {
    // myVideoElement is a Video element you have created:
    myVideoElement.srcObject = event.element.srcObject;
    myVideoElement.play()
    event.element.addEventListener('play', () => {
      // The MediaStram has changed
      myVideoElement.srcObject = event.element.srcObject;
      myVideoElement.play();
    });
  });
});