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 zusammengesetzte Archive (nicht für einzelne Archive) und Live-Streaming-Übertragungen (nicht für interaktive Übertragungen):

Sie können OpenTok-Streams Layoutklassen zuweisen, um zu beeinflussen, wie sie im Layout eines Archivs oder einer Übertragung angezeigt werden.

Diese Seite enthält die folgenden Abschnitte:

Vordefinierte Layout-Typen

Es stehen vier vordefinierte Layouttypen zur Verfügung: „Best Fit“, „Bild-in-Bild“, vertikale Darstellung und horizontale Darstellung.

Beste Passform

Dies ist der standardmäßige anfängliche Layouttyp.

Es handelt sich um ein Kachel-Layout, das sich je nach Anzahl der Videos anpasst. Die Anzahl der Spalten und Zeilen variiert je nach Anzahl der OpenTok-Streams in der Übertragung. Das folgende Beispiel veranschaulicht das Layout bei 1, 2, 4 oder 5 Streams in einer Sitzung:

Layout-Klassen für diese 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 OpenTok-Streams (in einem Raster).

Ströme werden in das Layout aufgenommen auf der Grundlage von Priorisierung von Streams Regeln.

Um dieses Layout auszuwählen, stellen Sie die type Eigenschaft zu "bestFit":

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 Zuordnung von Layout-Klassen zu OpenTok-Streams.) Der erste Stream ohne diese Klasse nimmt die Eckposition ein. Sind mehr als zwei Streams im Archiv oder in der Übertragung vorhanden, werden in der Ausgabe nur die ersten beiden Streams angezeigt.

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

Vertikale Präsentation

Hierbei handelt es sich um 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 Layoutklasse des Fokus-Streams auf "focus". (Siehe Zuordnung von Layout-Klassen zu OpenTok-Streams.) Die Streams ohne „Focus“-Klasse nehmen den linken Rand ein und teilen den Raum gleichmäßig auf.

Für Videos im Querformat (640×480, 1280×720, 1920×1080) unterstützt dieses Layout 1 Fokus-Stream und bis zu 5 weitere Streams (bzw. bis zu 7 bei Videos mit einer Auflösung von 1920×1080). Für Videos im Hochformat (480×640, 720×1280 und 1080×1920) unterstützt dieses Layout 1 Fokus-Stream und bis zu 8 weitere Streams (bzw. 10 weitere Streams bei 1080×1920).

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

Horizontale Präsentation

Hierbei handelt es sich um 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 Zuordnung von Layout-Klassen zu OpenTok-Streams) Die Streams ohne diese Klasse nehmen den unteren Rand ein und teilen den Platz gleichmäßig auf. Die Positionen lassen sich wie folgt veranschaulichen:

Bei Videos im Querformat (640×480, 1280×720 und 1920×1080) unterstützt dieses Layout 1 Fokus-Stream und bis zu 5 weitere Streams (bzw. bis zu 7 bei Videos mit einer Auflösung von 1920×1080). Für Videos im Hochformat (480 × 640, 720 × 1280 und 1080 × 1920) unterstützt dieses Layout 1 Fokus-Stream und bis zu 3 weitere Streams.

Um dieses Layout auszuwählen, stellen Sie die type Eigenschaft zu "horizontalPresentation":

Zuordnung von Layout-Klassen zu OpenTok-Streams

Wenn Sie einen anderen Layouttyp als den Standardwert „Best Fit“ verwenden, müssen Sie die Layoutklasse für die zu verwendenden OpenTok-Streams entsprechend dem Layouttyp 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 erstellen, mit dem sich ein Client mit der OpenTok-Sitzung verbinden kann, können Sie (optional) die Liste der anfänglichen Layout-Klassen für die vom Client veröffentlichten Streams festlegen. Generieren Sie dazu ein Token, das die Einstellung für die Liste der anfänglichen Layout-Klassen enthält. In den folgenden Beispielen werden die OpenTok-SDKs für Java, Node, PHP, Python, Ruby und .NET verwendet.

