Web SDKを使用した画面共有

重要だ： Chrome 72+、Firefox 52+、Opera 59+では、画面共有に拡張機能は必要なくなりました。ブラウザは、カメラへのアクセスと同じように、エンドユーザーに画面へのアクセスを促します。

OperaとChromeの古いバージョンでは、画面共有ビデオを公開するには、クライアントが自分のドメインの画面共有ストリームを公開できるようにする拡張機能を追加する必要があります。参照 画面共有エクステンションの開発.)

注： macOS 10.15+（Catalina）では、画面共有ストリームを公開するには、macOSのシステム環境設定>セキュリティとプライバシー>プライバシー>画面録画で、ユーザーがブラウザに画面へのアクセスを許可する必要があります。そうしないと、Publisherは accessDenied イベントを開催する。

Internet Explorer用のVonage Videoプラグインには、画面共有サポートが組み込まれています。(ただし、Internet Explorer用のVonage Videoプラグインのサポートは、Vonage Video 2.17で削除されました)。

Electronでは、以下の場合に画面共有がサポートされます。 webPreferences.contextIsolation Electron BrowserWindowのオプションを false または、アプリがプリロードスクリプトを使用してデスクトップキャプチャにアクセスする場合。詳しくは Electronで画面共有を可能にする.

画面共有ストリームの公開は現在 違う iOSのSafari、またはmacOSのSafari 12以降でサポートされています。

サポートされているすべてのブラウザで、画面共有ストリームを公開するには、ページをHTTPSで読み込む必要があります。

スクリーン共有ビデオの公開は、Chrome、Firefox、Opera、ChromiumベースのEdge（バージョン79以上）、Safari 13以上でサポートされています。現在のところ 違う モバイルブラウザ、macOSのSafari 12以降でサポートされています。画面共有ストリームの公開は、ウェブページがHTTPS経由で読み込まれた場合にのみサポートされます。

注： 古いバージョンのChromeやOperaで画面共有をサポートするには、画面共有拡張機能を作成する必要があります。

Vonage Video APIをサポートするすべてのブラウザで可能な画面共有ビデオストリームを購読するには、拡張機能は必要ありません。

画面共有エクステンションの開発（非推奨）

重要だ： Chrome、Firefox、Operaの最新バージョンでは、画面共有拡張機能は必要ありません。

古いバージョンのChromeとOperaで画面共有をサポートするには、画面共有拡張機能を作成する必要があります。

https://github.com/opentok/screensharing-extensions

画面共有サポートの確認

画面共有ストリームの公開がクライアント・ブラウザでサポートされているかどうかを確認するには OT.checkScreenSharingCapability() メソッドを呼び出します。このメソッドは、コールバック関数という1つのパラメータを受け取ります。コールバック関数には response オブジェクトを持つ。このオブジェクトには、クライアントで画面共有ストリームを公開するためのサポートを示す、以下のプロパティがあります：

  • supported - 論理値） 共有をサポー ト し ているかど う か。
  • supportedSources- 非推奨。古いバージョンのブラウザでは、画面共有ソースの種類（たとえば "application", "screen"あるいは "window" を設定することで videoSource に渡されたオプションの OT.initPublisher() メソッドを使用します。ブラウザはダイアログボックスを表示し、エンドユーザーが画面共有元（画面全体または特定のウィンドウ）を選択します。Electronでは、画面共有はユーザーに許可を求めることなく、画面全体をキャプチャします。

