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 du paramètre options de la méthode Session.subscribe() méthode.

var subscriberOptions = {
    style: { audioBlockedDisplayMode: "off" }
  };
var 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 audioUnbocked 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 l'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.');
});