Java:

import com.opentok.OpenTok;
import com.opentok.TokenOptions;

OpenTok opentok = new OpenTok(apiKey, apiSecret)
List<String> classList = List.of("focus", "bar", "inactive");
String token = session.generateToken(new TokenOptions.Builder()
  .initialLayoutClassList(classList)
  .build());

Knotenpunkt:

var OpenTok = require('opentok'),
    opentok = new OpenTok(apiKey, apiSecret);

opentok.createSession({mediaMode:"routed"}, function(err, session) {
  if (err) return console.log(err);

  token = session.generateToken({
    expireTime : (new Date().getTime() / 1000)+(7 * 24 * 60 * 60), // in one week
    data :       'name=Johnny',
    initialLayoutClassList : ['focus', 'inactive']
  });
});

PHP:

use OpenTok\Session;
use OpenTok\Role;

$token = $opentok->generateToken($sessionId);

$token = $session->generateToken(array(
    'initialLayoutClassList' => array('focus')
));

Python:

from opentok import OpenTok
from opentok import MediaModes
from opentok import Roles

opentok = OpenTok(api_key, api_secret)
session = opentok.create_session(media_mode=MediaModes.routed)
token = session.generate_token(expire_time=int(time.time()) + 10,
                               data=u'name=Johnny'
                               initial_layout_class_list=[u'focus'])

Ruby:

opentok = OpenTok::OpenTok.new api_key, api_secret

session = opentok.create_session :media_mode => :routed
token = session.generate_token({
    :role                      => :moderator
    :expire_time               => Time.now.to_i+(7 * 24 * 60 * 60) # in one week
    :data                      => 'name=Johnny',
    :initial_layout_class_list => ['focus', 'inactive']
});

.NET:

List< string >  initialLayoutClassList = new List<string>()
{
    "focus"
};
string token = session.GenerateToken(initialLayoutClassList: initialLayoutClassList);

Ändern der Layoutklassenliste für einen Stream

Sie können die Liste der Layout-Klassen für einen Stream dynamisch ändern, indem Sie die OpenTok-Funktion aufrufen. /session/{sessionId}/stream REST-API. Senden Sie eine PUT-Anfrage an die folgende URL:

https://api.opentok.com/v2/project/{apiKey}/session/{sessionId}/stream

Setzen Sie den Content-Type auf "application/json" und fügen Sie die Liste der Layout-Klassen als Eigenschaft der JSON-Daten in der PUT-Anfrage ein:

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

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

Die Anfrage gibt den Statuscode 400 zurück, wenn Sie einen ungültigen Wert für „layoutClassList“ angeben. Der Wert muss ein Array von Zeichenfolgen sein.

Sie können die Liste der Layout-Klassen für einen Stream auch mithilfe der OpenTok-Server-SDKs ändern:

Abrufen der Layout-Klassenliste für einen Stream

Die Liste der Layout-Klassen für einen Stream können Sie abrufen, indem Sie die OpenTok-Funktion /session/{sessionId}/stream/{streamId} REST-API. Sende eine GET-Anfrage an die folgende URL:

https://api.opentok.com/v2/project/{apiKey}/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 Die Eigenschaft ist auf „camera“, „screen“ oder „custom“ gesetzt. Ein „screen“-Video nutzt die Bildschirmfreigabe auf dem Publisher als Videoquelle; ein „custom“-Video wird von einem Web-Client unter Verwendung eines HTML-VideoTrack-Elements als Videoquelle veröffentlicht.
  • 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 Layout-Klassen für einen Stream auch mithilfe der OpenTok-Server-SDKs abrufen:

Abrufen der Layoutklassenliste für mehrere Streams

Sie können die Liste der Layout-Klassen für alle Streams einer Sitzung abrufen, indem Sie die Funktion /session/{sessionId}/stream REST-API. Sende eine GET-Anfrage an die folgende URL:

https://api.opentok.com/v2/project/{apiKey}/session/{sessionId}/stream/

