Google Meetなどで画面共有するときに、
- 単一のブラウザタブを共有
- 単一のウィンドウを共有
- デスクトップ全体を共有
が選べますが、僕はほとんどの場合単一のウィンドウ共有を使います。
動作デモを見せたり議事録を映したりするので、タブ共有では足りません。
かといってデスクトップ全体共有だと、領域が広すぎます。老眼が始まった参加者から文字が小さいと苦情を受けるでしょう。メインで作業する4Kディスプレイとは別に、画面共有用にフルHDくらいの小型ディスプレイも接続しておくのがビジネスマンのマナーだとは思いますが、それでも広すぎるということも多いものです。ウィンドウのように自在にリサイズできるのには敵わない。
こんなの共有したら非難が殺到します
※デスクトップ共有で、うっかり通知が入り込んでしまう事故も良く見かけますね。どうしてもデスクトップ共有するときは、マルチディスプレイでサブディスプレイ側を共有するのがおすすめです。
このくらいのウィンドウサイズで共有してあげるのが優しさ
困ったことと解決案
ということでChromeから共有したいタブだけを切り離して集めたウィンドウを共有するわけですが、ここで唐突に「別のアカウントでログインした状態を見せたいので、ブラウザプロファイルを切り替えたい」とか「VSCodeの画面を見せたい」ということがよくあります。こんなときに、毎回共有ウィンドウを切り替えるのは面倒です。Web会議の画面共有を切り替えると数秒かかりますし、特定の参加者だけ調子悪い！とかを踏みやすい気がします。
そこで、画面共有しているブラウザ画面上に、任意のアプリのウィンドウを映す仕組みを作ってみました。たまに使うのですが、地味に便利だったので晒してみます。自分で使うことしか考えていないので、作り込みはしていません。
使い方
今のところCloudflare Pagesに置いています。
初期状態では真っ黒の画面です。
start ボタンを押すと、見慣れた画面共有ポップアップが出てくるので、共有したいウィンドウを選択すると、そのウィンドウがブラウザ枠内に映し出されます。
これだけですが、いちいちGoogle Meetの画面共有をやり直さずに、複数のウィンドウを共有することができます。
当然ですが、画面に見えているだけなので操作はできません。エディタを共有するとたまに混乱しますし、本物のウィンドウと共有用のウィンドウを並べておく大きいディスプレイがないと不便です。メインで常用するというよりは、「今ブラウザでウィンドウ共有してるんだけど、ちょっと別のウィンドウも見せたい」といったときにとっさに使う感じで役立てています。
ソースコード
単一HTMLファイルです。これを何処か適当なところに置くだけです。サーバ側の処理などは一切ないので、適当な静的ファイルホスティングにでも放り込めば可用性もセキュリティも万全です。
終わりに
実質2～3行で画面キャプチャできる昨今のブラウザAPIは便利ですね！
Google MeetでもZoomのようにウィンドウの矩形共有があればこんなものはいらなかったのですが、ブラウザだから仕方ない。
