Video-Layouts für komponierte Archive und Live-Streaming-Übertragungen

Es gibt eine Reihe von vordefinierten Layout-Typen, die Sie für zusammengestellte Archive und Live-Streaming-Sendungen verwenden können. Sie können auch CSS verwenden, um benutzerdefinierte Layouts zu definieren.

Diese Layout-Optionen gelten für zusammengestellte Archive (nicht für einzelne Archive) und Live-Streaming-Sendungen (nicht für interaktive Sendungen).

Siehe Anpassen des Videolayouts für zusammengestellte Archive

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

Sie können Streams Layout-Klassen zuweisen, um zu beeinflussen, wie sie im Layout eines Archivs oder einer Sendung angezeigt werden.

Vordefinierte Layout-Typen

Es stehen vier vordefinierte Layouttypen zur Verfügung: optimale Anpassung, Bild-in-Bild, vertikale Darstellung und horizontale Darstellung.

Beste Passform

Dies ist der standardmäßige anfängliche Layouttyp. Dies ist ein gekacheltes Layout, das entsprechend der Anzahl der Videos skaliert wird.

Die Anzahl der Spalten und Zeilen hängt von der Anzahl der Streams in der Sendung ab.

Das folgende Beispiel zeigt das Layout, wenn es 1, 2, 4 oder 5 Streams in einer Sitzung gibt:

Layout-Klassen auf diesen Streams haben keinen Einfluss auf das Layout. Jede Position in der Liste wird in eine Position im Raster übersetzt.

Dieses Layout unterstützt bis zu 16 Streams (in einem Raster).

Ströme werden in das Layout aufgenommen auf der Grundlage von Strompriorisierungsregeln.

Um dieses Layout zu wählen, setzen Sie die type Eigenschaft zu "bestFit".

Für Archive, siehe Festlegen des anfänglichen Layouttyps und Dynamische Änderung des Layouttyps während einer Archivaufzeichnung.

Für Sendungen, siehe Festlegen des anfänglichen Layouttyps und Dynamische Änderung des Layout-Typs während einer Live-Streaming-Übertragung.

Bild-in-Bild

Dies ist ein Bild-in-Bild-Layout, bei dem ein kleiner Stream über einem Stream in voller Größe zu sehen ist.

C = Ecke

Setzen Sie die Layoutklasse des Vollbild-Streams auf "full". (Siehe Zuweisung von Layoutklassen zu Streams.)

Der erste Stream ohne diese Klasse belegt die Eckposition.

Wenn mehr als zwei Streams im Archiv oder in der Sendung vorhanden sind, werden nur die ersten beiden Streams in der Ausgabe sichtbar sein.

Um dieses Layout zu wählen, setzen Sie die type Eigenschaft zu "pip".

Für Archive, siehe Festlegen des anfänglichen Layouttyps und Dynamische Änderung des Layouttyps während einer Archivaufzeichnung.

Für Sendungen, siehe Festlegen des anfänglichen Layouttyps und Dynamische Änderung des Layout-Typs während einer Live-Streaming-Übertragung.

Vertikale Präsentation

Dies ist ein Layout mit einem großen Datenstrom am rechten Rand der Ausgabe und mehreren kleineren Datenströmen entlang des linken Randes der Ausgabe.

Setzen Sie die Layout-Klasse des Fokus-Streams auf "focus". (Siehe Zuweisung von Layoutklassen zu Streams.) Die Ströme ohne die Fokusklasse nehmen den linken Rand ein und teilen den Platz gleichmäßig auf.

Für Videos im Querformat (640x480, 1280x720, 1920x1080) unterstützt dieses Layout 1 Fokus-Stream und bis zu 5 andere Streams (oder bis zu 7 für Videos mit 1920x1080).

Für Videos im Hochformat (480x640, 720x1280 und 1080x1920) unterstützt dieses Layout 1 Fokus-Stream und bis zu 8 andere Streams (oder 10 andere Streams für 1080x1920).

Um dieses Layout zu wählen, setzen Sie die type Eigenschaft zu "verticalPresentation":

Für Archive, siehe Festlegen des anfänglichen Layouttyps und Dynamische Änderung des Layouttyps während einer Archivaufzeichnung.
Für Sendungen, siehe Festlegen des anfänglichen Layouttyps und Dynamische Änderung des Layout-Typs während einer Live-Streaming-Übertragung.

