[WebRTC] 2. 영상 및 음성 켜고 끄기

지난 포스팅에서는 영상 및 음성을 출력하는 것을 구현했는데요. 이번에는 해당 영상과 음성을 켜고 끄는 버튼을 구현해보도록 하겠습니다.

 

먼저, home.pug로 이동하여 해당 버튼들을 만들어주겠습니다.

// home.pug

div#video
    h2 Video Chat
    video#myFace(autoplay, playsinline, width="400", height="400")
    button#audioMute Mute
    button#cameraOff Camera Off

다음으로 app.js로 이동하여 아래와 같이 요소를 선택합니다. ON/OFF를 판단할 수 있는 변수인 audioOn과 cameraOn도 만들어주겠습니다.

// app.js

const myFace = document.getElementById("myFace");
const muteButton = document.getElementById("mute");
const cameraButton = document.getElementById("camera");

let myStream;
let audioOn = true; 
let cameraOn = true; 

async function getMedia() {
  try {
    myStream = await navigator.mediaDevices.getUserMedia({
      audio: true,
      video: true,
    });
    myFace.srcObject = myStream;
  } catch (e) {
    console.log(e);
  }
}

getMedia();

이전에 만든 myStream에서

getVideoTracks()과 getAudioTracks()를 통해 아래와 같이 영상 및 음성 기기의 상태를 볼 수 있습니다.

이 중에서 enabled를 사용하여 핸들러 함수가 실행될 때마다 영상과 음성을 비활성화할 수 있습니다. 이제 각 버튼에 이벤트 리스너를 추가해준 다음 핸들러 함수를 작성해줍니다. 

// app.js

function handleAudioMute() {
  myStream
    .getAudioTracks()
    .forEach((track) => (track.enabled = !track.enabled)); // 오디오 비활성화 및 활성화
  if (!audioOn) {
    audioMuteButton.innerText = "Mute";
    audioOn = true;
  } else {
    audioMuteButton.innerText = "Unmute";
    audioOn = false;
  }
}

function handleCameraOff() {
  myStream
    .getVideoTracks()
    .forEach((track) => (track.enabled = !track.enabled)); // 영상 비활성화 및 활성화
  if (!cameraOn) {
    cameraOffButton.innerText = "Camera Off";
    cameraOn = true;
  } else {
    cameraOffButton.innerText = "Camera On";
    cameraOn = false;
  }
}

muteButton.addEventListener("click", handleMuteClick);
cameraButton.addEventListener("click", handleCameraClick);

앞서 만들었던 audioOn과 videoOn 변수를 사용하여 ON/OFF 상태를 사용자에게 알려줄 수 있습니다. 이제 사용자는 아래와 같이 해당 버튼을 클릭하여 영상과 음성을 켜고 끌 수 있습니다.