Habilite el audio en su aplicación

En esta guía veremos cómo añadir eventos de audio a la Conversación que hemos creado en la aplicación conversación con eventos guía. Nos ocuparemos del envío y recepción de eventos multimedia desde y hacia la conversación.

Concepts

Esta guía le introducirá en los siguientes conceptos:

  • Transmisión de audio - El flujo que el SDK le ofrece en su navegador para escuchar audio y enviar audio
  • Pata de audio - Un término de la API del lado del servidor. Los tramos forman parte de una conversación. Cuando se activa el audio en una conversación, se crea un tramo
  • Evento mediático - a member:media que se dispara en una Conversación cuando cambia el estado de los medios de un miembro

Antes de empezar

Actualizar la aplicación JavaScript

Utilizaremos la aplicación que creamos para la tercera guía de iniciación. Toda la configuración básica se ha hecho en las guías anteriores y debe estar en su lugar. Ahora podemos centrarnos en la actualización de la aplicación del lado del cliente.

Añadir interfaz de audio

En primer lugar, vamos a añadir la interfaz de usuario para el usuario para activar y desactivar el audio, así como un <audio> que utilizaremos para reproducir el flujo de audio de la conversación. Vamos a añadir la interfaz de usuario en la parte superior del área de mensajes.

Y añadir los botones y <audio> en el constructor de la clase

constructor() {
...
  this.audio = document.getElementById('audio')
  this.enableButton = document.getElementById('enable')
  this.disableButton = document.getElementById('disable')
}

Añadir activación del controlador de audio

A continuación, actualizaremos el setupUserEvents para activar conversation.media.enable() cuando el usuario haga clic en el botón Enable Audio botón. La página conversation.media.enable() devuelve una promesa con un objeto stream, que utilizaremos como fuente para nuestro objeto <audio> elemento. A continuación, añadiremos un listener en el elemento <audio> para iniciar la reproducción en cuanto se hayan cargado los metadatos.

setupUserEvents() {
...
  this.enableButton.addEventListener('click', () => {
    this.conversation.media
      .enable()
      .then(stream => {
        // Older browsers may not have srcObject
        if ("srcObject" in this.audio) {
          this.audio.srcObject = stream;
        } else {
          // Avoid using this in new browsers, as it is going away.
          this.audio.src = window.URL.createObjectURL(stream);
        }

        this.audio.onloadedmetadata = () => {
          this.audio.play();
        }

        this.eventLogger('member:media')()
      })
      .catch(this.errorLogger)
  })
}

Ten en cuenta que al activar el audio en una conversación se establece un tramo de audio para un miembro de la conversación. El audio sólo se transmite a otros miembros de la conversación que también hayan activado el audio.

Añadir desactivar controlador de audio

A continuación, añadiremos la posibilidad de que el usuario desactive el flujo de audio. Para ello, actualizaremos la directiva setupUserEvents para activar conversation.media.disable() cuando el usuario haga clic en el botón Disable Audio botón.

setupUserEvents() {
...
  this.disableButton.addEventListener('click', () => {
    this.conversation.media
      .disable()
      .then(this.eventLogger('member:media'))
      .catch(this.errorLogger)
  })
}

Añadir miembro:media listener

Con estas primeras partes estamos enviando member:media en la conversación. Ahora vamos a registrar un oyente para ellos también que actualiza el messageFeed. Para ello, añadiremos un listener para member:media eventos al final del setupConversationEvents método

setupConversationEvents(conversation) {
  ...

  conversation.on("member:media", (member, event) => {
    console.log(`*** Member changed media state`, member, event)
    const text = `${member.user.name} <b>${event.body.audio ? 'enabled' : 'disabled'} audio in the conversation</b><br>`
    this.messageFeed.innerHTML = text + this.messageFeed.innerHTML
  })

}

Si queremos que se actualice el historial de conversaciones, tenemos que añadir un caso para member:media en el showConversationHistory interruptor:

showConversationHistory(conversation) {
  ...
  switch (value.type) {
    ...
    case 'member:media':
      eventsHistory = `${conversation.members.get(value.from).user.name} @ ${date}: <b>${value.body.audio ? "enabled" : "disabled"} audio</b><br>` + eventsHistory
      break;
    ...
  }
}

Abrir la conversación en dos ventanas del navegador

Ahora corre index.html en dos ventanas paralelas del navegador, asegurándose de iniciar sesión con el nombre de usuario jamie en uno y con alice en el otro. Activa el audio en ambos y empieza a hablar. También verás cómo se registran los eventos en la consola del navegador.

Ya está. Su página debería tener ahora un aspecto similar a este.

Referencia