Screen Capture APIで複数の画面共有をスマートに切り替える
ミーティングが当たり前のようにオンラインで実施されるようになって久しいこの頃、最近では対面であっても何かしらのオンラインルームに集まりつつ資料だけ画面共有して手元で閲覧、なんてことも増えてきました。
日々当たり前のように利用される画面共有機能ですが、皆さんは複数のタブやウィンドウの表示を切り替える時はどうしてますか？
画面共有の切り替えをスマートにしたい
普通に逐一切り替えれば良いのですが若干のモタつきが出ますし、例えばデザインと実際の画面を交互に確認するなど、画面を行ったり来たりするような操作はとても不便です。
思い切ってタブやウィンドウ単位ではなくスクリーン全体を共有したくなりますが、特に外部とのミーティングの際などは少しリスキーなのであまりやりたくないですよね。
これもうちょっとスマートに出来ないかなと思っていたのですが、ブラウザのScreen Capture APIを使えばスニペットレベルの短いコードで実現できることに気付いたのでやってみました。
Screen Capture API
デバイスの画面や音声データを取得するためにブラウザが用意しているAPIで、Webページ側から簡単な操作でスクリーンキャプチャや録音等を行うことが出来ます。
Chrome, Firefox, Safari, Edge, Opera等多くのPC用ブラウザがサポートしているようです。
videoタグに画面キャプチャを表示する例
たったこれだけのコードで任意の画面のキャプチャを表示することが出来て素敵ですね…！
タブやウィンドウの選択UIはブラウザ側で表示してくれるみたいです。
const videoElem = document.getElementById("video");
const options = {
video: true,
audio: false, // 必要無い場合はfalseに
};
videoElem.srcObject = await navigator.mediaDevices.getDisplayMedia(options);
このAPIを使えば予め一つの画面に共有したい画面をまとめつつ表示対象を切り替えるようなことがサクッと出来そうです。実際に作ってみましょう。
出来たもの
Screen Capture APIを使ってこんな感じの利用を想定したページを作ってみました。
- 予めこのページにブラウザ、VSCode、ターミナルなど複数の画面を登録しておく
- ミーティング時はこのページを共有すれば共有対象を切り替えながら話すことができる
単純な作りの静的ページなのでGitHub Pagesにデプロイしてあります。
実際の動作画面のキャプチャも撮ってみました。何となく雰囲気分かるでしょうか？
自分でも実際に使ってみていますが、割と便利です。
特にアジェンダがカチッと決まっているようなしっかり目のミーティングの時、事前に共有用の画面を用意しておけると進行がスムーズになって良い感じです。
ソースコード
ソースはこちらで公開しています。
キャプチャの取得と表示部分はほぼ上に書いたスニペットと同様のコードで実現しています。
Discussion