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

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

これらのレイアウト設定は、複合アーカイブ（個別のアーカイブではない）およびライブストリーミング放送（インタラクティブ放送ではない）に適用されます：

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

このページには以下のセクションがあります：

定義済みのレイアウト・タイプ
OpenTokストリームへのレイアウトクラスの割り当て
画面共有のためのレイアウトタイプ
ストリームの優先順位付けルール
カスタムレイアウトの定義

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

あらかじめ定義されたレイアウトタイプは、ベストフィット、ピクチャー・イン・ピクチャー、縦向き表示、横向き表示の4種類があります。

ベスト・フィット

これは、デフォルトの初期レイアウトタイプです。

これはタイル状のレイアウトで、動画の数に応じてサイズが調整されます。列と行の数は、放送に含まれる OpenTok ストリームの数によって異なります。例えば、以下は、セッション内のストリーム数が 1、2、4、または 5 の場合のレイアウトを示しています：

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

このレイアウトでは、最大16のOpenTokストリーム（グリッド形式）に対応しています。

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

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

アーカイブについては、以下を参照してください。初期レイアウトタイプの指定そしてアーカイブ録画中にレイアウトの種類を動的に変更する.
放送については、以下を参照してください。初期レイアウトタイプの指定そしてライブ・ストリーミング放送中にレイアウトの種類を動的に変更する.

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

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

C = コーナー

フルサイズ・ストリームのレイアウト・クラスを "full". （参照： OpenTokストリームへのレイアウトクラスの割り当て.) このクラスを持たない最初のストリームがコーナーの位置を占めます。アーカイブや放送に 3つ以上のストリームが存在する場合、出力には最初の2つのストリームのみが表示されます。

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

アーカイブについては、以下を参照してください。初期レイアウトタイプの指定そしてアーカイブ録画中にレイアウトの種類を動的に変更する.
放送については、以下を参照してください。初期レイアウトタイプの指定そしてライブ・ストリーミング放送中にレイアウトの種類を動的に変更する.

縦型プレゼンテーション

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

フォーカスストリームのレイアウトクラスを "focus". （参照： OpenTokストリームへのレイアウトクラスの割り当て.) 「focus」クラスを持たないストリームは左端を占め、スペースを均等に分割します。

横向きの動画（640x480、1280x720、1920x1080）の場合、このレイアウトは1つのフォーカスストリームおよび最大5つのその他のストリーム（1920x1080の動画の場合は最大7つ）に対応しています。縦向きの動画（480x640、720x1280、および1080x1920）の場合、このレイアウトは1つのフォーカスストリームと最大8つのその他のストリーム（1080x1920の場合は最大10つのその他のストリーム）をサポートします。

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

アーカイブについては、以下を参照してください。初期レイアウトタイプの指定そしてアーカイブ録画中にレイアウトの種類を動的に変更する.
放送については、以下を参照してください。初期レイアウトタイプの指定そしてライブ・ストリーミング放送中にレイアウトの種類を動的に変更する.

水平プレゼンテーション

これは、出力画面の上端に1つの大きなストリームが、下端に沿っていくつかの小さなストリームが配置されたレイアウトです。

このレイアウトにおけるストリームの位置を指定するために使用されるレイアウト・クラスが1つある： focus. （参照： OpenTokストリームへのレイアウトクラスの割り当て) このクラスが指定されていないストリームは、下端を占め、スペースを均等に分割します。その位置関係は、次のようにイメージできます：

横向きの動画（640x480、1280x720、および1920x1080）の場合、このレイアウトは1つのフォーカスストリームと、最大5つのその他のストリーム（1920x1080の動画の場合は最大7つ）に対応しています。縦向きの動画（480x640、720x1280、および1080x1920）の場合、このレイアウトは1つのフォーカスストリームと、最大3つのその他のストリームをサポートします。

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

アーカイブについては、以下を参照してください。初期レイアウトタイプの指定そしてアーカイブ録画中にレイアウトの種類を動的に変更する.
放送については、以下を参照してください。初期レイアウトタイプの指定そしてライブ・ストリーミング放送中にレイアウトの種類を動的に変更する.

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

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

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

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