Horizontale Präsentation

Dies ist ein Layout mit einem großen Datenstrom am oberen Rand der Ausgabe und mehreren kleineren Datenströmen entlang des unteren Randes der Ausgabe.

Es gibt eine Layoutklasse, mit der die Position der Streams in diesem Layout festgelegt wird: focus. (Siehe Zuweisung von Layoutklassen zu Streams).

Die Ströme ohne diese Klasse nehmen den unteren Rand ein und teilen den Raum gleichmäßig auf.

Die Positionen können wie folgt visualisiert werden:

Für Videos im Querformat (640x480, 1280x720 und 1920x1080) unterstützt dieses Layout 1 Fokus-Stream und bis zu 5 andere Streams (oder bis zu 7 für Videos mit 1920x1080).

Für Videos im Hochformat (480x640, 720x1280 und 1080x1920) unterstützt dieses Layout 1 Fokus-Stream und bis zu 3 andere Streams.

Um dieses Layout zu wählen, setzen Sie die type Eigenschaft zu "horizontalPresentation":

Für Archive, siehe Festlegen des anfänglichen Layouttyps und Dynamische Änderung des Layouttyps während einer Archivaufzeichnung.

Für Sendungen, siehe Festlegen des anfänglichen Layouttyps und Dynamische Änderung des Layout-Typs während einer Live-Streaming-Übertragung.

Zuweisung von Layout-Klassen zu Vonage Video-Streams

Wenn Sie einen anderen Layout-Typ als das Standard-Layout Best Fit verwenden, müssen Sie die Layout-Klasse für die Vonage Video-Streams basierend auf dem Layout-Typ festlegen:

Wenn Sie das Bild-in-Bild-Layout verwenden, stellen Sie einen Stream auf die Verwendung des full Layout-Klasse.
Wenn Sie das Layout "Horizontale Darstellung" verwenden, stellen Sie einen Stream so ein, dass er die focus Layout-Klasse.
Wenn Sie das Layout "Vertikale Darstellung" verwenden, stellen Sie einen Stream so ein, dass er die focus Layout-Klasse.

Einstellen der anfänglichen Layout-Klassenliste für die Streams eines Kunden

Wenn Sie ein Token für einen Client erstellen, um eine Verbindung zur Sitzung herzustellen, können Sie (optional) die anfängliche Layoutklassenliste für die vom Client veröffentlichten Streams angeben.

Dazu erzeugen Sie ein Token, das die anfängliche Einstellung der Layout-Klassenliste enthält.

Die folgenden Beispiele verwenden das Node SDK.

Knotenpunkt:

// Generate a Token from just a sessionId (fetched from a database)
const options = {
    role: "moderator",
    expireTime: new Date().getTime() / 1000 + 7 * 24 * 60 * 60, // in one week
    data: "name=Johnny",
    initialLayoutClassList: ["focus"]
}
const token = vonage.video.generateClientToken(sessionId, options);

Ändern der Layoutklassenliste für einen Stream

Sie können die Layout-Klassenliste für einen Stream dynamisch ändern, indem Sie die /session/{sessionId}/stream REST-API.

Stellen Sie eine PUT-Anfrage an die folgende URL:

/v2/project/{appId}/session/{sessionId}/stream

Setzen Sie den Content-Type auf "application/json" und nehmen Sie die Layout-Klassenliste als Eigenschaft der JSON-Daten in die PUT-Anforderung auf:

{
  "items": [
    {
      "id": "8b732909-0a06-46a2-8ea8-074e64d43422",
      "layoutClassList": ["full"]
    }
  ]
}

Die id Eigenschaft ist die Stream-ID. Beachten Sie, dass Sie die Layoutklassenliste für mehrere Streams aktualisieren können, indem Sie mehrere JSON-Objekte im Array items übergeben.

Die Anfrage gibt einen Antwortcode 400 zurück, wenn Sie einen ungültigen layoutClassList-Wert angeben. Der Wert muss ein Array von Strings sein.

Abrufen der Layout-Klassenliste für einen Stream

/v2/project/:application_id/session/:session_id/stream/:stream_id REST API

Sie können die Layout-Klassenliste für einen Stream abrufen, indem Sie die REST-API aufrufen /session/{sessionId}/stream/{streamId}. Stellen Sie eine GET-Anfrage an die folgende URL:

/v2/project/{appId}/session/{sessionId}/stream/{streamId}

