Visualización de un elemento de interfaz de usuario personalizado cuando el audio del abonado está bloqueado

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. Puede desactivar el botón de reproducción de audio predeterminado de Subscriber y mostrar su 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 de reproducción de audio predeterminado, configure la opción 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.');
});