Dynamische Layouts in HLS/RMTP-Übertragungen verwenden

Die Video API ermöglicht Ihnen die volle Kontrolle über Ihre Benutzeroberfläche, wenn Sie Anwendungen mit Videositzungen mit mehreren Teilnehmern erstellen. Welche Optionen stehen jedoch zur Verfügung, wenn Sie diese Sitzungen über HLS- und/oder RTMP-Streams übertragen müssen?

In diesem Beitrag werden wir besprechen, welche integrierten Layouts sofort verfügbar sind, wie Sie eigene Layouts erstellen und wie Sie Layouts und Streamstile während des Betriebs ändern können. Anschließend wird erläutert, wie Sie die Layouts zusammen mit der Benutzeroberfläche Ihrer Anwendung mithilfe des Vonage Experience Composer erfassen können.

Möchten Sie es ausprobieren? Sie können sich eine Beispielanwendung mit der Broadcast-Funktion auf GitHub. Sie können sie auch auf Heroku bereitstellen, um sie auszuprobieren.

Eingebaute Layout-Typen

Bei der Auswahl des besten Layouts für Ihre Sendung sind mehrere Faktoren zu berücksichtigen. Spricht jemand? Teilt jemand seinen Bildschirm? Handelt es sich bei dem Gespräch um eine Podiumsdiskussion?

Glücklicherweise bietet die Vonage Video API mehrere vordefinierte Layouts, mit denen Sie das beste Erlebnis für Ihre Zuschauer schaffen können.

Standardmäßig verwenden die Sendungen das bestFit Layout (siehe unten). Dieses Layout ändert sich in Abhängigkeit von der Anzahl der Teilnehmer und bietet jedem Herausgeber die gleiche Bildschirmfläche.

Weitere Optionen sind Bild-in-Bild (pip), Vertikale Darstellung (verticalPresentation) und Horizontale Darstellung (horizontalPresentation).

Update Mai 2021: Neue vertikale Layouts wurden hinzugefügt, um Aufnahmen oder Sendungen in SD- und HD-Auflösungen im Hochformat zu ermöglichen, ideal für mobile Geräte:

Neue Bildschirmfreigabe-Layouttypen

Neue Layout-Typen wurden im Mai 2021 eingeführt:

• bestFit

• horizontalPräsentation

• verticalPräsentation

• pip

Initialisieren und Ändern von Layouts

Sie können beim Start einer Sendung ein Anfangslayout festlegen. Dazu fügen Sie eine layout Eigenschaft, die eine type Eigenschaft in den Anforderungskörper ein. Diese type Eigenschaft sollte dem vordefinierten Layout entsprechen, das Sie verwenden möchten.

{
  "sessionId": "2_MX44NTQ1MTF--bm1kTGQ0RjVHeGNQZE51VG5scGNzdVl0flB-",
  "layout": {
    "type": "bestFit"
  }
}

Um das Layout während einer Live-Streaming-Übertragung zu ändern, verwenden Sie eines der OpenTok-Server-SDKs oder rufen Sie den OpenTok /broadcast/layout REST API Endpunkt.

Senden Sie ein JSON-Objekt mit einer type Eigenschaft, die das Layout bezeichnet, das Sie im Textkörper Ihrer Anfrage benötigen.

{
  "type": "pip"
}

Die Verwendung von Layouts ist jedoch nur der erste Schritt, damit Ihr Stream gut aussieht. Der nächste Schritt ist die Aktualisierung der Klassenlisten für Ihre Streams.

Nehmen wir das Layout Vertikale Präsentation verticalPresentation Layout als Beispiel. In der obigen Abbildung sehen Sie, dass der große Bereich das Wort "Fokus" enthält. Fokus ist der Name einer Klasse, die auf den Stream angewendet werden sollte, der in diesem Bereich erscheinen soll.

Unabhängig davon, ob es sich um einen gemeinsam genutzten Bildschirm, einen aktiven Sprecher oder einen Herausgeber handelt, den Sie als "Präsentator" gekennzeichnet haben, sollte dem Stream, den Sie präsentieren möchten, die Klasse "Fokus" zugewiesen sein und keine anderen. Lassen Sie uns über Stile sprechen und darüber, wie Sie sie anwenden und ändern können.

Broadcast und Stream Styles

Das Layout für eine Sendung wird in einem virtuellen DOM mit der folgenden Struktur erstellt:

<broadcast>
  <stream class="{layoutClassList}" />
  <stream class="{layoutClassList}" />
  <stream class="{layoutClassList}" />
  ...
</broadcast>

Sie sollten diese Struktur im Hinterkopf behalten, wenn Sie die vordefinierten Layouts verwenden oder Ihre eigenen Layouts erstellen. Standardmäßig hat das gesendete Video eine Auflösung von 640x480 Pixeln, aber Sie können beim Starten der Sendung die Verwendung von 1280x720 festlegen. In diesem Fall werden die vordefinierten Layouts so angepasst, dass ein Seitenverhältnis von 16:9 verwendet wird.

