6일차

웹캠과 리액트를 연결하는 것이 오늘의 목표

 

구글링을 통해 웹캠과 리액트를 연결할 수 있는 코드를 발견

import React, { useRef, useEffect } from 'react';

const Webcam = () => {
    const videoRef = useRef(null);

    const getCamera = () => {
        
        navigator.mediaDevices.getUserMedia({
            video:true
        })
        .then((stream) => {
            let video = videoRef.current;
            video.srcObject = stream;
            video.onloadedmetadata = () => {
                video.play();
            };
        })
        .catch((error) => {
            console.log(error);
        })
    }

    useEffect(() => {
        getCamera();
    }, [videoRef]);

    return(
        <div className='webcam-layout-container'>
            <video className='webcam-container' ref={videoRef}/>
        </div>
    )
};

export default Webcam;

 

생소한 함수들이라 하나하나 다 살펴보고자 한다

 

** navigator.mediaDevices.getUserMedia

   - 웹 브라우저에서 사용자의 카메라에 접근하여 비디오 스트림을 요청

   - 메서드는 비디오 기능만 필요할 때 사용

 

.then((stream) => {
    let video = videoRef.current;
    video.srcObject = stream;
    video.onloadedmetadata = () => {
        video.play();
    };

 

** let video = videoRef.current;

   - videoRef.current는 현재 DOM의 비디오 요소를 참조 => video는 실제 <video> HTML 요소를 가리킴

 

** video.srcObject = stream;

   - 비디오 요소에 비디오 스트림을 연결

   - stream은 getUserMedia()로부터 받은 비디오 스트림 => 실시간으로 캡처된 영상 데이터가 담겨 있음

 

** video.onloadedmetadata

   - 메타데이터가 로드된 후에 발생 => 자동으로 비디오를 재생(video.play())

 

useEffect(() => {
    getCamera();
}, [videoRef]);

 

useEffect를 사용해 페이지가 시작될 때 자동으로 getCamera를 호출해 바로 스트리밍을 볼 수 있게 설정

 

 

※ 메타 데이터

   - 데이터에 대한 데이터를 의미

   - 비디오와 관련하여 메타데이터는 비디오 파일의 내용을 설명하는 다양한 정보를 포함

        ex) 파일 이름, 해상도, 파일 형식, 프레임 등