Call Controls

app.js

const frontendsocket = io();

const myface = document.getElementById("myface");
const mute = document.getElementById("mute");
const camera = document.getElementById("camera");
const camerasSelect = document.getElementById("cameras");

let myStream;
let muted = false;
let cameraOff = false;

async function getCamera() {
  try {
    const devices = await navigator.mediaDevices.enumerateDevices(); 
//장치 리스트 가져오기
    const cameras = devices.filter((device) => device.kind === 
"videoinput"); 
//videoinput만 필터링
    cameras.forEach((camera) => {
      const option = document.createElement("option");
      option.value = camera.deviceId; //카메라의 고유 값을 value에 넣기
      option.innerText = camera.label; //사용자가 선택할 때는 label을 보고 선택 가능하게 하기
      camerasSelect.appendChild(option); //카메라 정보를 option 항목에 넣어주기
    });
  } catch (e) {
    console.log(e);
  }
}

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

getMedia();

function handleMuteButton() {
  myStream
    .getAudioTracks()
    .forEach((track) => (track.enabled = !track.enabled));
  if (!muted) {
    mute.innerText = "Unmute";
    muted = true;
  } else {
    mute.innerText = "Mute";
    muted = false;
  }
}
function handleCameraButton() {
  myStream
    .getVideoTracks()
    .forEach((track) => (track.enabled = !track.enabled));
  if (!cameraOff) {
    camera.innerText = "Turn Camera On";
    cameraOff = true;
  } else {
    camera.innerText = "Turn Camera Off";
    cameraOff = false;
  }
}

mute.addEventListener("click", handleMuteButton);
camera.addEventListener("click", handleCameraButton);

home.pug

doctype html
html(lang="en")
    head
        meta(charset="UTF-8")
        meta(http-equiv="X-UA-Compatible", content="IE=edge")
        meta(name="viewport", content="width=device-width, initial-scale=1.0")
        title Noom
        link(rel="stylesheet", href="https://unpkg.com/mvp.css")
    body 
        header
            h1 Noom
        main
            div#mystream
                	video#myface(autoplay,playsinline,width="100",height="100")
                button#mute Mute
                button#camera Turn Camera Off
                select#cameras
        script(src="/socket.io/socket.io.js")
        script(src="/public/js/app.js")