構成されたアーカイブとライブ・ストリーミング放送用のビデオ・レイアウト

構成されたアーカイブやライブ・ストリーミング放送で使用できる、定義済みのレイアウト・タイプが多数あります。また、CSSを使用してカスタムレイアウトを定義することもできます。

これらのレイアウトオプションは、構成されたアーカイブ（個別のアーカイブではない）とライブストリーミング放送（インタラクティブ放送ではない）に適用されます。

参照 構成されたアーカイブのビデオレイアウトをカスタマイズする

参照 ライブ・ストリーミング放送用のビデオ・レイアウトの設定

ストリームにレイアウトクラスを割り当てて、アーカイブや放送のレイアウトでの表示方法に影響を与えることができます。

定義済みのレイアウト・タイプ

ベスト・フィット、ピクチャー・イン・ピクチャー、バーチカル・プレゼンテーション、ホリゾンタル・プレゼンテーションの4つの定義済みレイアウト・タイプが利用できる。

ベスト・フィット

これはデフォルトの初期レイアウトタイプです。これはタイル状のレイアウトで、動画の数に応じて拡大縮小されます。

列と行の数は、放送のストリーム数によって異なる。

たとえば、1つのセッションに1、2、4、または5つのストリームがある場合のレイアウトを以下に示す：

Vonage video API default layout 1 Vonage video API default layout 2 Vonage video API default layout 4 Vonage video API default layout 5

これらのストリームのレイアウト・クラスはレイアウトに影響しません。リスト内の各位置は、グリッド内の位置に変換されます。

このレイアウトは、最大16ストリーム（グリッド内）をサポートします。

ストリームは、以下の条件に基づいてレイアウトに含まれる。 ストリーム優先ルール.

このレイアウトを選択するには type プロパティ "bestFit".

アーカイブについては 初期レイアウトタイプの指定 そして アーカイブ録画中にレイアウトの種類を動的に変更する.

ピクチャー・イン・ピクチャー

これはピクチャー・イン・ピクチャー・レイアウトで、小さなストリームがフルサイズのストリームの上に表示される。

Vonage video API pip layout

C = コーナー

フルサイズ・ストリームのレイアウト・クラスを "full".参照 ストリームへのレイアウトクラスの割り当て.)

このクラスのない最初のストリームがコーナーポジションを占める。

アーカイブまたはブロードキャストに2つ以上のストリームが存在する場合、最初の2つのストリームのみが出力に表示される。

このレイアウトを選択するには type プロパティ "pip".

アーカイブについては 初期レイアウトタイプの指定 そして アーカイブ録画中にレイアウトの種類を動的に変更する.

縦型プレゼンテーション

これは、出力の右端に1つの大きなストリームがあり、出力の左端に沿っていくつかの小さなストリームがあるレイアウトである。

Vonage video API vertical layout

フォーカス・ストリームのレイアウト・クラスを "focus".参照 ストリームへのレイアウトクラスの割り当て.)フォーカス・クラスのないストリームは左端を占め、スペースを均等に分割する。

横向きのビデオ（640x480、1280x720、1920x1080）の場合、このレイアウトは1つのフォーカスストリームと最大5つの他のストリームをサポートします（1920x1080のビデオの場合は最大7つ）。

縦向きのビデオ（480x640、720x1280、1080x1920）の場合、このレイアウトは1つのフォーカスストリームと最大8つの他のストリーム（1080x1920の場合は10個の他のストリーム）をサポートします。

このレイアウトを選択するには type プロパティ "verticalPresentation":

水平プレゼンテーション

これは、出力の上端に1つの大きなストリームがあり、出力の下端にいくつかの小さなストリームがあるレイアウトである。

Vonage video API vertical layout

このレイアウトにおけるストリームの位置を指定するために使用されるレイアウト・クラスが1つある： focus.参照 ストリームへのレイアウトクラスの割り当て).

このクラスがないストリームは下端を占め、スペースを均等に分割する。

ポジションは以下のように可視化できる：

横向きの動画（640x480、1280x720、1920x1080）の場合、このレイアウトは1つのフォーカスストリームと最大5つの他のストリームをサポートします（1920x1080の動画の場合は最大7つ）。

縦向きのビデオ（480x640、720x1280、1080x1920）の場合、このレイアウトは1つのフォーカスストリームと最大3つの他のストリームをサポートします。

このレイアウトを選択するには type プロパティ "horizontalPresentation":

