Accès direct à l'élément vidéo 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 cette option a la valeur "false", la méthode JS SDK n'insère pas d'élément d'interface utilisateur par défaut dans le DOM HTML, et l'option element de l'objet Publisher ou Subscriber est indéfinie.

Au lieu de cela, l'élément Publisher envoie un videoElementCreated lorsque l'événement video (ou dans Internet Explorer l'élément object contenant la vidéo) est créé. L'élément element de l'événement object est une référence à l'élément vidéo (ou objet). 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 :

var 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 :

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