optionsパラメータには、以下のプロパティも含まれています。これは、画面共有エクステンションを必要とする古いバージョンのChromeとOperaの画面共有サポートに適用されます：

  • extensionRequired (文字列) - 古いバージョンのChrome（Chrome 72以前）とOpera（Opera 59以前）では "chrome "に設定され、画面共有拡張機能がインストールされている必要があります。
  • extensionRegistered (論理値） - 古いバージョンの Chrome （Chrome 72 より前） と Opera （Opera 59 より前） では、 このプロパティは true スクリーン共有エクステンションが登録されている場合。 false.を使用する。 OT.registerScreenSharingExtension() メソッドを使ってChromeやOperaに拡張機能を登録することができます。
  • extensionInstalled (Boolean) - 拡張機能が必要な場合、次のように設定されます。 true 拡張機能がインストールされている場合 (必要であれば登録されている場合)。 false.

注： 画面共有は、ウェブページがHTTPSで読み込まれた場合のみサポートされます。

次の例は、画面共有のサポートをチェックする方法を示している：

OT.checkScreenSharingCapability(function(response) {
  if(!response.supported || response.extensionRegistered === false) {
    // This browser does not support screen sharing
  }
});

ストリームの最大解像度の設定

を設定することができる。 maxResolution プロパティを呼び出すときに OT.initPublisher() メソッドを使用します。このプロパティは、ストリームの最大解像度を設定します。ウィンドウを共有する場合、ストリームの解像度はウィンドウの寸法と一致します。 maxResolution ユーザーがウィンドウのサイズを変更したとき）。

について maxResolution プロパティは2つのプロパティを持つオブジェクトである： width そして height.それぞれの最大値は1920、最小値は10である。

var publishOptions = {};
publishOptions.maxResolution = { width: 1920, height: 1080 };
publishOptions.videoSource = 'screen';
OT.initPublisher('some-element-id', publishOptions);

画面共有の場合は resolution オプションは OT.initPublisher() メソッドを使用する。

画面共有の動画を、それを公開するページの HTML DOM に表示したくない場合があります。たとえば、画面全体を共有する場合に HTML DOM に動画を含めると、再帰的な「鏡の回廊」効果が表示されます。これを防ぐには、パブリッシャー要素用の HTML DOM 要素を作成し、その要素を HTML DOM に表示しないようにします：

    var publishOptions = {videoSource: 'screen'};
    var screenPublisherElement = document.createElement('div');
    OT.initPublisher(screenPublisherElement, publishOptions);

スクリーン共有ビデオのクロップまたはレターボックス化

を設定することができる。 fitMode プロパティの options パラメータに渡す OT.initPublisher() そして Session.subscribe() メソッドを使用する。その fitMode プロパティは、動画の寸法が DOM 要素の寸法と一致しない場合に、動画がどのように表示されるかを決定します。このプロパティには、次のいずれかの値を設定できます：

  • "cover" - 動画の寸法が DOM 要素の寸法と一致しない場合は、動画が切り取られます。これは、カメラフィードを公開する動画のデフォルト設定です。
  • "contain" - 動画の寸法が DOM 要素の寸法と一致しない場合、動画はレターボックス化されます。これは、画面共有動画のデフォルト設定です。

ビデオ寸法の変更検出

スクリーン共有ストリームを公開しているPublisherオブジェクトと、スクリーン共有ストリームを購読しているSubscriberオブジェクトは、それぞれ videoDimensionsChanged イベントが発生します。このイベントは、パブリッシング・クライアントが共有されているウィンドウのサイズを変更したときにディスパッチされます。

について videoDimensionsChanged イベントには以下のプロパティがある：

  • newValue - 動画の新しい幅と高さを定義する width と height プロパティを持つオブジェクト。
  • oldValue - 動画の前の幅と高さを定義する width と height プロパティを持つオブジェクト。
  • target - パブリッシャ・オブジェクトまたはサブスクライバ・オブジェクト。

を使用することができる。 newValue.width そして newValue.height プロパティを使って、HTML DOM内のパブリッシャーのサイズを調整することができます：

var publisher = OT.initPublisher('some-element',
  {videoSource: 'screen'});

publisher.on('videoDimensionsChanged', function(event) {
  publisher.element.style.width = event.newValue.width + 'px';
  publisher.element.style.height = event.newValue.height + 'px';
});

ユーザーが画面共有を停止するタイミングの決定

ユーザーが画面共有を停止すると、パブリッシャー・オブジェクトは mediaStopped イベントを開催する。

パブリッシャがセッションにもストリームをパブリッシュしていた場合、次のようにstreamDestroyedイベントもディスパッチします。 reason プロパティを "mediaStopped".また、セッションに接続されたすべてのクライアントのSessionオブジェクトは streamDestroyed イベントを reason プロパティを "mediaStopped".

デフォルトの動作は mediaStopped イベントと streamDestroyed イベントはパブリッシャー (サブスクライブしているストリームの場合はサブスクライバー) を削除するものである。イベント preventDefault() メソッドを呼び出すことで、パブリッシャーやサブスクライバーが 削除されるのを防ぐことができる。

publisher.on('mediaStopped', function(event) {
  // The user clicked stop.
});

publisher.on('streamDestroyed', function(event) {
  if (event.reason === 'mediaStopped') {
    // User clicked stop sharing
  } else if (event.reason === 'forceUnpublished') {
    // A moderator forced the user to stop sharing.
  }
});

Electronで画面共有を有効にする

Electronでは、以下の場合に画面共有がサポートされます。 webPreferences.contextIsolation Electron BrowserWindowのオプションを false または、アプリがデスクトップキャプチャにアクセスするためにプリロードスクリプトを使用する場合。デフォルトの webPreferences.contextIsolation オプションは true 電子12+と false 以前のバージョンではエレクトロン17+では 変化 が導入され、プリロード・スクリプトを使用した後でないと画面共有が利用できなくなった。

Electronバージョン12-16のプリロードスクリプトによる画面共有の有効化

プリロードスクリプトを使用してElectronバージョン12-16で画面共有を有効にするには、preload.jsファイルに以下を追加します：

const {
  contextBridge,
  desktopCapturer
} = require('electron');
// Expose the desktopCapturer so that OpenTok.js can access it
// via window.electron.desktopCapturer
contextBridge.exposeInMainWorld(
  'electron', {
    desktopCapturer,
  }
);

次に、ElectronでBrowserWindowをインスタンス化する際に、preload.jsを参照します：

mainWindow = new BrowserWindow({
  webPreferences: {
    nodeIntegration: true,
    preload: path.join(__dirname, 'preload.js'), // use the preload script
  }
});

Electronバージョン17以上でプリロードスクリプトによる画面共有を有効にする

Electronのバージョン17以上で画面共有を有効にするには、preload.jsファイルに以下を追加します：

const {
  contextBridge,
  ipcRenderer
} = require('electron');

// Event emitter to send asynchronous messages to the main process. The
// corresponding ipcMain handler listens for the 'DESKTOP_CAPTURER_GET_SOURCES'
// channel and returns an array of the available DesktopCapturerSource objects.
const desktopCapturer = {
  getSources: (opts) => ipcRenderer.invoke('DESKTOP_CAPTURER_GET_SOURCES', opts)
};

// Expose desktopCapturer so that the SDK can access it.
contextBridge.exposeInMainWorld(
  'electron', {
    desktopCapturer
  }
);

次に、ElectronでBrowserWindowをインスタンス化する際に、preload.jsを参照します：

    // Event emitter to handle messages sent from the renderer process. This handler
    // will be called whenever a renderer calls
    // ipcRenderer.invoke('DESKTOP_CAPTURER_GET_SOURCES', ...args)
    electron.ipcMain.handle(
      'DESKTOP_CAPTURER_GET_SOURCES',
      (event, opts) => electron.desktopCapturer.getSources(opts)
    );
    
    mainWindow = new BrowserWindow({
      webPreferences: {
        preload: path.join(__dirname, 'preload.js') // use a preload script
      }
    });

特定の画面共有ストリームのビデオパフォーマンスの最適化

ビデオ・コンテンツのヒントを設定すると、主にテキストまたはビデオ・コンテンツが含まれる画面共有ビデオの品質とパフォーマンスを向上させることができます。詳しくは 特定の状況下でビデオのパフォーマンスを向上させるビデオコンテンツのヒント設定.