Die Antwort enthält JSON-Daten, zu denen auch eine layoutClassList Array:

{
  "id": "8b732909-0a06-46a2-8ea8-074e64d43422",
  "videoType": "camera",
  "name": "",
  "layoutClassList": ["full"]
}

Die layoutClassList ist ein Array mit den Layout-Klassen für den Stream.
Die id Eigenschaft ist die Stream-ID.
Die videoType auf "Kamera", "Bildschirm" oder "Benutzerdefiniert" eingestellt ist. Ein "Bildschirm"-Video verwendet die Bildschirmfreigabe auf dem Herausgeber als Videoquelle; ein "benutzerdefiniertes" Video wird von einem Web-Client veröffentlicht, der ein HTML-VideoTrack-Element als Videoquelle verwendet.
Die name ist der Stream-Name (falls er bei der Veröffentlichung des Streams durch den Client festgelegt wurde).

Wenn Sie eine ungültige Stream-ID angeben, gibt die Anfrage den Fehlercode 408 zurück.

Sie können die Liste der Layoutklassen für einen Stream auch mit dem Befehl Server-SDKs:

Knotenpunkt - getStreamInfo() (rufen Sie die getLayoutClassList() Methode des Stream-Objekts)
PHP getStream() (Prüfen Sie die layoutClassList Eigenschaft des Stream-Objekts)

Abrufen der Layoutklassenliste für mehrere Streams

/v2/project/:application_id/session/:session_id/stream REST API

Sie können die Layoutklassenliste für alle Streams in einer Sitzung abrufen, indem Sie die REST-API aufrufen /session/{sessionId}/stream. Stellen Sie eine GET-Anfrage an die folgende URL:

/v2/project/:application_id/session/:session_id/stream

Die Antwort enthält JSON-Daten, zu denen auch ein items Eigenschaft, die ein Array mit Layoutinformationen für Streams in der Sitzung ist:

{
  "count": 2
  "items": [
    {
      "id": "8b732909-0a06-46a2-8ea8-074e64d43422",
      "videoType": "camera",
      "name": "",
      "layoutClassList": ["full"]
    },
    ...
  ]
}

Die layoutClassList ist ein Array mit den Layout-Klassen für den Stream.
Die id Eigenschaft ist die Stream-ID.
Die videoType Eigenschaft auf "Kamera", "Bildschirm" oder "Benutzerdefiniert" gesetzt ist. Ein "Bildschirm"-Video verwendet die Bildschirmfreigabe auf dem Herausgeber als Videoquelle; ein "Kamera"-Video wird von einem Web-Client veröffentlicht, der ein HTML-VideoTrack-Element als Videoquelle verwendet.
Die name ist der Stream-Name (falls er bei der Veröffentlichung des Streams durch den Client festgelegt wurde).

Layout-Typen für die Bildschirmfreigabe

Sie können einen Layouttyp angeben, der verwendet werden soll, wenn ein Screen-Sharing-Stream live in der Sitzung stattfindet.

Für ein zusammengesetztes Archiv setzen Sie die screenshareType Option, wenn Angabe des anfänglichen Layouttyps und wenn Dynamische Änderung des Layouttyps während einer Archivaufzeichnung.

Für Sendungen, siehe Festlegen des anfänglichen Layouttyps und Dynamische Änderung des Layout-Typs während einer Live-Streaming-Übertragung.

Sie können diesen Layouttyp für die gemeinsame Nutzung des Bildschirms festlegen (screenshareType) auf einen der folgenden Layouttypen:

bestFit - Dabei wird die beste Passform Layout. Es werden jedoch nur Streams zur gemeinsamen Nutzung von Bildschirmen in das Layout aufgenommen.
horizontalPresentation - Dabei wird die horizontale Darstellung Layout. Der Stream zur gemeinsamen Nutzung des Bildschirms (nicht ein Stream mit einer focus Klasse angewandt) die Fokusposition im Layout einnehmen wird.
verticalPresentation - Dabei wird die vertikale Darstellung Layout. Der Stream zur gemeinsamen Nutzung des Bildschirms (nicht ein Stream mit einer focus Klasse angewandt) die Fokusposition im Layout einnehmen wird.
pip - Dabei wird die Bild-in-Bild Layout. Der Stream zur gemeinsamen Nutzung des Bildschirms (nicht ein Stream mit einer full Klasse angewendet) wird die gesamte Position im Layout belegt. Das kleinere Video im Layout wird anhand der folgenden Kriterien bestimmt Strompriorisierungsregeln. Wenn z. B. der Client, der den Bildschirmfreigabe-Stream veröffentlicht, auch einen Stream mit einer Kamera-Videoquelle veröffentlicht, nimmt dieses Video die kleinere Videoposition ein (es sei denn, ein anderer Stream hat eine höhere Priorität, z. B. weil ihm eine Layoutklasse zugewiesen wurde).

