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

2022. 12. 14. 11:51·개발/Projects

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

 

먼저, 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 상태를 사용자에게 알려줄 수 있습니다. 이제 사용자는 아래와 같이 해당 버튼을 클릭하여 영상과 음성을 켜고 끌 수 있습니다.

 

'개발 > Projects' 카테고리의 다른 글

[WebRTC] 3. 카메라 오디오 전환하기  (0) 2022.12.14
[WebRTC] 1. 영상 채팅 화면과 소리 출력하기  (0) 2022.12.14
[WebSocket/Socket IO] 채팅 서비스 구현 10. 관리자 패널 추가하기  (0) 2022.12.07
'개발/Projects' 카테고리의 다른 글
  • [WebRTC] 4. 채팅방 기능 구현하기
  • [WebRTC] 3. 카메라 오디오 전환하기
  • [WebRTC] 1. 영상 채팅 화면과 소리 출력하기
  • [WebSocket/Socket IO] 채팅 서비스 구현 10. 관리자 패널 추가하기
휘Hwi
휘Hwi
여행, 사진, 개발, 책 이야기를 기록하는 여행자 휘의 블로그 𓂍
Klook.com
  • 휘Hwi
    휘: 끝나지 않은 이야기
    휘Hwi
  • 전체
    오늘
    어제
    • 분류 전체보기
      • 기록
        • 일상 에세이
        • 인사이트
        • 투자와 재테크
        • 코인 이야기
        • 아카이빙
        • 집무실 레터
        • 사랑에 대하여
        • 번역 이야기(完)
        • 프리랜서 일지(完)
      • 여행
        • 🌎 세계 여행기 S1 (完)
        • 🌊 삼삼한 여행기 (完)
        • 🚶 온더로드
        • 🇯🇵 일본
        • 🏝️ 발리
        • 🇻🇳 베트남
        • 🇱🇰 스리랑카
        • 🇮🇳 인도
        • 🇹🇭 태국
        • 🇸🇬 싱가포르
        • 🇦🇺 호주
        • 🇭🇰 홍콩
        • 🇰🇷 한국
        • 🍚 여행자의 한 끼
        • ℹ️ 여행 정보
      • 사진
        • 사진가
        • 사진 이론과 생각
        • 사진 관련 정보
      • 영상
        • 파이널컷 모션 공부
        • 고프로 GoPro
        • 영상 관련 정보
      • 책
        • 책 읽고 쓰기
      • 개발
        • 티스토리
        • Internet
        • HTML
        • CSS
        • JavaScript
        • Typescript
        • React
        • Node.js
        • Express
        • NestJS
        • Python
        • Django
        • MySQL
        • MongoDB
        • AWS
        • Deployment
        • Terminal
        • Git
        • Glossaries
        • Articles
        • Projects
        • TIL;
      • 미분류
  • 인기 글

  • 최근 글

  • hELLO· Designed By정상우.v4.10.3
휘Hwi
[WebRTC] 2. 영상 및 음성 켜고 끄기
상단으로

티스토리툴바