アーカイブについては 初期レイアウトタイプの指定 そして アーカイブ録画中にレイアウトの種類を動的に変更する.

Vonage Videoストリームへのレイアウトクラスの割り当て

デフォルトのBest Fit以外のレイアウトタイプを使用する場合は、レイアウトタイプに基づいて、使用するVonage Videoストリームのレイアウトクラスを設定する必要があります：

  • ピクチャー・イン・ピクチャー・レイアウトを使用する場合は、1つのストリームで full レイアウトクラス。
  • Horizontal-Presentationレイアウトを使用する場合は、1つのストリームに focus レイアウトクラス。
  • Vertical-Presentationレイアウトを使用する場合は、1つのストリームに focus レイアウトクラス。

クライアントのストリームの初期レイアウト・クラス・リストの設定

クライアントがセッションに接続するためのトークンを作成するとき、クライアントが発行するストリームの初期レイアウトクラスリストを（オプションで）指定することができます。

これを行うには、レイアウト・クラス・リストの初期設定を含むトークンを生成する。

以下の例では、Node SDK を使用しています。

ノード

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

ストリームのレイアウト・クラス・リストを変更する

を呼び出すことで、ストリームのレイアウト・クラス・リストを動的に変更できます。 /session/{sessionId}/stream REST API。

以下のURLにPUTリクエストを行う：

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

Content-Typeを "application/json" を作成し、PUTリクエストのJSONデータのプロパティとしてレイアウトクラスリストを含めます：

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

について id プロパティはストリーム ID です。items 配列に複数の JSON オブジェクトを渡すことで、複数のストリームのレイアウト・クラス・リストを更新できることに注意してください。

無効なlayoutClassList値を指定した場合、リクエストは400レスポンス・コードを返します。値は文字列の配列でなければなりません。

ストリームのレイアウトクラスリストの取得

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

REST APIを呼び出すと、ストリームのレイアウト・クラス・リストを取得できます。 /session/{sessionId}/stream/{streamId}.以下のURLにGETリクエストする：

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

レスポンスにはJSONデータが含まれます。 layoutClassList 配列である：

{
  "id": "8b732909-0a06-46a2-8ea8-074e64d43422",
  "videoType": "camera",
  "name": "",
  "layoutClassList": ["full"]
}
  • について layoutClassList プロパティは、ストリームのレイアウト・クラスの配列です。
  • について id プロパティはストリームIDである。
  • について videoType プロパティには、"camera"、"screen"、または "custom" が設定されます。screen "動画は、パブリッシャの画面共有を動画ソースとして使用します。"custom "動画は、HTML VideoTrack 要素を動画ソースとして使用する Web クライアントによって公開されます。
  • について name プロパティはストリーム名です (クライアントがストリームを公開したときに設定されていた場合)。

無効なストリームIDを指定した場合、リクエストは408エラー応答コードを返す。

を使用して、ストリームのレイアウト・クラス・リストを取得することもできます。 サーバーSDK:

  • ノード getStreamInfo() (を呼ぶ）。 getLayoutClassList() メソッド)
  • PHP getStream() (をチェックする。 layoutClassList プロパティ)

複数ストリームのレイアウト・クラス・リストの取得

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

REST API を呼び出すと、セッション内のすべてのストリームのレイアウト・クラス・リストを取得できます。 /session/{sessionId}/stream.以下のURLにGETリクエストする：

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

レスポンスにはJSONデータが含まれます。 items これは、セッション内のストリームのレイアウト情報を含む配列です：

{
  "count": 2
  "items": [
    {
      "id": "8b732909-0a06-46a2-8ea8-074e64d43422",
      "videoType": "camera",
      "name": "",
      "layoutClassList": ["full"]
    },
    ...
  ]
}
  • について layoutClassList プロパティは、ストリームのレイアウト・クラスの配列です。
  • について id プロパティはストリームIDである。
  • について videoType プロパティには、"camera"、"screen"、または "custom" が設定されます。screen "動画は、パブリッシャの画面共有を動画ソースとして使用します。"camera "動画は、HTML VideoTrack 要素を動画ソースとして使用する Web クライアントによって公開されます。
  • について name プロパティはストリーム名です (クライアントがストリームを公開したときに設定されていた場合)。

画面共有のためのレイアウトタイプ

セッション内に画面共有ストリームがライブで存在する場合に使用するレイアウト・タイプを指定できます。

