[WebRTC] 7. 라이브 스트리밍 구현 (3) Sender / 카메라 및 오디오 전환하기

스트림이 진행되는 동안 카메라나 오디오를 전환하려면 어떻게 해야 할까요? 이 때는 1) 상대방의 연결을 확인하고, 2) 사용하는 기기를 확인한다음, 3) sender를 통해 스티리밍 track을 변경해줄 수 있습니다.

Sender 찾기

먼저, getSenders()를 사용하면 webRTC 연결에서 sender 정보를 받아올 수 있습니다. 이 정보를 업데이트하면 기기 전환을 구현할 수 있습니다.

async function handleCameraName() {
  await getMedia(cameras.value, undefined);
  if (myPeerConnection) {
    console.log(myPeerConnection.getSenders());
  }
}

async function handleAudioName() {
  await getMedia(undefined, audios.value);
  if (myPeerConnection) {
    console.log(myPeerConnection.getSenders());
  }
}

이렇게 상대방 연결이 있는 경우 카메라 및 오디오 옵션을 확인해볼 수 있습니다.

스트림 업데이트 하기

카메라는 getVideoTracks(), 오디오는 getAudioTracks()를 사용하여 현재 스트리밍에 사용하고 있는 기기 정보를 받아올 수 있습니다.

 

다음으로 각 sender의 track 유형 (sender.track.kind)을 기반으로 영상과 음성을 구분하고, Sender의 트랙을 변경 replaceTrack해주면 완료입니다.

// app.js

async function handleAudioName() {
  await getMedia(audios.value, undefined);
  if (myPeerConnection) {
    const audioTrack = myStream.getAudioTracks()[0];
    const audioSender = myPeerConnection
      .getSenders()
      .find((sender) => sender.track.kind === "audio");
    audioSender.replaceTrack(audioTrack);
  }
}

async function handleCameraName() {
  await getMedia(undefined, cameras.value);
  if (myPeerConnection) {
    const videoTrack = myStream.getVideoTracks()[0];
    const videoSender = myPeerConnection
      .getSenders()
      .find((sender) => sender.track.kind === "video");
    videoSender.replaceTrack(videoTrack);
  }
}