Die Antwort enthält JSON-Daten, zu denen auch ein items Eigenschaft, bei der es sich um ein Array handelt, das Layout-Informationen für Streams in der Sitzung enthält:

{
  "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 Die Eigenschaft ist auf „camera“, „screen“ oder „custom“ gesetzt. Ein „screen“-Video nutzt die Bildschirmfreigabe auf dem Publisher als Videoquelle; ein „camera“-Video wird von einem Web-Client unter Verwendung eines HTML-VideoTrack-Elements als Videoquelle veröffentlicht.
  • 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 festlegen, der verwendet werden soll, wenn in der Sitzung ein Live-Stream zur Bildschirmfreigabe vorhanden ist.

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

  • bestFit - Dabei wird die beste Passform Layout. Allerdings sind in diesem Layout nur Streams mit Bildschirmfreigabe enthalten.

  • horizontalPresentation - Dabei wird die horizontale Darstellung Layout. Der Bildschirmfreigabe-Stream (kein Stream mit einem focus (Klasse „applied“ zugewiesen) nimmt die Fokusposition im Layout ein.

  • verticalPresentation - Dabei wird die vertikale Darstellung Layout. Der Bildschirmfreigabe-Stream (kein Stream mit einem focus (Klasse „applied“ zugewiesen) nimmt die Fokusposition im Layout ein.

  • pip - Dabei wird die Bild-in-Bild Layout. Der Bildschirmfreigabe-Stream (kein Stream mit einem full (Klasse „applied“ zugewiesen) nimmt die gesamte Position im Layout ein. Das kleinere Video im Layout wird anhand folgender Kriterien bestimmt: Strompriorisierungsregeln. Wenn beispielsweise der Client, der den Bildschirmfreigabe-Stream veröffentlicht, gleichzeitig 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, beispielsweise weil ihm eine Layoutklasse zugewiesen wurde).

Wenn in der Sitzung ein Live-Stream der Bildschirmfreigabe läuft, wird für das Archiv oder die Übertragung der von Ihnen festgelegte Layouttyp für die Bildschirmfreigabe verwendet. Wenn in der Sitzung kein Video der Bildschirmfreigabe vorhanden ist, wird für das Archiv oder die Übertragung das am besten geeignete Layout verwendet. (Wenn Sie einen screenshareTypemüssen Sie die wichtigsten layout type zu bestFit.

Regeln für die Strompriorisierung

Archivaufnahmen und Live-Streams können jeweils bis zu 16 Videostreams umfassen. Der Layout-Composer wendet die folgenden Regeln an, um die Priorität der Videostreams festzulegen, die in die Archivaufnahme oder den Live-Stream aufgenommen werden, und um zu bestimmen, wie die Streams angeordnet und dem virtuellen DOM hinzugefügt werden.

Streams werden in zwei Kategorien eingeteilt:

  • Flüsse des oberen Bereichs - Flüsse, die bereits ein Layout zugewiesen Klasse

  • 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 folgender Reihenfolge priorisiert:

    1. Bildschirmfreigabe-Streams
    2. Streams ohne Bildschirmfreigabe, die von Clients veröffentlicht werden, die gleichzeitig auch Streams mit Bildschirmfreigabe veröffentlichen
    3. Alle anderen Streams (sortiert nach dem Zeitpunkt, zu dem sie in die Liste der Streams aufgenommen wurden, die in das Archiv aufgenommen oder ausgestrahlt werden sollen)

  • Ströme der unteren Ebene (Ströme, die nicht (denen Layout-Klassen zugewiesen wurden) werden anschließend in folgender Reihenfolge priorisiert:

    1. Bildschirmfreigabe-Streams
    2. Streams ohne Bildschirmfreigabe, die von Clients veröffentlicht werden, die gleichzeitig auch Streams mit Bildschirmfreigabe veröffentlichen
    3. Streams, die von Clients veröffentlicht werden, die auch übergeordnete Streams veröffentlichen (Streams, denen Layoutklassen zugewiesen wurden)
    4. Alle anderen Streams (sortiert nach dem Zeitpunkt, zu dem sie in die Liste der Streams aufgenommen wurden, die in das Archiv aufgenommen oder ausgestrahlt werden sollen)

Die in das zusammengestellte Archiv oder die Sendung aufgenommenen Videostreams werden anhand ihrer Priorität ausgewählt. Die Streams werden stets nach diesen Regeln geordnet. Solange zwei oder mehr Streams vorhanden sind, werden sie in dieser Reihenfolge in das virtuelle DOM eingefügt.

Wenn ein Client das Streamen von Videos beendet, wird er aus dem zusammengesetzten Video entfernt. Wenn er das Streamen von Videos wieder aufnimmt, wird er wieder zum zusammengesetzten Video hinzugefügt, sofern er (basierend auf diesen Priorisierungsregeln) eine höhere Priorität als andere Clients hat. Zusammengesetzte Videos können bis zu 16 Client-Videostreams enthalten.

Wenn ein zusammengestelltes Archiv oder eine Sendung die maximale Kapazität für eingebundene Streams erreicht und ein Client, der einen eingebundenen Stream veröffentlicht, die Verbindung trennt, wird Speicherplatz für einen neuen Stream freigegeben. Der Videostream mit der nächsthöheren Priorität wird eingebunden und wiedergegeben.

Anmerkungen:

Definieren benutzerdefinierter Layouts

Zusätzlich zu den vordefinierte Layouts, können Sie mithilfe von CSS ein eigenes, individuelles Layout für zusammengesetzte Archive und Live-Streaming-Übertragungen festlegen.

Um ein benutzerdefiniertes Layout zu verwenden, setzen Sie die Eigenschaft „type“ für das Layout auf „custom“ und legen Sie eine zusätzliche Eigenschaft fest, stylesheetdie auf den CSS eingestellt ist:

CSS verwendet in der stylesheet Die Eigenschaft der Layout-Ressource gilt für ein virtuelles DOM, das im folgenden Format beschrieben werden kann:

  • Für eine Sendung:

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

  • Für ein Archiv:

    <archive class="container">
  <stream class="{layoutClassList}" />
  <stream class="{layoutClassList}" />
  <stream class="{layoutClassList}" />
  ...
</archive>

Anmerkung: Standardmäßig beträgt die Auflösung des zusammengestellten Archivs oder der Sendung 640 × 480 Pixel (SD im Querformat). Sie können ein zusammengesetztes Archiv oder eine Sendung auch so einstellen, dass eine Auflösung von 480 x 640 (SD im Hochformat), 1280 x 720 (HD im Querformat), 720 x 1280 (HD im Hochformat), 1920 x 1080 (FHD im Querformat) oder 1080 x 1920 (FHD im Hochformat) einzustellen, wenn Sie die Archiv starten oder die Startsendung Methode der OpenTok-REST-API. Archive mit einer Auflösung von 640 x 480 Pixel und 480 x 640 Pixel (SD) weisen die Seitenverhältnisse 4:3 und 3:4 auf. Archive mit einer Auflösung von 1280 x 720 Pixel, 720 x 1280 Pixel, 1920 x 1080 Pixel und 1080 x 1920 Pixel (HD und FHD) weisen die Seitenverhältnisse 16:9 und 9:16 auf. Beachten 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 betragen 640 x 480 Pixel (SD im Querformat). Sie können ein zusammengestelltes Archiv oder eine Sendung auch so einstellen, dass eine Auflösung von 480 × 640 (SD im Hochformat), 1280 × 720 (HD im Querformat), 720 × 1280 (HD im Hochformat), 1920 × 1080 (FHD Querformat), oder 1080×1920 (FHD Hochformat) festlegen, wenn Sie die Archiv starten oder Startsendung Methode der OpenTok-REST-API.

Die folgenden Standardregeln gelten für <stream> Elemente:

stream {
  display: block;
  margin: 0;
}

Anmerkung: Die Container-Auflösung ist fest vorgegeben 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.

s