構成されたアーカイブの場合は screenshareType オプション 初期レイアウトタイプの指定 そして アーカイブ録画中にレイアウトの種類を動的に変更する.

この画面共有レイアウトのタイプ (screenshareType) を以下のレイアウト・タイプのいずれかに変更する：

  • bestFit - これは ベストフィット レイアウトに含まれます。ただし、画面共有ストリームのみがレイアウトに含まれる。
  • horizontalPresentation - これは 水平プレゼンテーション のレイアウトになります。ただし、画面共有ストリーム（ストリームに focus クラスが適用されている場合）は、レイアウトのフォーカス位置を占めます。
  • verticalPresentation - これは 垂直プレゼンテーション のレイアウトになります。ただし、画面共有ストリーム（ストリームに focus クラスが適用されている場合）は、レイアウトのフォーカス位置を占めます。
  • pip - これは ピクチャー・イン・ピクチャー のレイアウトになります。ただし、画面共有ストリーム（ストリームに full クラスが適用されている場合）は、レイアウトの全ポジションを占めます。レイアウト内の小さい方の動画は ストリーム優先ルール.たとえば、画面共有ストリームをパブリッシュするクライアントが、カメラのビデオソースを持つストリームもパブリッシュしている場合、そのビデオは、（レイアウトクラスが割り当てられているなど、他のストリームがより高い優先順位を持たない限り）小さい方のビデオの位置を占める。