Wenn ein Screen-Sharing-Stream live in der Sitzung vorhanden ist, verwendet das Archiv oder die Übertragung den von Ihnen angegebenen Screen-Sharing-Layout-Typ. Wenn in der Sitzung kein Screen-Sharing-Video vorhanden ist, verwendet das Archiv bzw. die Sendung das am besten geeignete Layout. (Wenn Sie ein screenshareTypemüssen Sie die wichtigsten layout type zu bestFit.

Regeln für die Strompriorisierung

Zusammengestellte Archive und Live-Streaming-Übertragungen können bis zu 16 Videoströme gleichzeitig enthalten.

Der Layout Composer verwendet die folgenden Regeln, um zu bestimmen, welche Videostreams in das Archiv oder die Sendung aufgenommen werden und wie die Streams geordnet und dem virtuellen DOM hinzugefügt werden.

Streams werden in zwei Kategorien eingeteilt:

Flüsse des oberen Bereichs - Flüsse, die bereits eine Layout-Klasse zugewiesen
Streams der unteren Ebene - Streams, die keine zugehörigen Layout-Klassen haben

Die Strompriorisierung wird festgelegt:

Streams der oberen Ebene (Streams, denen Layoutklassen zugewiesen wurden) werden in dieser Reihenfolge priorisiert:
- Bildschirmfreigabe-Streams
- Streams ohne Bildschirmfreigabe, die von Clients veröffentlicht werden, die auch Streams mit Bildschirmfreigabe veröffentlichen
- Alle anderen Streams (geordnet nach dem Zeitpunkt, zu dem sie der Liste der in das Archiv oder die Sendung aufzunehmenden Streams hinzugefügt werden)
Ströme der unteren Ebene (Ströme, die nicht zugewiesenen Layout-Klassen) werden dann in dieser Reihenfolge als nächstes priorisiert:
- Bildschirmfreigabe-Streams
- Streams ohne Bildschirmfreigabe, die von Clients veröffentlicht werden, die auch Streams mit Bildschirmfreigabe veröffentlichen
- Streams, die von Clients veröffentlicht werden, die auch Streams der höheren Ebene veröffentlichen (zugewiesene Streams, Layoutklassen)
- Alle anderen Streams (geordnet nach dem Zeitpunkt, zu dem sie der Liste der in das Archiv oder die Sendung aufzunehmenden Streams hinzugefügt werden)

Die Videostreams, die in das zusammengestellte Archiv oder die Sendung aufgenommen werden, werden auf der Grundlage ihrer Prioritäten ausgewählt.

Die Streams werden immer nach diesen Regeln geordnet. Solange es zwei oder mehr Streams gibt, werden sie dem virtuellen DOM in dieser Reihenfolge hinzugefügt.

Wenn ein Client das Videostreaming beendet, wird er aus dem zusammengestellten Video entfernt. Wenn er das Videostreaming wieder aufnimmt, wird er dem zusammengestellten Video wieder hinzugefügt, wenn er eine höhere Priorität als andere Clients hat (basierend auf diesen Priorisierungsregeln).

Zusammengestellte Videos können bis zu 16 Client-Videostreams enthalten.

Wenn ein zusammengesetztes Archiv oder eine Sendung die maximale Kapazität für eingeschlossene Streams erreicht und ein Client, der einen eingeschlossenen Stream veröffentlicht, die Verbindung trennt, wird Platz für einen neuen Stream frei.

Der Videostream mit der nächsthöheren Priorität wird einbezogen und gerendert.

Anmerkungen:

Diese Regeln für die Stream-Priorisierung gelten unabhängig davon, ob die streamMode des Archivs oder der Sendung wird auf "auto" oder "manual".

Siehe Auswahl von Streams, die in zusammengesetzte Archive aufgenommen werden sollen und Auswahl von Streams, die in Live-Streaming-Übertragungen einbezogen werden sollen

Zusammengestellte Archive und Live-Streaming-Übertragungen können bis zu 50 Audio Ströme. Die ersten 50 veröffentlichten Streams, die Audio enthalten, werden in die Audioausgabe für das Archiv oder die Sendung gemischt.

Definieren benutzerdefinierter Layouts

Zusätzlich zu den vordefinierte Layoutskönnen Sie CSS verwenden, um Ihr eigenes benutzerdefiniertes Layout für zusammengestellte Archive und Live-Streaming-Sendungen zu definieren. Um ein benutzerdefiniertes Layout zu verwenden, setzen Sie die Typ-Eigenschaft für das Layout auf "benutzerdefiniert" und legen eine zusätzliche Eigenschaft fest, stylesheetdie auf den CSS eingestellt ist:

Für Archive, siehe Festlegen des anfänglichen Layouttyps während einer Archivaufzeichnung und Dynamische Änderung des Layouttyps während einer Archivaufzeichnung.)
Für Sendungen, siehe Festlegen des anfänglichen Layouttyps und Dynamische Änderung des Layout-Typs während einer Live-Streaming-Übertragung.

