Exibição de um elemento de interface do usuário personalizado quando o áudio do assinante está bloqueado

Alguns navegadores bloqueiam automaticamente a reprodução de áudio, exigindo um click evento que ocorre antes do início da reprodução de áudio para os assinantes. Esses navegadores incluem o Safari, o Firefox 66+ e o Chrome 71+.

O objeto Subscriber exibe um botão de reprodução de áudio caso a reprodução esteja bloqueada. É possível desativar o botão padrão de reprodução de áudio do Subscriber e exibir seu próprio elemento de interface do usuário, no qual o usuário clicará para iniciar a reprodução de áudio.

Para desativar a exibição do botão padrão de reprodução de áudio, defina o style.audioBlockedDisplayMode propriedade do parâmetro “options” do Session.subscribe() método.

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

Adicione ouvintes de eventos para o audioBlocked e audioUnbocked eventos disparados pelo Assinante para exibir e ocultar seu elemento de interface do usuário personalizado (indicando ao usuário que clique para reproduzir o áudio):

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

Quando o usuário clicar no seu elemento de interface de usuário personalizado, chame o OT.unblockAudio() método:

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