画面共有：一般的な概念

カメラの代わりに）画面のビデオビューをソースとして使用するストリームを公開できます。

セッションに接続したクライアントは、カメラをソースとするストリームを購読するのと同じように、ストリームを購読することができる（そしてそれを見ることができる）。

スクリーン共有ソースでストリームを公開する

スクリーン共有ストリームを公開するには、OTPublisherプロパティ・プロパティのvideoSourceプロパティを "screen "に設定します：

<OTPublisher
  properties={{
    videoSource: 'screen',
  }}
/>

画面共有ストリームは、アプリケーションのビュー全体からビデオをキャプチャします。このため、ストリーム共有ストリームを公開するときに、ローカルクライアントで購読者を無効にしたい場合があります (購読者が公開ストリームに表示されないようにするため)。

ストリームのビデオタイプ（"スクリーン "または "カメラ"）の決定

カメラをソースとして使用するストリームに登録するのと同じ方法で、画面共有ビデオソースを使用するストリームに登録できます。参照 ストリームの購読.

をチェックすることで、ストリームが画面共有ストリームであることを検出できます。 videoType OTSessionのイベント・オブジェクトのプロパティ streamCreated イベントを設定する。スクリーン共有ストリームの場合、このプロパティは "screen":

<OTSession
  applicationId="the API key"
  sessionId="the session ID"
  token="the token"
  eventHandlers={{
    streamCreated: event => {
      console.log(event.videoType, 'stream created', event.streamId);
    }
  }}>
  { /* ... */ }
</OTSession>

OTSession オブジェクトは、他のクライアントのストリームの寸法が変更されると、streamPropertyChanged イベントをディスパッチします。これは、公開クライアントが共有されているウィンドウ（Vonage Video Web Client SDKを使用するアプリのブラウザウィンドウなど）のサイズを変更した場合に発生します。イベント オブジェクトの changedProperty プロパティは "videoDimensions" に設定されます。イベント オブジェクトの stream.height および stream.width プロパティは、動画の新しい幅と高さになります。

<OTSession
  applicationId="the API key"
  sessionId="the session ID"
  token="the token"
  eventHandlers={{
    streamPropertyChanged: event => {
      console.log(event.stream.streamId, 'stream property', event.changedProperty, 'changed:', event.stream.height, event.stream.width);
    }
  }}>
  { /* ... */ }
</OTSession>

ストリームの video dimensions および videoType の詳細を使用して、UI で対応する購読者のサイズまたは寸法を調整できます。UI でのサブスクライバのレイアウトのカスタマイズの詳細については、以下を参照してください。 ストリームの購読.

画面共有ストリームに登録する

Stream オブジェクトには videoType プロパティを設定します。これは以下の値のいずれかに設定できます。

  • "camera" - カメラを映像ソースとする標準的なビデオストリーム
  • "screen" - スクリーン共有ビデオストリーム
  • "custom" - HTML VideoTrack 要素を動画ソースとして使用し、Web クライアントから公開されたストリーム。
  • undefined - ストリームが音声のみの場合 ( 音声ガイド)

このプロパティは、モバイル機器から公開されるストリームが、カメラから画面共有ビデオタイプに変更された場合に変更される可能性があります。動画タイプが変更されると、Session オブジェクトは streamPropertyChanged イベントを開催する。

以下のコードは、ストリームを購読し、動画の種類に応じて異なる HTML DIV コンテナ要素に追加します：