노마드코더 줌 클론코딩 - #3.0 User Video

출처 : https://nomadcoders.co/noom/lectures/3077

All Courses – 노마드 코더 Nomad Coders

#3.0 User Video

유저로부터 비디오를 가져온 뒤, 마이크와 카메라를  on/off 시킬 버튼을 생성할 것이다. 

* javascript를 사용하여 유저 컴퓨터의 모든 카메라 list 를 받아올 수 있다. 

 

먼저 home.pug 에 video 를 추가한다. 

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 
            video#myFace(autoplay, playsinline, width = "400", height = "400")
        script(src="/socket.io/socket.io.js")    
        script(src="/public/js/app.js")

 

Line 13 playsinline : 모바일 브라우저가 필요로 하는 property 이다. 모바일기기로 비디오를 재생할 때, 그 비디오가 전체화면 모드로 실행되는 것을 방지해준다. (웹사이트에서만 실행 됨)

 

 

 

다음 frontend에서 getMedia 함수를 생성하자. 먼저 stream을 선언한다. (* stream : 비디오와 오디오가 결합된 것 )

//app.js

const socket = io();

const myFace = document.getElementById("myFace");

let myStream;

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

getMedia();

-. getMedia() 는 아래 링크 참고

https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia

MediaDevices.getUserMedia() - Web APIs | MDN

 

테스트 실행해보면, 유저에게 카메라와 마이크 권한을 요청한다.

 

그럼 아래와 같이 console 창에서 stream 을 확인할 수 있고,

이 stream 을 home.pug 에서 생성한 myFace 안으로 넣으면 된다.

(console.log(stream) 을 myFace.srcObject = myStream 으로 변경)

 

이제 소리와 화면을 on/off 할 수 있도록 버튼을 생성해보자.

home.pug 에 button을 추가해주고

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 
            video#myFace(autoplay, playsinline, width = "400", height = "400")
            button#mute Mute
            button#camera Turn Camera Off
        script(src="/socket.io/socket.io.js")    
        script(src="/public/js/app.js")

 

버튼을 getElementID를 통해 frontend 로 가져온다. 

 

 

function handleMuteClick() 에서는 음소거 여부를 추적할 수 있는 variable 이 필요하고, 

function handleCameraClick()에서는 카메라가 켜져 있거나 꺼져 있는지 추적하는 variable 이 필요하다.

(현 상태를 파악해야 반대 상태로 전환할 수 있기 때문)

이를 위해 변수 두 개를 선언해준다.

let muted = false;

let cameraOff = false;

 

 

const socket = io();

const myFace = document.getElementById("myFace");
const muteBtn = document.getElementById("mute");
const cameraBtn = document.getElementById("camera");

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

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

getMedia();
function handleMuteClick() {
    if (!muted) {
      muteBtn.innerText = "Unmute";
      muted = true;
    } else {
      muteBtn.innerText = "Mute";
      muted = false;
    }
  }
function handleCameraClick() {
   if (cameraOff) {
     cameraBtn.innerText = "Turn Camera Off";
     cameraOff = false;
   } else {
     cameraBtn.innerText = "Turn Camera On";
     cameraOff = true;
   }
 }

muteBtn.addEventListener("click", handleMuteClick);
cameraBtn.addEventListener("click", handleCameraClick);

버튼을 클릭했을 때의 Event Listener 를 추가해주고 이에 대한 function 도 작성해준다.