クライアントが OpenTok セッションに接続するためのトークンを作成する際、クライアントが配信するストリームの初期レイアウトクラスリストを（オプションで）指定することができます。これを行うには、初期レイアウトクラスリストの設定を含むトークンを生成してください。以下の例では、 OpenTokのJava、Node、PHP、Python、Ruby、および.NET SDKを使用しています。

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());

ノード

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')
));

パイソン

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

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

OpenTok を呼び出すことで、ストリームのレイアウトクラス一覧を動的に変更することができます。 /session/{sessionId}/stream REST API. 以下のURLに対してPUTリクエストを送信してください：

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

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

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

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

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

また、OpenTok サーバー SDK を使用して、ストリームのレイアウトクラス一覧を変更することもできます：

Java — OpenTok.setStreamLayouts()
ノード OpenTok.setStreamClassLists()
PHP OpenTok->updateStream()
Python — opentok.set_stream_class_lists()
Ruby — Streams.layout()
.NET — OpenTok.SetStreamClassLists()

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

OpenTok を呼び出すことで、ストリームのレイアウトクラス一覧を取得できます。 /session/{sessionId}/stream/{streamId} REST API. 以下のURLに対してGETリクエストを送信してください：

https://api.opentok.com/v2/project/{apiKey}/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エラー応答コードを返す。

また、OpenTokサーバーSDKを使用すると、ストリームのレイアウトクラス一覧を取得することもできます：

