Aktivieren von Audio in Ihrer Applikation

In dieser Anleitung werden wir das Hinzufügen von Audio-Ereignissen zu der Konversation behandeln, die wir in der Gespräch mit Veranstaltungen Leitfaden. Wir werden uns mit dem Senden und Empfangen von Medienereignissen zu und von der Konversation befassen.

Concepts

In diesem Leitfaden werden Sie mit den folgenden Concepts vertraut gemacht:

  • Audio-Stream - Der Stream, den das SDK Ihnen in Ihrem Browser zur Verfügung stellt, um Audio zu hören und zu senden
  • Audio Bein - Ein serverseitiger API-Begriff. Legs sind ein Teil einer Konversation. Wenn Audio in einer Konversation aktiviert ist, wird ein Leg erstellt
  • Medienereignis - a member:media Ereignis, das bei einer Konversation ausgelöst wird, wenn sich der Medienstatus eines Mitglieds ändert

Bevor Sie beginnen

Aktualisieren Sie die JavaScript-Anwendung

Wir werden die Anwendung verwenden, die wir für der dritte Leitfaden für den Einstieg. Alle grundlegenden Einstellungen wurden in den vorangegangenen Anleitungen vorgenommen und sollten nun vorhanden sein. Wir können uns nun auf die Aktualisierung der clientseitigen Anwendung konzentrieren.

Audio UI hinzufügen

Zunächst fügen wir die Benutzeroberfläche zum Aktivieren und Deaktivieren von Audio hinzu, sowie eine <audio> Element, mit dem wir den Audiostream der Konversation abspielen werden. Fügen wir die Benutzeroberfläche am oberen Rand des Nachrichtenbereichs hinzu.

Und fügen Sie die Schaltflächen und <audio> Element im Klassenkonstruktor

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

Audio-Handler aktivieren hinzufügen

Wir aktualisieren dann die setupUserEvents Methode zum Auslösen conversation.media.enable() wenn der Benutzer auf die Schaltfläche Enable Audio Taste. Die Website conversation.media.enable() gibt ein Versprechen mit einem Stream-Objekt zurück, das wir als Quelle für unsere <audio> Element. Dann fügen wir einen Hörer für das Element <audio> Element, um die Wiedergabe zu starten, sobald die Metadaten geladen wurden.

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)
  })
}

Beachten Sie, dass durch das Aktivieren von Audio in einer Konversation eine Audioverbindung für ein Mitglied der Konversation hergestellt wird. Der Ton wird nur an andere Gesprächsteilnehmer gestreamt, die ebenfalls Audio aktiviert haben.

Audio-Handler zum Deaktivieren hinzufügen

Als Nächstes fügen wir die Möglichkeit hinzu, dass ein Benutzer den Audiostream auch deaktivieren kann. Zu diesem Zweck aktualisieren wir die setupUserEvents Methode zum Auslösen conversation.media.disable() wenn der Benutzer auf die Schaltfläche Disable Audio Taste.

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

Mitglied hinzufügen:media listener

Mit diesen ersten Teilen senden wir member:media Ereignisse in die Konversation ein. Jetzt werden wir auch für sie einen Listener registrieren, der die messageFeed. Um dies zu tun, fügen wir einen Hörer für member:media Ereignisse am Ende der setupConversationEvents Methode

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
  })

}

Wenn wir wollen, dass der Gesprächsverlauf aktualisiert wird, müssen wir einen Fall für member:media im showConversationHistory Schalter:

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;
    ...
  }
}

Öffnen Sie das Gespräch in zwei Browserfenstern

Jetzt laufen index.html in zwei nebeneinander liegenden Browserfenstern, wobei Sie sich mit dem Benutzernamen jamie in einem und mit alice im anderen. Aktivieren Sie Audio auf beiden Geräten und beginnen Sie zu sprechen. In der Browserkonsole werden auch Ereignisse protokolliert.

Das war's! Ihre Seite sollte jetzt ungefähr so aussehen diese.

Referenz