힘내라 일처리

Html5 Webcam 간단한 예제로 사용법 알아보기 본문

알아보기

Html5 Webcam 간단한 예제로 사용법 알아보기

일처리 2022. 6. 16. 01:43
반응형

Webcam 표시 예시

HTML5 가 나온 이후, 어쩌면 그 무렵 브라우저를 통해서 할 수 있는 일들이 많아졌습니다.

별도의 스카이프 같은 프로그램을 설치 하지 않고, 브라우저 상에서 화상 채팅이 가능해지기도 하고, 오피스 같은 프로그램조차도 브라우저를 통해서 접근할 수 있게 되었습니다.

그만큼 브라우저 엔진이 무거워 지기는 했지만, 반대로 무거운 브라우저 엔진 하나로 아주 많고 다양한 서비스를 별도로 설치된 프로그램 이상으로 이용하기 수월해진 것이지요.

 

 

서론이 잡다하게 길었고 다음과 같이 따라하면 됩니다.

 

HTML 파일부터 보시죠

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="./main.js"></script>
    <title>Camera Test</title>
</head>
<body>
    <video id="cameraview" width="720" height="480"></video>
    <script>
        mainInit();
    </script>
</body>
</html>

카메라 영상을 표시해주는 핵심 태그는 <video/> 입니다.

기존에 사용하던 해당 태그의 사용 방식과는 달리 src를 직접 입력해주지 않는데, 이는 js단에서 웹캠 stream 객체를 전달해주기 위함입니다.

 

JS 파일은 다음과 같습니다.

// Init camera
function camInit(stream) {
    var cameraView = document.getElementById("cameraview");
    cameraView.srcObject = stream;
    cameraView.play();
}

function camInitFailed(error) {
    console.log("get camera permission failed : ", error)
}

// Main init

function mainInit() {
    // Check navigator media device available
    if(!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia )
    {
        // Navigator mediaDevices not supported
        alert("Media Device not supported")
        return;
    }

    navigator.mediaDevices.getUserMedia({video:true})
        .then(camInit)
        .catch(camInitFailed);

}

cameraView.srcObject = stream 으로 넣는 부분이 보이실 건데 이부분이 HTML 코드에서 src 프로퍼티를 입력하지 않은 이유가 됩니다.

 

카메라 사용 권한 요청

 

여기서 주의 깊게 보아야 하는 부분은 navigator.mediaDevices.getUserMedia({video:true}) 인데, 이 코드가 브라우저에서 카메라의 사용 권한에 대한 요청및 그 결과에 대한 처리를 하게 됩니다.

성공 하게 된다면, then() 에 등록된 함수가 실행이 되고, 실패를 하면 catch() 에 등록된 함수가 실행이 됩니다.

 

예제를 따라 해보고싶다면 다음과 같은 파일 배치로 로컬에서 바로 로드해서 테스트 해볼 수 있습니다.

반응형
저작자표시 비영리 변경금지

'알아보기' 카테고리의 다른 글

Tio Tmux, Byobu랑 사용하기 좋은 시리얼 모니터 프로그램 사용법 알아보기  (0) 2022.06.30
리눅스 로컬 프로세스 간의 통신은 TCP통신과 UDS통신중 어느게 성능이 좋을까?  (0) 2022.06.24
Caddy 알아보기 / http서버 / 리버스 프록시  (0) 2022.04.20
"eabi" 가 뭘까 / abi / eabi / gnueabi  (0) 2022.04.04
playing Video on terminal with ffmpeg and libcaca  (0) 2021.11.22
'알아보기' Related Articles more
Comments