목표
- 사용자로부터 영상을 가져와 화면에 보여주기
- 마이크 음소거나 카메라 켜고 끄는 기능을 제어하는 버튼을 구현
- 카메라 여러개인 경우를 대비하여 사용하던 카메라를 바꿀 수 있게 할 것임.
1. 영상 출력 요소 추가하기
myFace라는 부를 영상을 만들어야함.
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 Zoom
//MVP.css는 우리가 태그에 class나 id같은 특성을 추가하지 않아도 자동으로 스타일을 적용해주는 라이브러리다.
body
//h1 It works!
header
h1 Zoom
main
video#myFace(autoplay, playsinline, width="400", height="400")
script(src="/socket.io/socket.io.js")
script(src="/public/js/app.js")
main을 보면 자동재생이 되도록 autoplay 속성을 추가했고, 모바일 브라우저에서 전체화면이 되지 않고 웹 사이트 안에서만 실행되도록 playsinline속성도 추가했다.
2. 스트림 생성하기
myFace에 영상을 표시하려면 스트림(stream)으로 영상을 받아 와야 함. 데이터를 전달하는 줄기 라는 뜻으로 이해하면 편하다. 자바 스크립트 API에서 제공되는 메서드를 통해 영상과 소리를 받아오는 스트림을 만들 것이다.
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();
사용한 API메서드는 navigator.mediaDevices.getUserMedia다.
영상과 소리를 모두 받아와야 하니 audio와 video를 true로 설정했다.
가져오는데 문제가 생길 것을 대비해 예외처리 구문도 적어주었다.
※getUserMedia 메서드를 통한 스트림 반환은 비동기적으로 처리되므로 함수 getMedia를 async-await로 처리했다.
<실행 시>
사뿐히 허용해주면 카메라와 마이크를 인식하는 것을 확인할 수 있다.
녹화중인 빨간동그라미를 확인 가능하고, 콘솔창에서도 관련 정보가 잘 출력됨을 확인할 수 있다.
3. 영상 출력하기
스트림을 콘솔에 출력하는 대신 화면에 직접 표시하려면 스트림을 myFace 안에 넣어야함.
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,
});
myFace.srcObject = myStream;
} catch(e) {
console.log(e);
}
}
getMedia();
<결과 화면>
카메라가 잘 출력된다 !
4. 버튼 추가하기
영상을 키고 끌 수 있는 버튼까지 추가해주자.
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 Zoom
//MVP.css는 우리가 태그에 class나 id같은 특성을 추가하지 않아도 자동으로 스타일을 적용해주는 라이브러리다.
body
//h1 It works!
header
h1 Zoom
main
div#myStream
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")
js에도 기능을 추가해야 한다.
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;
} 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 On";
cameraOff = true;
}else{
cameraBtn.innerText = "Turn Camera Off";
cameraOff = false;
}
}
muteBtn.addEventListener("click", handleMuteClick);
cameraBtn.addEventListener("click", handleCameraClick);
getElementById 메서드로 각 버튼을 선택한 다음 현 상태를 나타내는 변수 muted와 cameraOff를 각각 선택했음.
muteBtn을 클릭하면 muted가, cameraBtn을 클릭하면 cameraOff가 상태를 바꿔가며 관리할 것임.
<결과 화면>
클릭 시 unmuted와 turn camera off로 번갈아 가며 표시됨을 확인할 수 있음.
