RareJob Tech Blog

レアジョブテクノロジーズのエンジニア・デザイナーによる技術ブログです

getDisplayMediaを使って画面共有をやってみる

フロントエンドエンジニアの田原です。 今年も残り僅かとなり、年末感が強くなってきたように感じます。 街中に流れる音楽や急にくる寒さなど色んなとところで年末感を感じられるとは思いますが、皆さんはどういったところで感じられるでしょうか?

私は「これはたくさん入ってるので年末までは保つなぁー」という思いで買ったみかん箱が 4 日ぐらいでなくなり、手が黄色くなっている事で年末感を感じることができました。(みかん美味しいよね ♪)

本日は Lesson Room における画面共有機能を開発しておりますので、それについての内容を説明したいと思います。
※尚、以下コードは処理の流れを簡易的に説明したものとなるため、実際の実装とは多少異なります。

目次

getDisplayMedia を使って画面のキャプチャーを取得する。

getDisplayMediaは、それを呼び出す事でディスプレイまたはその一部の内容をキャプチャするための許可設定を選択させる事ができる WebAPI のメソッドです。

画面キャプチャー用の stream(ここでは画面キャプチャーデータの塊のようなもの)を以下のように取得します。

const displayStrem = await navigator.mediaDevices.getDisplayMedia({
  video: true,
})

非同期関数(返り値が Promise object なので)なので await や then で取得した stream の値を取り扱えるようにします。

次に返された stream(ここでは displayStream)を使って映像部分(track)を取り出します。

const [displayVideoTrack] = displayStream.getVideoTracks()

Audio Track との合成

次に getUserMedia で取得した stream(ビデオチャット用のカメラと音声データの塊のようなもの)のうち、 音声の部分(track)を取得します。

stream = await navigator.mediaDevices.getUserMedia({ audio: true, video: true })
const [userAudioTrack] = stream.getAudioTracks()

取得した音声の track と画面キャプチャーの映像 track を新しい stream に合成します。

const newStream = new MediaStream([displayVideoTrack, userAudioTrack])

stream を合成されたものに差し替える

最後に上記で作成した新しい stream を今使っている stream に差し替える対応を行います。

尚、弊社では Lesson Room にてリアルタイム通信(WebRTC)を実現する為にSkywayという SDK を利用しており、その中に stream を入れ替えるメソッドが用意されているのでそちらを利用します。参考:replaceStream

skyway.replaceStream(newStream)

これで、送信中の stream が変更され映像領域の内容が変更され送信されるようになります。

画面共有終了時に元のビデオ画面に戻す。

途中抜き出した、displayVideoTrackに対し addEventListener 設定しておくことで画面共有が終了した際(閉じられた)の event の callback 関数を呼び出すことができます。 この callback の中で画面共有で利用した stream(newStream)のビデオ track を停止させ、再度 replaceStream を呼び出してもともとの stream に戻します。

displayVideoTrack.addEventListener(
  'ended',
  () => {
    newStream.getVideoTracks()[0].stop()
    skyway.replaceStream(stream)
  },
  { once: true }
)

画面共有が終了(閉じられると)すると自動的に元のビデオ画面の状態に戻ります。

まとめ

リモートワーク普及により、Zoom や Meet ライクな UX をユーザー様に提供すべく遅ればせながら画面共有の開発を実装しているところです。実際にお使い頂けるようになるまで、もう少し先にはなりますが今後も増える予定の各機能追加を楽しみにして頂きながら Lesson Room を英語学習の一つのツールとしてご利用頂けますと幸いです。