画面共有:一般的な概念

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

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

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

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

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

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

について videoSource のoptionsパラメータの OT.initPublisher() メソッドは、公開するストリームのビデオ ソースを定義します。画面共有の場合は、このプロパティを "screen".古いバージョンのブラウザでは "application" または "window" を使用して、画面共有ソースのタイプを指定することができます。しかし、画面共有をサポートしている現在のブラウザでは、これらの値のどれを渡しても同じ動作になります。ブラウザはダイアログボックスを表示し、エンドユーザーが画面共有のソース(画面全体または特定のウィンドウ)を選択します。Electronでは、画面共有はユーザーに許可を求めることなく、画面全体をキャプチャします。

次のコードは、ソースとして画面共有を使用するストリームを公開する方法を示しています:

<div id="publisher"></div>
<div id="screen-preview"></div>
<script>
OT.checkScreenSharingCapability(function(response) {
  if(!response.supported || response.extensionRegistered === false) {
    // This browser does not support screen sharing.
  } else if (response.extensionInstalled === false) {
    // Prompt to install the extension.
  } else {
    // Screen sharing is available. Publish the screen.
    var publisher = OT.initPublisher('screen-preview',
      {videoSource: 'screen'},
      function(error) {
        if (error) {
          // Look at error.message to see what went wrong.
        } else {
          session.publish(publisher, function(error) {
            if (error) {
              // Look error.message to see what went wrong.
            }
          });
        }
      }
    );
  }
});
</script>

エラー時には OT.initPublisher() メソッドには、以下のエラー・コードのいずれかを持つエラー・オブジェクトを渡すことができる:

  • 1550 - "画面共有はサポートされていません。"
  • 1551 - 「画面共有には タイプ の拡張子は登録されていない。 タイプ."
  • 1552 - 「画面共有には タイプ 拡張機能がインストールされていません。

画面共有ストリームを公開する場合、以下のデフォルト値が options パラメーターの OT.initPublisher() メソッドを使用する:

  • maxResolution - { width: 1920, height: 1920 }
  • mirror - false
  • fitMode - "contain"
  • publishAudio - false

さらに、結果のストリームの購読者は、デフォルトで "contain" fitMode セッティング

に関する情報 maxResolution そして fitMode次の2つのセクションを参照のこと。

デフォルトでは スケーラブルビデオ は、画面共有ストリームでは無効です。画面共有ストリームに対してスケーラブル・ビデオを有効にするには scalableScreenshare オプションは OT.initPublisher() メソッドを使用する。 注: 画面共有ストリーム用のスケーラブルなビデオは ベータ が特徴だ。

カメラの代わりにデバイスの画面をビデオ・ソースとして使用するには、PublisherKitクラスを使用してカスタム・ビデオ・キャプチャを使用します。コードサンプルについては、SDKのsamplesディレクトリにあるscreen-sharingアクティビティを参照してください。

に電話する。 setPublisherVideoType(PublisherKit.PublisherKitVideoType type) パブリッシャー・オブジェクトの PublisherKit.PublisherKitVideoTypePublisherKitVideoTypeScreen.これは、公開されたストリームに(カメラではなく)画面共有ビデオソースがあることをフラグ付けします。

ルーティングされたセッションでスクリーン・ビデオ・タイプを使用するスクリーン共有ストリームを公開する前に、以下のように setAudioFallbackEnabled(boolean enabled) PublisherKitオブジェクトのメソッドに false.これは音声のみのフォールバック機能を無効にするもので、加入者でビデオがドロップアウトしないようにします。参照 Vonage ビデオ・メディア・ルーターとメディア・モード.

デフォルトでは スケーラブルビデオ は、画面共有ストリームでは無効です。画面共有ストリームでスケーラブル・ビデオを有効にするには PublisherKit.Builder.scalableScreenshare() メソッドを使用する。

カメラの代わりにデバイスの画面をビデオ・ソースとして使用するには、PublisherKitクラスを使用してカスタム・ビデオ・キャプチャを使用します。コードサンプルについては、SDKのsamplesディレクトリにあるScreen-Sharingプロジェクトを参照してください。

を設定する。 OTPublisherKit.videoType プロパティ OTPublisherKitVideoTypeScreen (OTPublisherKitVideoType で定義)。これは、公開ストリームが(カメラの代わりに)画面共有ビデオソースを持つものとしてフラグを立てます。

Vonage Video Media Serverを使用するセッションで、画面ビデオタイプを使用する画面共有ストリームを公開する前に OTPublisherKit.audioFallbackEnabled プロパティをNO(swiftではfalse)に設定します。これにより、音声のみのフォールバック機能が無効になり、加入者の動画がドロップアウトしなくなります。参照 Vonage ビデオ・メディア・ルーターとメディア・モード.

デフォルトでは スケーラブルビデオ は、画面共有ストリームでは無効です。画面共有ストリームでスケーラブル・ビデオを有効にするには OTPublisherKitSettings.scalableScreenshare 財産である。 注: 画面共有ストリーム用のスケーラブルなビデオは ベータ が特徴だ。

カメラの代わりにデバイスの画面をビデオ・ソースとして使用するには、PublisherKitクラスを使用してカスタム・ビデオ・キャプチャを使用します。コードサンプルについては、SDKのsamplesディレクトリにあるScreen-Sharingプロジェクトを参照してください。

を設定する。 OTPublisherKit.videoType プロパティ OTPublisherKitVideoTypeScreen (OTPublisherKitVideoType で定義)。これは、公開ストリームが(カメラの代わりに)画面共有ビデオソースを持つものとしてフラグを立てます。