Java — OpenTok.listStreams() (を呼ぶ）。 getLayoutClassList() 各Streamオブジェクトのメソッド）
ノード OpenTok.getStream() (に電話して getLayoutClassList() メソッド)
PHP OpenTok->getStream() (以下を確認してください layoutClassList プロパティ)
Python — opentok.get_stream() (をチェックする。 layoutClassList プロパティ)
Ruby — opentok.streams.find() (以下を確認してください layoutClassList プロパティ)
.NET — OpenTok.GetStream() (以下を確認してください LayoutClassList プロパティ)

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

セッション内のすべてのストリームに対するレイアウトクラスの一覧を取得するには、 /session/{sessionId}/stream REST API. 以下のURLに対してGETリクエストを送信してください：

https://api.opentok.com/v2/project/{apiKey}/session/{sessionId}/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 オプション初期のレイアウトタイプを指定するそしていつライブ配信中にレイアウトの種類を動的に変更する.

この画面共有レイアウトのタイプ (screenshareType) を、以下のレイアウトタイプのいずれかに設定します：

bestFit - これはベストフィットレイアウト。ただし、レイアウトに含まれるのは画面共有のストリームのみです。
horizontalPresentation - これは水平プレゼンテーションレイアウト。ただし、画面共有のストリーム（ focus （適用されたクラス）は、レイアウト内のフォーカス位置を占めることになります。
verticalPresentation - これは垂直プレゼンテーションレイアウト。ただし、画面共有のストリーム（ focus （適用されたクラス）は、レイアウト内のフォーカス位置を占めることになります。
pip - これはピクチャー・イン・ピクチャーレイアウト。ただし、画面共有のストリーム（ full （クラスが適用されている場合）レイアウト内の位置全体を占めます。レイアウト内のより小さい動画は、以下に基づいて決定されます。ストリーム優先ルール. たとえば、画面共有ストリームを配信しているクライアントが、カメラ映像をソースとするストリームも配信している場合、その映像は小さい方の動画枠に表示されます（ただし、別のストリームが（レイアウトクラスが割り当てられているなどして）より高い優先順位を持っている場合は除きます）。

セッションで画面共有のライブ配信が行われている場合、アーカイブや配信では、指定した画面共有レイアウトが使用されます。セッションに画面共有の映像がない場合、アーカイブや配信では最適なレイアウトが使用されます。（指定した場合は、 screenshareTypeを設定する必要があります。 layout type への bestFit.

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

アーカイブおよびライブストリーミング放送には、一度に最大16のビデオストリームを含めることができます。レイアウトコンポーザーは、アーカイブや放送にどのビデオストリームを含めるかの優先順位を決定し、また、ストリームの順序を決定して仮想DOMに追加するために、以下のルールを使用します。

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

上流の渓流 - 過去に遡上した渓流レイアウトが割り当てられたクラス
下層ストリーム - 関連するレイアウト・クラスを持たないストリーム

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

上位ストリーム（レイアウトクラスが割り当てられているストリーム）は、以下の順序で優先されます：
1. 画面共有ストリーム
2. 画面共有ストリームを配信しているクライアントによって公開される、画面共有を行わないストリーム（そのクライアントは画面共有ストリームも配信している）
3. その他のすべてのストリーム（アーカイブまたは放送に含めるストリームのリストに追加された時刻順）
下層のストリーム（以下のようなストリーム違う（レイアウトクラスが割り当てられているもの）は、その後、以下の順序で優先順位が付けられます：
1. 画面共有ストリーム
2. 画面共有ストリームを配信しているクライアントによって公開される、画面共有を行わないストリーム（そのクライアントは画面共有ストリームも配信している）
3. 上位階層のストリーム（レイアウトクラスが割り当てられたストリーム）も公開しているクライアントによって公開されるストリーム (レイアウトクラスが割り当てられたストリーム)
4. その他のすべてのストリーム（アーカイブまたは放送に含めるストリームのリストに追加された時刻順）

構成されたアーカイブや放送に含まれる動画ストリームは、優先順位に基づいて選択されます。ストリームは常にこれらのルールに従って順序付けられます。 2つ以上のストリームが存在する限り、この順序に基づいて仮想DOMに追加されます。

クライアントが動画のストリーミングを停止すると、そのストリームは合成動画から削除されます。動画のストリーミングが再開されると、そのクライアントが（これらの優先順位ルールに基づき）他のクライアントよりも優先順位が高い場合、合成動画に再び追加されます。合成動画には、最大16のクライアント動画ストリームを含めることができます。

構成済みのアーカイブまたは放送が、含まれるストリームの最大容量に達した場合、含まれるストリームを配信していたクライアントが切断されると、新しいストリーム用の空き容量が確保されます。優先順位が次に高いビデオストリームが組み込まれ、レンダリングされます。

注釈

これらのストリームの優先順位付けルールは、次のいずれかに関係なく適用される。 streamMode アーカイブまたはブロードキャストの "auto" または "manual".参照構成されたアーカイブに含まれるストリームの選択そしてライブ・ストリーミング放送に含めるストリームの選択
構成されたアーカイブとライブ・ストリーミング放送には、最大50のコンテンツが含まれる。 オーディオ ストリーム。オーディオを含む最初の50の公開ストリームは、アーカイブまたは放送用の出力オーディオにミックスされる。

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

に加えて定義済みレイアウト, CSS を使って、アーカイブ動画やライブ配信の独自のレイアウトを定義することができます。

カスタムレイアウトを使用するには、レイアウトの type プロパティを「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>

注：デフォルトでは、合成アーカイブまたは放送の解像度は 640×480 ピクセル（SD 横向き）です。また、合成アーカイブや放送の解像度を、480×640（SD縦向き）、1280×720（HD横向き）、720×1280（HD縦向き）、1920×1080 （FHD 横向き）、または 1080×1920（FHD 縦向き）の解像度で表示するように設定することも可能です。アーカイブ開始または放送開始 OpenTok REST APIのメソッド。640×480ピクセルおよび480×640ピクセル（SD）のアーカイブは、アスペクト比が4:3および3:4です。1280×720ピクセル、 720×1280ピクセル、1920×1080ピクセル、および1080×1920ピクセル（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;
}

デフォルトのサイズは 640×480 ピクセル（SD 横向き）です。また、編集済みアーカイブや放送では、 480×640（SD縦向き）、1280×720（HD横向き）、720×1280（HD縦向き）、1920×1080 （FHD 横向き）、または 1080×1920（FHD 縦向き）の解像度で設定することも可能です。アーカイブ開始または放送開始 OpenTok REST API のメソッド。

以下のデフォルトルールが適用されます <stream> 要素：

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は変更される可能性があります。