CSS verwendet in der stylesheet Eigenschaft der Layout-Ressource wird auf ein virtuelles DOM angewendet, das im folgenden Format beschrieben werden kann:

Für eine Sendung:

Für ein Archiv:

Anmerkung: Standardmäßig beträgt die Auflösung des zusammengestellten Archivs oder der Sendung 640x480 Pixel (SD-Querformat). Sie können für ein zusammengesetztes Archiv oder eine Sendung auch eine Auflösung von 480x640 (SD-Hochformat), 1280x720 (HD-Querformat), 720x1280 (HD-Hochformat), 1920x1080 (FHD-Querformat) oder 1080x1920 (FHD-Hochformat) festlegen.

wenn Sie die Archiv starten oder die Startsendung Methode der REST-API. 640x480-Pixel- und 480x640-Pixel-Archive (SD) haben ein Seitenverhältnis von 4:3 und 3:4. 1280x720-Pixel-, 720x1280-Pixel-, 1920x1080-Pixel- und 1080x1920-Pixel-Archive (HD und FHD) haben ein Seitenverhältnis von 16:9 und 9:16.

Berücksichtigen Sie diese Seitenverhältnisse bei der Definition des CSS für ein benutzerdefiniertes Layout.

Regeln

Die folgenden Standardregeln werden auf die <archive> Element:

archive {
  position: relative;
  margin:0;
  width: 640px;
  height:480px;
  overflow: hidden;
}

In ähnlicher Weise werden die folgenden Standardregeln auf die <broadcast> Element:

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

Die Standardabmessungen sind 640x480 Pixel (SD-Querformat). Sie können ein zusammengesetztes Archiv oder eine Sendung auch so einstellen, dass ein 480x640 (SD hoch), 1280x720 (HD quer), 720x1280 (HD hoch), 1920x1080 (FHD-Querformat), oder 1080x1920 (FHD-Hochformat) auf, wenn Sie die Funktion Archiv starten oder Startsendung Methode der REST-API.

Die folgenden Standardregeln werden auf Elemente angewendet:

stream {
  display: block;
  margin: 0;
}

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

Selektoren

Die folgenden CSS-Selektoren werden unterstützt:

Typ-Selektoren werden nur für Stream-Elemente (stream) unterstützt.
Klassenselektoren (wie z. B. .instructor) werden unterstützt (und bevorzugt) und können zur Auswahl einer beliebigen Gruppe von Streams oder eines einzelnen Streams verwendet werden.
Benachbarte Geschwister- und allgemeine Geschwister-Kombinatoren werden unterstützt (sibling-one + sibling-two, sibling-one ~ sibling-two).

Die folgenden Pseudoklassenselektoren werden unterstützt:

:first-child
:last-child
:nth-child(n)
:nth-last-child(n)

Die folgenden CSS-Selektoren werden nicht unterstützt:

