Allgemeine Anpassungen

Es gibt eine Reihe von Einstellungen, mit denen Sie die Benutzeroberfläche von Vonage Video anpassen können:

Hinzufügen eines Namens für einen veröffentlichten Stream

Wenn Sie einen Publisher erstellen, können Sie (optional) einen Namen angeben, der im Video angezeigt werden soll:

Sie können diesen Namen verwenden, um den Client zu identifizieren.

Beachten Sie, dass Sie beim Erstellen eines Tokens auch Metadaten über den Client hinzufügen können. Dieser Name wird nicht automatisch im Video angezeigt. Wenn Sie die Daten jedoch bei der Erstellung eines Tokens hinzufügen, können Sie die Informationen auf sicherere Weise hinzufügen (da Token auf dem Server und nicht auf dem Client erstellt werden). Weitere Informationen finden Sie unter Token-Erstellung.

Clients können den Namen in einer Publisher- oder Subscriber-Ansicht ausblenden. Siehe dieser Abschnitt

Hinzufügen einer Stummschalttaste für einen Herausgeber

Standardmäßig enthält die Benutzeroberfläche für einen Publisher oder einen Subscriber eine Schaltfläche zum Stummschalten des Tons. Bei einem Publisher kann der Benutzer darauf klicken, um das Mikrofon ein- und auszuschalten.

Wenn Sie einen Stream veröffentlichen, können Sie angeben, ob die Stummschalttaste angezeigt wird, indem Sie eine style.buttonDisplayMode Eigenschaft in die OT.initPublisher() Methode:

Die style.buttonDisplayMode kann auf einen von drei Werten gesetzt werden:

  • "auto" - Die Stummschalttaste wird angezeigt, wenn der Stream zum ersten Mal angezeigt wird und wenn der Benutzer mit der Maus über das Video fährt (Standardeinstellung).
  • "Aus" - Die Stummschalttaste wird nicht angezeigt.
  • "on" - Die Stummschalttaste wird angezeigt.

Sobald Sie den Publisher erstellt haben, können Sie den Anzeigemodus der Stummschalttaste ändern, indem Sie die Funktion setStyle() Methode des Publisher-Objekts. Siehe die Dokumentation für Publisher.setStyle().

Hinzufügen einer Stummschalttaste für einen Teilnehmer

Standardmäßig enthält die Benutzeroberfläche für einen Publisher oder einen Subscriber eine Schaltfläche zum Stummschalten des Tons. Bei einem Abonnenten kann der Benutzer auf die Schaltfläche klicken, um den Lautsprecher ein- und auszuschalten.

Wenn Sie einen Stream abonnieren, können Sie angeben, ob der stumme Lautsprecher angezeigt wird, indem Sie eine style.buttonDisplayMode Eigenschaft in die Session.subscribe() Methode:

Die style.buttonDisplayMode kann auf einen von drei Werten gesetzt werden:

  • "auto" - Die Stummschalttaste wird angezeigt, wenn der Stream zum ersten Mal angezeigt wird und wenn der Benutzer mit der Maus über das Video fährt (Standardeinstellung).
  • "Aus" - Die Stummschalttaste wird nicht angezeigt.
  • "on" - Die Stummschalttaste wird angezeigt.

Sobald Sie den Teilnehmer erstellt haben, können Sie den Anzeigemodus der Stummschalttaste ändern, indem Sie die Funktion setStyle() Methode des Subscriber-Objekts. Siehe die Dokumentation für Abonnent.setStyle().

Hinzufügen einer Schaltfläche zum Umschalten der Kamera des Herausgebers

Es gibt kein Standard-Benutzeroberflächenelement, um die vom Herausgeber verwendete Kamera umzuschalten. Sie können jedoch ein Element, z. B. eine Schaltfläche, hinzufügen, das die Funktion swapCamera Methode des Publisher-Objekts:

Beachten Sie, dass die cameraPosition Eigenschaft ist in der PublisherKit-Klasse nicht verfügbar. Wenn Sie die PublisherKit-Klasse verwenden, um einen benutzerdefinierten Video-Capturer implementierenkönnen Sie die im benutzerdefinierten Code für die Videoaufzeichnung verwendete Kamera festlegen.

Anpassen der Benutzeroberfläche, wenn Video aktiviert oder deaktiviert ist

Ein Abonnentenobjekt sendet die folgenden Ereignisse im Zusammenhang mit der Aktivierung oder Deaktivierung des Videos für den Stream des Abonnenten:

  • videoEnabled - Wird ausgelöst, wenn das Video aktiviert wurde, nachdem es zuvor deaktiviert war.
  • videoDisabled - Wird ausgelöst, wenn das Video deaktiviert wurde. Die Eigenschaft Grund des Ereignisobjekts gibt an, warum das Video deaktiviert wurde. (Dieses Ereignisobjekt ist ein VideoEnabledChangedEvent Objekt).
  • videoDisableWarning - Wird gesendet, wenn der Medienrouter feststellt, dass sich die Qualität des Streams verschlechtert hat und das Video deaktiviert wird, wenn sich die Qualität weiter verschlechtert. Wenn sich die Qualität weiter verschlechtert, deaktiviert der Abonnent das Video und sendet eine videoDisabled Veranstaltung.
  • videoDisableWarningLifted - Das Video wurde aktiviert, nachdem es zuvor deaktiviert war.