Vonage Video Media Serverを使用するセッションで、画面ビデオタイプを使用する画面共有ストリームを公開する前に OTPublisherKit.audioFallbackEnabled プロパティをNO(swiftではfalse)に設定します。これにより、音声のみのフォールバック機能が無効になり、加入者の動画がドロップアウトしなくなります。参照 Vonage ビデオ・メディア・ルーターとメディア・モード.

デフォルトでは スケーラブルビデオ は、画面共有ストリームでは無効です。画面共有ストリームでスケーラブル・ビデオを有効にするには OTPublisherKitSettings.scalableScreenshare 財産である。 注: 画面共有ストリーム用のスケーラブルなビデオは ベータ が特徴だ。

カメラの代わりにデバイスのスクリーンをビデオソースとして使用するには カスタムビデオキャプチャ.

ここでは、画面共有(ビデオソースとしてカメラの代わりに画面を使用)を実装するためのカスタムビデオキャプチャを定義する例を示します:

public class ScreenSharingCapturer : IVideoCapturer
{
    System.Threading.Timer timer;
    IVideoFrameConsumer frameConsumer;
    const int WIDTH = 640;
    const int HEIGHT = 480;
    const int FPS = 30;

    public void Init(IVideoFrameConsumer frameConsumer)
    {
        this.frameConsumer = frameConsumer;
    }

    public void Start()
    {
        timer = new System.Threading.Timer((Object stateInfo) =>
        {
            using (Bitmap bitmap = new Bitmap(WIDTH, HEIGHT, System.Drawing.Imaging.PixelFormat.Format32bppArgb))
            {
                using (Graphics graphics = Graphics.FromImage(bitmap as Image))
                {
                    graphics.CopyFromScreen(0, 0, 0, 0, new Size(WIDTH, HEIGHT), CopyPixelOperation.SourceCopy);
                }
                using (var frame = OpenTok.VideoFrame.CreateYuv420pFrameFromBitmap(bitmap))
                {
                    frameConsumer.Consume(frame);
                }
            }

        }, null, 0, 1000 / FPS);
    }

    public void Stop()
    {
        if (timer != null)
        {
            using (var timerDisposed = new ManualResetEvent(false))
            {
                timer.Dispose(timerDisposed);
                timerDisposed.WaitOne();
            }
        }
        timer = null;
    }

    public void Destroy()
    {
    }

    public VideoCaptureSettings GetCaptureSettings()
    {
        VideoCaptureSettings settings = new VideoCaptureSettings();
        settings.Width = WIDTH;
        settings.Height = HEIGHT;
        settings.Fps = FPS;
        settings.MirrorOnLocalRender = false;
        settings.PixelFormat = PixelFormat.FormatYuv420p;

        return settings;
    }
}

を設定する。 VideoSourceType パブリッシャー・オブジェクトの OpenTok.VideoSourceType.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 コンテナ要素に追加します:

<div id="people"></div>
<div id="screens"></div>
<script>
session.on('streamCreated', function(event) {
  var subOptions = {insertMode: 'append'};
  if(event.stream.videoType === 'screen') {
    session.subscribe(event.stream, 'screens', subOptions);
  } else {
    session.subscribe(event.stream, 'people', subOptions);
  }
});
</script>

Stream オブジェクトには videoType プロパティを使用する。これは、Stream.StreamVideoType 列挙型で定義されている以下の値のいずれかに設定することができます:

  • StreamVideoTypeCamera - カメラを映像ソースとする標準的なビデオストリーム
  • StreamVideoTypeScreen - スクリーン共有ビデオストリーム
  • StreamVideoTypeCustom - HTML VideoTrack 要素を動画ソースとして使用して、Web クライアントから公開されるストリーム。

Stream オブジェクトには videoType プロパティを使用する。これは、OTStreamVideoType 列挙型で定義されている以下の値のいずれかに設定することができる:

  • OTStreamVideoTypeCamera - カメラを映像ソースとする標準的なビデオストリーム
  • OTStreamVideoTypeScreen - スクリーン共有ビデオストリーム
  • OTStreamVideoTypeCustom - HTML VideoTrack 要素を動画ソースとして使用し、Web クライアントから公開されたストリーム。

Stream オブジェクトには videoType プロパティを使用する。これは、OTStreamVideoType 列挙型で定義されている以下の値のいずれかに設定することができる:

  • OTStreamVideoTypeCamera - カメラを映像ソースとする標準的なビデオストリーム
  • OTStreamVideoTypeScreen - スクリーン共有ビデオストリーム
  • OTStreamVideoTypeCustom - HTML VideoTrack 要素を動画ソースとして使用し、Web クライアントから公開されたストリーム。

Stream オブジェクトには VideoSourceType プロパティを使用します。このプロパティには、以下の値のいずれかを設定することができます。 OpenTok.VideoSourceType を列挙する:

  • Camera - カメラを映像ソースとする標準的なビデオストリーム
  • Screen - スクリーン共有ビデオストリーム
  • Custom - HTML VideoTrack 要素を動画ソースとして使用して、Web クライアントから公開されるストリーム。

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

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

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

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

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

<div id="people"></div>
<div id="screens"></div>
<script>
session.on('streamCreated', function(event) {
  var subOptions = {insertMode: 'append'};
  if(event.stream.videoType === 'screen') {
    session.subscribe(event.stream, 'screens', subOptions);
  } else {
    session.subscribe(event.stream, 'people', subOptions);
  }
});
</script>

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

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

カメラをソースとして使用するストリームに登録するのと同じ方法で、画面共有ビデオソースを使用するストリームに登録できます。のストリームの購読を参照してください。 オブジェクティブC.

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