セッション内にライブの画面共有ストリームがある場合、アーカイブまたはブロードキャストでは、指定した画面共有レイアウトのタイプが使用されます。セッションに画面共有ビデオがない場合、アーカイブまたはブロードキャストでは、最適なレイアウトが使用されます。(を指定した場合）。 screenshareTypeを設定する必要があります。 layout type への bestFit.

ストリームの優先順位付けルール

コンポジット・アーカイブとライブ・ストリーミング放送は、一度に最大16のビデオストリームを含むことができる。

レイアウト・コンポーザーは、以下のルールを使用して、どのビデオストリームをアーカイブまたは放送に含めるかの優先順位を決定し、ストリームをどのように順序付け、仮想DOMに追加するかを決定する。

ストリームは2つの階層に分類される：

ストリームの優先順位が決定される：

  • 上位のストリーム（レイアウトクラスが割り当てられているストリーム）は、この順序で優先される：
    • 画面共有ストリーム
    • 画面共有ストリームを公開しているクライアントによって公開される、画面共有以外のストリーム
    • その他のすべてのストリーム（アーカイブまたは放送に含めるストリームのリストに追加された時間順）
  • 下層のストリーム（以下のようなストリーム 違う レイアウトクラスが割り当てられている）は、この順番で次に優先される：
    • 画面共有ストリーム
    • 画面共有ストリームを公開しているクライアントによって公開される、画面共有以外のストリーム
    • 上位ストリームも発行しているクライアントによって発行されるストリーム（割り当てられたストリーム、レイアウト・クラス）
    • その他のすべてのストリーム（アーカイブまたは放送に含めるストリームのリストに追加された時間順）

構成されたアーカイブや放送に含まれるビデオストリームは、その優先順位に基づいて選択される。

ストリームは常にこの規則に従って順序付けされる。2つ以上のストリームがある限り、この順序に基づいて仮想DOMに追加される。

クライアントが動画配信を停止した場合、そのクライアントは構成動画から削除される。クライアントがストリーミングを再開したとき、（優先順位ルールに基 づいて）他のクライアントよりも優先順位が高ければ、再び合成映像に追加される。

コンポーズド・ビデオには、最大16のクライアント・ビデオ・ストリームを含めることができる。

構成されたアーカイブまたはブロードキャストが、含まれるストリームの最大容量に達し、含まれるストリームを公開しているクライアントが切断すると、新しいストリーム用にスペースが解放される。

次に優先順位の高いビデオストリームが含まれ、レンダリングされる。

注釈

  • これらのストリームの優先順位付けルールは、次のいずれかに関係なく適用される。 streamMode アーカイブまたはブロードキャストの "auto" または "manual".

参照 構成されたアーカイブに含まれるストリームの選択 そして ライブ・ストリーミング放送に含めるストリームの選択

  • 構成されたアーカイブとライブ・ストリーミング放送には、最大50のコンテンツが含まれる。 オーディオ ストリーム。オーディオを含む最初の50の公開ストリームは、アーカイブまたは放送用の出力オーディオにミックスされる。

カスタムレイアウトの定義

に加えて 定義済みレイアウトカスタムレイアウトを使用するには、レイアウトのタイププロパティを "custom "に設定し、追加のプロパティを設定します。カスタムレイアウトを使用するには、レイアウトのタイププロパティを「カスタム」に設定し、追加のプロパティを設定します、 stylesheetこれはCSSに設定されている：

で使用されるCSS。 stylesheet レイアウト・リソースのプロパティは仮想DOMに適用されます：

放送のためだ：

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

アーカイブのために：

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

注： デフォルトでは、合成されたアーカイブまたはブロードキャストの解像度は640x480ピクセル（SDランドスケープ）です。480x640（SDポートレート）、1280x720（HDランドスケープ）、720x1280（HDポートレート）、1920x1080（FHDランドスケープ）、または1080x1920（FHDポートレート）の解像度を使用するように、コンポジションアーカイブまたはブロードキャストを設定することもできます。

を呼び出すと アーカイブ開始 または 放送開始 メソッドを使用します。640x480ピクセルおよび480x640ピクセル（SD）アーカイブのアスペクト比は4:3および3:4です。1280x720ピクセル、720x1280ピクセル、1920x1080ピクセル、および1080x1920ピクセル（HDおよびFHD）のアーカイブのアスペクト比は16:9および9:16です。

カスタムレイアウトのCSSを定義する際には、これらの縦横比を念頭に置いてください。

ルール

以下のデフォルトルールが <archive> 要素である：

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

同様に、以下のデフォルトルールが <broadcast> 要素である：

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

デフォルトの寸法は 640x480 ピクセル（SDランドスケープ）。また、構成されたアーカイブや放送を 480x640 (SDポートレート）、1280x720（HDランドスケープ）、720x1280（HDポートレート）、 1920x1080 (FHDランドスケープ）、または 1080x1920 (FHDポートレート）解像度を呼び出します。 アーカイブ開始 または 放送開始 メソッドを使用する。

要素には以下のデフォルトルールが適用されます：

stream {
  display: block;
  margin: 0;
}

注意：コンテナの解像度は固定されており、CSSで上書きすることはできません。

セレクタ

以下のCSSセレクタがサポートされています：

  • 型セレクタは、ストリーム要素（stream）のみに対応しています。
  • クラスセレクタ .instructor)がサポートされており(好ましい)、ストリームのグループまたは個々のストリームを選択するために使用することができる。
  • 隣接兄弟および一般兄弟結合子がサポートされている (sibling-one + sibling-two, sibling-one ~ sibling-two).

以下の擬似クラス・セレクタがサポートされています：

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

以下のCSSセレクタはサポートされていません：

  • ユニバーサルセレクタはサポートされていません (*).
  • 子孫セレクタはサポートされていません (parent ancestor, parent * ancestor).
  • 子セレクタはサポートされていません (parent > child).
  • IDセレクタはサポートされていない（例えば、 #myidentifier).
  • 属性セレクタはサポートされていません（例えば、 [data-title*="my-title"]).
  • 疑似要素セレクタはサポートされていません。

プロパティ

以下の表は、サポートされている CSS プロパティと、その可能な値について説明しています：

名称 価値
width, height 正の数 ( px/ %)
min-width, min-height 正の数 ( px/ %)
max-width, max-height] 正の数 ( px/ %)
left, right, top, bottom ナンバー px/ %)
margin, margin-left, margin-right, margin-top, margin-bottom ナンバー px/ %)
z-index 正の数
position 'relative', 'absolute'
display 'inline', 'block', 'inline-block'
float 'none', 'left', 'right'
object-fit 'contain' (デフォルト）、 'cover'
overflow 'hidden'
clear 'none', 'left', 'right', 'both', 'initial', 'inherit'

サンプルCSS

次の CSS は、クラス名を持つ 2 つのストリームを配置します。 main そして 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;
}

以下のCSSはベストフィットに基づいている。 定義済みレイアウト:

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

以下のCSSは、水平表示に基づいています。 定義済みレイアウト:

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

以下のCSSは、垂直方向のプレゼンテーションに基づいています。 定義済みレイアウト:

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

以下のCSSはピクチャー・イン・ピクチャーに基づいている。 定義済みレイアウト:

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

注： 定義済みのレイアウトで使用されているCSSは変更される可能性があります。