(2) ビデオチャットの追加

このチュートリアルは、テキストチャットを設置するチュートリアル の続きです。まだテキストチャットのチュートリアルを終えていない場合は、先にそちらに取り組んでください。

1. ビデオチャットの UI をレンダリングする

テキストチャットと同様に、ビデオチャットも プレビルド UI を利用することもできますが、チュートリアルでは自前で UI を構築する方法を見ていきます。

<div id="video-chat"></div>
<div id="streams"></div>

const data = {
  messages: [],
  streams: {},
  isVideoStarted: false,
}

const render = (props) => {
  const { messages, streams, isVideoStarted } = props

  renderTextChat({ messages })
  renderVideoChat({ streams, isVideoStarted })
}

const renderVideoChat = (props) => {
  let html = `
    <button type="button" onclick="startVideoChat()">
      ビデオチャットを開始
    </button>
  `

  if (props.isVideoStarted) {
    html = `
      <button type="button" onclick="finishVideoChat()">
        ビデオチャットを終了
      </button>
    `
  }

  document.getElementById('video-chat').innerHTML = html

  const streams = document.getElementById('streams')

  // <video>要素を設置して通話相手のビデオを表示
  for (const [id, stream] of Object.entries(props.streams)) {
    if (!streams.querySelector(`[data-user-id="${id}"]`)) {
      const video = document.createElement('video')
      video.srcObject = stream
      video.play()
      video.setAttribute('data-user-id', id)
      streams.appendChild(video)
    }
  }

  // 通話が終了した<video>を削除
  const ids = Object.keys(props.streams)
  for (const node of stream.querySelectorAll('video')) {
    const id = node.getAttribute('data-user-id')
    if (!ids.includes(id)) {
      stream.removeChild(node)
    }
  }
}

2. ビデオチャットを開始/終了する

room.video でビデオチャットの API にアクセスできます。以下のコードを記述します。

const startVideoChat = async () => {
  const media = await room.video.requestMedia({ video: true, audio: true })
  await room.video.call(media)
}

const finishVideoChat = async () => {
  await room.video.hangup()
}

room.video.onCall((user, stream) => {
  data.streams[user.id] = stream
  render(data)
})

room.video.onHangup((user) => {
  delete data.streams[user.id]
  render(data)
})

これでビデオチャットの設置は完了です！　ここまでのコード全文は GitHub にあります。

3. 動作を確認する

作成したページを2つのタブ（もしくは2つのブラウザ）で開きます。

// TODO: スクショ等を貼る

次のステップ

プレビルド UI を利用してリッチな UI をすばやく構築します。