HLS/RMTPブロードキャストでのダイナミックレイアウトの使用

Video API を使用すると、マルチパーティのビデオセッションを持つアプリケーションを構築する際に、ユーザーインターフェイスを完全に制御することができますが、これらのセッションを HLS および/または RTMP ストリームでブロードキャストする必要がある場合、どのようなオプションが利用できるでしょうか？

この投稿では、すぐに使用できる組み込みレイアウト、独自のカスタムレイアウトの作成方法、レイアウトとストリームスタイルをその場で変更する方法について説明します。次に、Vonage Experience Composerを使用して、アプリケーションのUIとともにレイアウトをキャプチャする方法について説明します。

試してみたいですか？ブロードキャスト機能を使ったアプリケーションの例は GitHub.Herokuにデプロイして試すこともできます。

内蔵レイアウト・タイプ

放送に最適なレイアウトを選ぶには、考慮すべき要素がいくつかあります。誰かが話しているのか？誰かが画面を共有しているか？会話はパネルディスカッションですか？

幸いなことに、Vonage Video APIは、視聴者に最適な体験を提供するために、あらかじめ定義されたレイアウトをいくつか提供しています。

デフォルトでは、ブロードキャストは bestFitレイアウトが使われます (下図)。このレイアウトは参加者の数に応じて変化し、すべてのパブリッシャーに等しい画面領域を提供します。

その他のオプションには、ピクチャー・イン・ピクチャー(pip)、垂直プレゼンテーション(verticalPresentation)、水平プレゼンテーション(horizontalPresentation).

2021年5月更新：新しい縦型レイアウトが追加され、モバイル機器に最適な縦型SDおよびHD解像度での録画や放送が可能になりました：

新しい画面共有レイアウトの種類

新しいレイアウトタイプが2021年5月に導入された：

• ベストフィット

• 水平プレゼンテーション

• 垂直プレゼンテーション

• ピップ

初期化とレイアウト変更

放送開始時に初期レイアウトを指定することができます。そのためには layoutプロパティをリクエストボディに追加します。 typeプロパティをリクエストボディに追加します。この typeプロパティは、使用したい定義済みのレイアウトに対応する必要があります。

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

ライブ・ストリーミング放送中にレイアウトを変更するには、OpenTokサーバーSDKのいずれかを使用するか、OpenTokの /broadcast/layout REST API エンドポイントを呼び出します。.

リクエスト本文に typeプロパティを持つJSONオブジェクトを送信します。

{
  "type": "pip"
}

しかし、レイアウトの使用は、ストリームを美しく見せるための最初のステップに過ぎません。次のステップは、ストリームのクラスリストを更新することです。

縦型プレゼンテーション verticalPresentationレイアウトを使ってみましょう。上の画像で、大きな領域に「focus」という単語が含まれていることに気づくでしょう。「focus」は、その領域に表示させたいストリームに適用されるべきクラスの名前です。

共有スクリーン、アクティブなスピーカー、「プレゼンター」としてフラグを立てたパブリッシャーのいずれであっても、フィーチャーしたいストリームには「フォーカス」クラスが割り当てられていなければなりません。それでは、スタイルとその適用・変更方法について説明しましょう。

ブロードキャストとストリームのスタイル

放送のレイアウトは、以下の構造を持つ仮想DOMに作成される：

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

あらかじめ用意されているレイアウトを使用したり、カスタムレイアウトを作成する際には、この構造を念頭に置いておくとよいでしょう。デフォルトでは、放送ビデオは640x480ピクセルですが、放送開始時に1280x720の使用を指定できます。この場合、定義済みのレイアウトは16:9のアスペクト比を使用するように調整されます。

重要1回の放送で表示できるストリームは16本のみです。

スタイルを変える

事前に定義されたレイアウトは、放送のルック＆フィールを制御するためのCSSを提供します。これらを利用するには、どのクラスをどのストリームに適用するかを指定する必要があります。ストリームのクラスリストは、OpenTok のサーバー SDK を使うか、OpenTok REST API を使って変更できます。 /セッション/{セッションID}/ストリームエンドポイントを使用して変更できます。このエンドポイントへのリクエストには、以下のオブジェクトのような JSON ボディが含まれます：

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

重要なのは itemsプロパティは配列であり、1回のリクエストで複数のストリームに関する詳細を提供することができる。つまり、縦型プレゼンテーションを使用する例では、フォーカスしたいストリームの id を指定して上記のペイロードを送信する必要があります。別のストリームが以前にフォーカスクラスを持っていた場合は、空のクラスリストとともに送信し、フォーカスクラスがそのストリームから削除されるようにします。

カスタムレイアウトの作成

定義済みのレイアウトがニーズに合わない場合は、カスタムレイアウトを作成できます。 customをタイプとして送り stylesheetプロパティにCSSを指定して、カスタムレイアウトを作成することができます。

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

カスタムレイアウトを作成する際には、いくつかの点を考慮する必要があります：

• に適用されるデフォルトスタイル broadcast要素と stream要素

• 使用可能なCSSセレクタ

• 使用可能なCSSプロパティと値

デフォルトスタイル

その broadcastと stream要素にはデフォルトのルールが適用されます。カスタムCSSでこれらのスタイルを上書きすることができます。デフォルトのルールは

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

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

使用可能なCSSセレクタ

タイプセレクタはストリーム・エレメントにのみ対応しています。ブロードキャスト要素を選択することはできません。クラスセレクタ（.focusなど）はサポートされています（そして優先されます）。これらのセレクタを使用して、ストリームのグループまたは個々のストリームを選択できます。隣接兄弟と一般兄弟の組み合わせがサポートされています（sibling-one + sibling-two、sibling-one ~ sibling-two）。

その :first-child, :last-child, :nth-child(n)および :nth-last-child(n)擬似クラス・セレクタもサポートされています。

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

• ユニバーサル・セレクター (*)

• 子孫セレクタ（親の祖先、親 * 祖先）

• 子セレクタ（親＞子）

• IDセレクタ（#myidentifier）

• 属性セレクタ ([data-title*="my-title"])

• 疑似要素セレクタはサポートされていません。

許可されたCSSプロパティ

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

さらに前進する

エクスペリエンス エクスペリエンス・コンポーザーを使用すると、ビデオ通話のレイアウトだけでなく、Web アプリケーション全体のレイアウトもキャプチャできます。これには、アプリケーションに表示されているバナー、テキストチャット、ホワイトボード、その他のUI要素が含まれます。エクスペリエンス コンポーザーはビデオ通話に参加し、画面に表示されているすべてを別のストリームに変換します。このストリームは、ブロードキャストやアーカイブが可能です。

学習を続ける

放送の見た目のカスタマイズについてもっと知りたいですか？以下のリンクをご覧ください：

• オープントック・ブロードキャスト

• OpenTokライブストリーミング放送のビデオレイアウトを設定する