WebRTC(SkyWay)でコネクションを成立後にローカルビデオのon/offを動的に切り替えたい

WebRTC SkyWay

やりたいこと

WebRTCでコネクションを作ったあとに、自分のビデオ、マイク音声on/offをシームレスに切り替えるようにしたい。

Skypeとかにあるビデオ、音声ミュート機能と同じやつ。 例えば、今ちょっと自分の画面を相手に見せたくないよ、でもコネクションは切りたくないよ、なんていうときに使われるであろう機能。

やり方

最初は、getUserMediaで新しいconstraintsをセットして、streamをreplaceしてやれば良いかな？と思ったけど、 getUserMediaの仕様上、constraintsのvideo, audioのいずれか一方は必須パラメータのため、両方OFFにするケースに対応できず諦めた。(それにちょっとこのやり方はよくない)

調べていると良い方法が見つかったので以下に記載する。

普通にgetUserMediaでローカルストリームを取得する

// get local stream
navigator.mediaDevices
  .getUserMedia(constraints)
    .then(stream => {
      localStream = stream
    })
    .catch(error => {
      // error handling
    })

ビデオ、音声は、取得したローカルストリームのgetVideo/AudioTracks()[0].enabled パラメータにtrue/falseをセットすることで動的にon/offを切り替えられる。 適当に以下のようなfunctionでそれぞれスイッチできた。

const updateVideoEnabled = (enabled) => {
  if (localStream) {
    localStream.getVideoTracks()[0].enabled = enabled
  }
}
const updateAudioEnabled = (enabled) => {
  if (localStream) {
    localStream.getAudioTracks()[0].enabled = enabled
  }
}