[JS] Day19 - Webcam Fun

jiseong·2021년 9월 5일

T I Learned

목록 보기

53/291

demo:

demo사이트

github:

Danji-ya

Day19 - Webcam Fun

🎯 기능 요구사항

브라우저에서 웹캠을 띄워본다.
웹캠에 캡처 기능을 구현한다.
+ 웹캠 끄기 기능을 추가한다.

🚀 배운 점

웹캠 띄우기

<video class="player"></video>

const video = document.querySelector('.player');

function getVideo() {
        const options = { 
            video:true, 
            audio:false 
        };  

        navigator.mediaDevices.getUserMedia(options)
        .then(localMediaStream => {
            video.srcObject = localMediaStream;
            video.play();
        })
        .catch(err => {
            console.error("error", err);
        });
}

navigator.mediaDevices.getUserMedia을 이용하면 사용자의 허가에 따라 웹캠 스트리밍 데이터를 가져올 수 있다.
해당 데이터를 <video> 요소에 넣고 play() 메서드를 이용하면 스트리밍되는 웹캠을 띄울 수 있다.

웹캠 끄기

function clearVideo() {
        const stream = video.srcObject;
        const tracks = stream.getTracks();
      
        tracks.forEach(track => track.stop());
        video.srcObject = null;

        ctx.clearRect(0, 0, canvas.width, canvas.height);
}

<video> 요소의 srcobject 속성 에서 들어오는 비디오 MediaStream 을 가져온 다음 스트림의 getTracks() 메서드를 호출 하여 스트림의 트랙 배열을 가져와 각 스트림의 트랙 배열을 stop() 메서드를 통해 중지시킬 수 있었다.

그 후, 기존에 남아있는 srcobject 속성 초기화 및 캔버스에 해당 웹캠을 그려주고 있었기 때문에 캔버스도 초기화 시켜주었다.

웹캠 캡쳐

    <div class="photobooth">
        <div class="controls">
            <button class="take-photo">Take Photo</button>
            <button class="video-on">video on</button>  
            <button class="video-off">video off</button>   
        </div>
    
        <canvas class="photo"></canvas>
        <video class="player"></video>
        <div class="strip"></div>
    </div>
    
    <audio class="snap" src="./snap.mp3" hidden></audio>

const strip = document.querySelector('.strip');
const snap = document.querySelector('.snap');

function takePhoto() {
    snap.currentTime = 0;
    snap.play();

    const photoURL = canvas.toDataURL('image/jpeg');
    const link = document.createElement('a');
    link.href = photoURL;
    link.setAttribute('download', 'undefined');
    link.innerHTML = `<img src="${photoURL}" />`;
    strip.insertBefore(link, strip.firstChild);
}