Die videoDisableWarning und videoDisableWarningLifted Ereignisse sind nur in Sitzungen verfügbar, die die Medien-Router (Sitzungen, bei denen der Medienmodus auf geroutet eingestellt ist).

Standardmäßig zeigt der Teilnehmer eine Warnanzeige für deaktivierte Videos und eine Anzeige für deaktivierte Videos an, wenn die videoDisableWarning und videoDisableWarningLifted Ereignisse ausgelöst werden. Sie können die Standardanzeige des Indikators deaktivieren, indem Sie den Parameter videoDisabledDisplayMode Stil-Einstellung des Subscriber-Objekts.

Das folgende Beispiel verwendet die videoDisabledDisplayMode einstellen, dass die Warnanzeige für deaktiviertes Video und die Anzeige für deaktiviertes Video im Sekundentakt blinken, wenn der videoDisableWarning und videoDisableWarningLifted Ereignisse ausgelöst werden:

Sie können auch die videoDisabledDisplayMode Stil auf 'aus' und fügen Sie Ihre eigenen Elemente der Benutzeroberfläche auf der Grundlage der videoDisableWarning, videoDisabled, videoDisableWarningLiftedund videoEnabled Veranstaltungen.

Anzeige eines Indikatorelements, wenn ein Lauf archiviert wird

Wenn ein Archiv einer Sitzung mit der Aufzeichnung beginnt (oder wenn Sie eine Verbindung zu einer Sitzung herstellen, die gerade aufgezeichnet wird), wird die Session.ArchiveListener.onArchiveStarted(session, name) Methode aufgerufen wird. Wenn die Aufzeichnung endet, wird die Session.ArchiveListener.onArchiveStopped(session, name) Methode aufgerufen wird. Sie können ein Element der Benutzeroberfläche hinzufügen, z. B. ein Symbol, das in einer Herausgeberansicht angezeigt wird, um anzuzeigen, dass ein Video aufgezeichnet wird:

Anpassung der Benutzeroberfläche auf der Grundlage von Audiopegeln

Versand von Publisher- und Subscriber-Objekten audioLevelUpdated Ereignisse, um den Audiopegel periodisch zu melden. Sie können diese Ereignisse verwenden, um eine Audiopegelanzeige anzuzeigen. Sie können diese Ereignisse auch verwenden, um aktive Sprecher in einer Sitzung zu erkennen.

Das folgende Beispiel passt den Wert eines Zählerelements an, das die Lautstärke eines Teilnehmers anzeigt. Der Code setzt den audioLevelDisplayMode Stil zu 'off'Diese Option deaktiviert die Standard-Audiopegelanzeige, die im Abonnenten angezeigt wird. Beachten Sie, dass der Audiopegel logarithmisch angepasst wird und ein gleitender Durchschnitt angewendet wird:

Das Beispiel geht davon aus, dass es ein HTML-Zählerelement mit der ID "subscriberMeter" gibt.

Beachten Sie, dass im reinen Audiomodus ein Publisher- oder Subscriber-DOM-Element standardmäßig eine Lautstärkeanzeige anzeigt (in der oberen rechten Ecke des Elements). Sie können dieses Standard-Benutzeroberflächenelement deaktivieren und Ihre eigene Lautstärkeanzeige anzeigen. Siehe das nächste Thema, Anpassen der Benutzeroberfläche, wenn Video aktiviert oder deaktiviert ist.

Sie können auch die audioLevelUpdated Ereignis, um festzustellen, wann der Ton eines Verlegers oder Teilnehmers lange genug laut ist, um den Teilnehmer als sprechend zu kennzeichnen. Oder, wenn das Audio lange genug ruhig war, können Sie den Teilnehmer als nicht mehr sprechend identifizieren:

(Anstatt in der Konsole zu protokollieren, könnte Ihre Anwendung ein Element der Benutzeroberfläche anpassen, wenn der Benutzer zu sprechen beginnt und aufhört.

Verwendung eines benutzerdefinierten Video-Renderers

Die Subscriber- und Publisher-Klassen implementieren einen Standard-Videorenderer, der den Stream rendert und Steuerelemente für die Benutzeroberfläche zum Anzeigen des Streamnamens und zum Stummschalten des Mikrofons oder der Kamera bereitstellt. Sie können die SubscriberKit- und PublisherKit-Klassen verwenden, um einen benutzerdefinierten Video-Renderer zu implementieren.

Das Android SDK enthält eine BaseVideoRenderer-Klasse. Überschreiben Sie diese Klasse, um einen benutzerdefinierten Videorenderer zu erstellen.

Nachdem Sie ein PublisherKit-Objekt instanziiert haben, können Sie einen benutzerdefinierten Videorenderer festlegen, indem Sie die setRenderer() Methode des PublisherKit-Objekts:

Die SubscriberKit-Klasse hat auch eine setRenderer() Methode.

Die onFrame() Methode der BaseVideoRenderer-Klasse wird aufgerufen, wenn ein neues Bild verfügbar ist:

Die frame ist ein BaseVideoRenderer.Frame-Objekt. Dieses Objekt enthält ein getBuffer() die den Byte-Puffer mit den Videobilddaten zurückgibt. Sie können diesen Bytepuffer verwenden, um das Videobild in die Ansicht des Herausgebers einzufügen.

Ein Beispiel finden Sie in der Klasse OpenTokVideoRenderer in der Beispielanwendung OpenTokHelloWorld.

Sie können einen Verlag auch so einrichten, dass er eine benutzerdefinierter Video-Capturer.