画面共有 - Web

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

セッションに接続しているクライアントは、カメラをソースとするストリームを購読するのと同じように、画面共有ストリームを購読（および表示）することができます。（これを行うのにブラウザ拡張機能は必要ありません。 サブスクライブ をスクリーン共有ストリームに追加する)。

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

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

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

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

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

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

このトピックには以下のセクションが含まれます：

クイックスタート
画面共有拡張機能の開発（非推奨）
画面共有の公開機能の対応状況の確認
スクリーン共有ソースでストリームを公開する
ストリームの最大解像度を設定する
画面共有動画のトリミングやレターボックス表示
ストリームのビデオタイプ（"スクリーン "または "カメラ"）の決定
動画のサイズが変更されたことを検知する
ユーザーが画面共有を終了したタイミングの判定
画面共有ストリームに登録する
Electronで画面共有を可能にする
特定の画面共有ストリームの動画パフォーマンスの最適化

クイックスタート

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

注：古いバージョンのChromeやOperaで画面共有をサポートするには、画面共有用拡張機能を作成する必要があります。以下のGitHubリポジトリを参照してください： https://github.com/opentok/screensharing-extensions.

画面共有の動画ストリームを購読するのに拡張機能は必要ありません。OpenTokに対応しているすべてのブラウザで利用可能です。

画面共有拡張機能の開発（非推奨）

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

古いバージョンのChromeやOperaで画面共有をサポートするには、画面共有用拡張機能を作成する必要があります。画面共有用拡張機能のサンプルコードについては、以下のGitHubリポジトリを参照してください：

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

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

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

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

<div id="publisher"></div>
<div id="screen-preview"></div>

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

エラー時には 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() メソッドを使用する。注：画面共有ストリーム用のスケーラブルなビデオは ベータ が特徴だ。

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

を設定することができる。 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 要素の寸法と一致しない場合、動画はレターボックス化されます。これは、画面共有動画のデフォルト設定です。

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

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

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

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

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

<div id="people"></div>
<div id="screens"></div>

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

動画のサイズが変更されたことを検知する

スクリーン共有ストリームを公開している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.
  }
});

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

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

をチェックすることで、ストリームが画面共有ストリームであることを検出できます。 videoType Stream オブジェクトのプロパティです。画面共有ストリームの場合、このプロパティは「screen」に設定されます。

以下のコードは、動画の種類（「screen」または「camera」）に応じて、ストリームを購読し、それらを異なるHTML DOMコンテナ要素に追加します。

session.on('streamCreated', function(event) {
  var subOptions = {
    appendMode: 'append'
  };

  var parentElementId = event.stream.videoType === 'screen' ?
    'sub-screen-sharing-container' :
    'sub-camera-container';
  subscriber = session.subscribe(event.stream, parentElement, subOptions);
});

画面共有ストリームのサイズが、ストリームを配信しているユーザーがストリームのソースとなるウィンドウのサイズを変更すると、変わる場合があります。動画のサイズが変更されると、Subscriber オブジェクトは videoDimensionsChanged イベントを開催する。

以下のコードは、ストリームの動画サイズが変更された際に、サブスクライバーのサイズを変更するものです：

subscriber.on('videoDimensionsChanged', function(event) {
  subscriber.element.style.width = event.newValue.width + 'px';
  subscriber.element.style.height = event.newValue.height + 'px';
  // You may want to adjust other UI.
});

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

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

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