Mostrar un elemento de interfaz de usuario personalizado cuando se bloquea el audio del suscriptor

Algunos navegadores bloquean automáticamente la reproducción de audio, requiriendo un click antes de que comience la reproducción de audio para los abonados. Estos navegadores incluyen Safari, Firefox 66+ y Chrome 71+.

El objeto «Subscriber» muestra un botón de reproducción de audio si la reproducción de audio está bloqueada. Puedes desactivar el botón de reproducción de audio predeterminado del «Subscriber» y mostrar tu propio elemento de interfaz de usuario en el que el usuario hará clic para iniciar la reproducción de audio.

Para desactivar la visualización del botón predeterminado de reproducción de audio, configura el style.audioBlockedDisplayMode del parámetro options del Session.subscribe() método.

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

Añadir escuchadores de eventos para el audioBlocked y audioUnbocked enviados por el suscriptor para mostrar y ocultar el elemento de interfaz de usuario personalizado (que indica al usuario que haga clic para reproducir el audio):

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

Cuando el usuario hace clic en su elemento de interfaz de usuario personalizada, llame a la 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.');
});