Der Universalselektor wird nicht unterstützt (*).
Deszendente Selektoren werden nicht unterstützt (parent ancestor, parent * ancestor).
Child-Selektoren werden nicht unterstützt (parent > child).
ID-Selektoren werden nicht unterstützt (zum Beispiel, #myidentifier).
Attributselektoren werden nicht unterstützt (zum Beispiel, [data-title*="my-title"]).
Pseudo-Element-Selektoren werden nicht unterstützt.

Eigenschaften

In der folgenden Tabelle werden die unterstützten CSS-Eigenschaften und ihre möglichen Werte beschrieben:

Name	Wert
`width`, `height`	positive Zahl ( `px`/ `%`)
`min-width`, `min-height`	positive Zahl ( `px`/ `%`)
`max-width`, `max-height`]	positive Zahl ( `px`/ `%`)
`left`, `right`, `top`, `bottom`	Number ( `px`/ `%`)
`margin`, `margin-left`, `margin-right`, `margin-top`, `margin-bottom`	Number ( `px`/ `%`)
`z-index`	positive Zahl
`position`	`'relative'`, `'absolute'`
`display`	`'inline'`, `'block'`, `'inline-block'`
`float`	`'none'`, `'left'`, `'right'`
`object-fit`	`'contain'` (die Standardeinstellung), `'cover'`
`overflow`	`'hidden'`
`clear`	`'none'`, `'left'`, `'right'`, `'both'`, `'initial'`, `'inherit'`

Beispiel-CSS

Das folgende CSS ordnet zwei Ströme mit Klassennamen an main und lower-left:

stream.main {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 100;
}
stream.lower-left {
  position: absolute;
  left: 10%;
  bottom: 10%;
  width: 20%;
  height: 20%;
  z-index: 200;
}

Der folgende CSS basiert auf der besten Anpassung vordefiniertes Layout:

stream {
  float: left;
}
stream:first-child:nth-last-child(1) {
  width: 100%;
  height: 100%;
}

stream:first-child:nth-last-child(2),
stream:first-child:nth-last-child(2) ~ stream {
  width: 50%;
  height: 100%;
}
stream:first-child:nth-last-child(3),
stream:first-child:nth-last-child(3) ~ stream,
stream:first-child:nth-last-child(4),
stream:first-child:nth-last-child(4) ~ stream {
  width: 50%;
  height: 50%;
}
stream:first-child:nth-last-child(5),
stream:first-child:nth-last-child(5) ~ stream,
stream:first-child:nth-last-child(6),
stream:first-child:nth-last-child(6) ~ stream,
stream:first-child:nth-last-child(7),
stream:first-child:nth-last-child(7) ~ stream,
stream:first-child:nth-last-child(8),
stream:first-child:nth-last-child(8) ~ stream,
stream:first-child:nth-last-child(9),
stream:first-child:nth-last-child(9) ~ stream
{
  width: 33.33%;
  height: 33.33%;
}

Das folgende CSS basiert auf der horizontalen Darstellung vordefiniertes Layout:

stream {
  float:left;
  margin-top: 60%;
  width: 20%;
  height: 20%;
}
stream.focus {
  position: absolute;
  top: 0;
  left: 0;
  margin-top: 0px;
  height: 80%;
  width: 100%;
}

Das folgende CSS basiert auf der vertikalen Darstellung vordefiniertes Layout:

stream {
  float: left;
  left: 0px;
  clear: left;
  width: 20%;
  height: 20%;
}
stream.focus {
  position: absolute;
  top: 0;
  left: 0;
  margin: 0px;
  left: 20%;
  height: 100%;
  width: 80%;
}

Das folgende CSS basiert auf dem Bild-im-Bild-Verfahren vordefiniertes Layout:

stream.full {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  z-index: 100;
}
stream {
  position: absolute;
  right: 10%;
  top: 10%;
  width: 20%;
  height: 20%;
  z-index: 200;
}

Anmerkung: Die von den vordefinierten Layouts verwendeten CSS können sich ändern.

Navigation

Video-Layouts für komponierte Archive und Live-Streaming-Übertragungen

Vordefinierte Layout-Typen

Beste Passform

Bild-in-Bild

Vertikale Präsentation

Horizontale Präsentation

Zuweisung von Layout-Klassen zu Vonage Video-Streams

Einstellen der anfänglichen Layout-Klassenliste für die Streams eines Kunden

Ändern der Layoutklassenliste für einen Stream

Abrufen der Layout-Klassenliste für einen Stream

Abrufen der Layoutklassenliste für mehrere Streams

Layout-Typen für die Bildschirmfreigabe

Regeln für die Strompriorisierung

Definieren benutzerdefinierter Layouts

Regeln

Selektoren

Eigenschaften

Beispiel-CSS