반응형
블로그에서 재밌는 페이지를 만들어보았다. 최신 버전의 브라우저라면 아래에 카메라를 통한 모습이 웹캠처럼 보일것이다.
브라우저에서 mediaDevices.getUserMedia 를 사용하여 카메라를 사용하여 컨트롤할 수가 있다.
아래는 샘플코드이다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<p><video id="cameraview" width="720" height="480"></video></p>
<div style="text-align: center;">
<button id="openBtn">카메라 켜기</button>
<button id="closeBtn">카메라 끄기</button>
</div>
</body>
<script>
var streamVideo
if(!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia )
{
alert("Media Device not supported")
} else {
document.getElementById("openBtn").addEventListener('click',open)
document.getElementById("closeBtn").addEventListener('click',close)
open()
}
function open() {
close()
navigator.mediaDevices.getUserMedia({video:true}).then(stream => {
streamVideo = stream
var cameraView = document.getElementById("cameraview");
cameraView.srcObject = stream;
cameraView.play()
})
}
function close() {
if (streamVideo) {
var track = streamVideo.getTracks()
track[0].stop()
streamVideo = null
}
}
</script>
</html>MediaDevices
카메라, 마이크와 같은 디바이스에 접근할 수 있는 방법을 제공한다.
getUserMedia() API를 사용하야 원하는 미디어장치 스트림을 가져올 수가 있다.
여기서 video 에 대한 스트림을 가져와서 <video> tag의 소스로 연결시켜줌으로써 카메라 입력을 화면에 보여주도록 하였다.
반응형
'개발(인터렉티브)' 카테고리의 다른 글
| 온라인 해쉬 생성기 (4) | 2023.04.16 |
|---|---|
| 브라우저에서 마이크 입력 파형 보기 (10) | 2023.04.08 |
| Phaser 로 자바스크립트 게임 만들기 (지속 업데이트) (5) | 2023.04.02 |
| 자바스크립트 숫자 카운팅 애니메이션 (1) | 2023.03.30 |
댓글