Wichtig! Es können immer nur 16 Streams gleichzeitig in einer Sendung angezeigt werden.

Wechselnde Stile

Die vordefinierten Layouts enthalten CSS, um das Erscheinungsbild der Sendung zu steuern. Um sie zu nutzen, müssen Sie angeben, welche Klassen für welche Streams gelten sollen. Sie können die Klassenliste für Streams mit einem unserer Server-SDKs oder über die OpenTok REST API ändern /session/{sessionId}/stream Endpunkt. Anfragen an den Endpunkt würden einen JSON-Body ähnlich dem unten stehenden Objekt enthalten:

{
  "items": [
    {
      "id": "8b732909-0a06-46a2-8ea8-074e64d43422", // stream id
      "layoutClassList": ["focus"] // array of classes to apply to the specified stream
    }
  ]
}

Es ist wichtig zu beachten, dass die items Eigenschaft ein Array ist, mit dem Sie Details zu mehreren Streams in einer Anfrage angeben können. Im Beispiel der vertikalen Darstellung sollten Sie also die obige Nutzlast senden und dabei die ID des Streams angeben, auf den Sie sich konzentrieren möchten. Wenn ein anderer Stream zuvor die Fokusklasse hatte, sollten Sie ihn mit einer leeren Klassenliste senden, damit die Fokusklasse aus ihm entfernt wird.

Benutzerdefinierte Layouts erstellen

Wenn eines der vordefinierten Layouts nicht Ihren Anforderungen entspricht, können Sie ein eigenes Layout erstellen, indem Sie custom als Typ und eine stylesheet Eigenschaft mit CSS.

{
  "sessionId": "2_MX44NTQ1MTF--bm1kTGQ0RjVHeGNQZE51VG5scGNzdVl0flB-",
  "layout": {
    "type": "custom",
    "stylesheet": "stream.instructor {position: absolute; width: 100%;  height:50%;}"
  }
}

Bei der Erstellung eines benutzerdefinierten Layouts sollten Sie ein paar Dinge beachten:

• Standardstile, die auf die Felder broadcast und stream Elemente

• Erlaubte CSS-Selektoren

• Erlaubte CSS-Eigenschaften und -Werte

Standard-Stile

Die broadcast und stream Elemente haben Standardregeln, die auf sie angewendet werden. Sie können diese Stile in Ihrem benutzerdefinierten CSS außer Kraft setzen. Die Standardregeln sind:

broadcast {
  position: relative;
  margin:0;
  width: 640px;
  height:480px;
  overflow: hidden;
}
stream {
  display: block;
  margin: 0;
}

Hinweis: Die Auflösung des Containers ist fest und kann nicht durch CSS überschrieben werden.

Erlaubte CSS-Selektoren

Typselektoren werden nur für Stream-Elemente unterstützt. Das Broadcast-Element kann nicht ausgewählt werden. Klassenselektoren (wie .focus) werden unterstützt (und bevorzugt). Sie können zur Auswahl einer beliebigen Gruppe von Streams oder eines einzelnen Streams verwendet werden. Angrenzende Geschwister- und allgemeine Geschwisterkombinationen werden unterstützt (Geschwister-eins + Geschwister-zwei, Geschwister-eins ~ Geschwister-zwei).

Die :first-child, :last-child, :nth-child(n), und :nth-last-child(n) Pseudoklassen-Selektoren werden ebenfalls unterstützt.

Die folgenden Selektoren werden nicht unterstützt:

• Der Universalselektor (*)

• Nachkommen-Selektoren (übergeordneter Vorfahr, übergeordneter * Vorfahr)

• Kind-Selektoren (Elternteil > Kind)

• ID-Selektoren (#myidentifier)

• Attributselektoren ([data-title*="my-title"])

• Pseudo-Element-Selektoren werden nicht unterstützt

Erlaubte CSS-Eigenschaften

Die folgende Tabelle beschreibt die derzeit unterstützten CSS-Eigenschaften und ihre möglichen Werte:

Es geht weiter

Mit dem Erlebnis-Komponistkönnen Sie nicht nur das Layout Ihres Videoanrufs, sondern Ihre gesamte Webanwendung erfassen. Dazu gehören alle Banner, Textchats, Whiteboards oder andere UI-Elemente, die in Ihrer Anwendung angezeigt werden. Experience Composer verbindet sich mit dem Videoanruf und verwandelt alles, was auf dem Bildschirm zu sehen ist, in einen weiteren Stream. Dieser Stream kann dann ausgestrahlt und/oder archiviert werden.

Weiteres Lernen

Möchten Sie mehr darüber erfahren, wie Sie das Aussehen Ihrer Sendungen anpassen können? Sehen Sie sich die folgenden Links an:

• OpenTok-Übertragung

• Konfigurieren des Video-Layouts für OpenTok-Live-Streaming-Übertragungen