JavaScript/Function implementation

카메라 기능 사용하기

zenghyun 2023. 3. 23. 19:34

카메라 기능을 사용하는 웹 페이지를 만들어보자

 

● 웹 카메라를 사용해 사이트 내 유저의 카메라 화면을 표시하고 싶을 때 

 

웹 카메라로 영상과 사운드의 사용이 가능하며, 반응형 콘텐츠와 실시간 비디오챗 등에 이용한다.

 

웹 카메라는 getUserMedia()를 사용한다. video 요소 srcObject 속성에 웹 카메라 스트림을 지정하고, video 요소에는 autoplay 속성을 지정한다. autoplay 속성을 지정하지 않으면 브라우저에 따라 화면의 포기가 지연되는 경우가 있다. 

 

HTML

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="utf-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title></title>
 
  <script src="main.js" defer></script>
</head>
<body class="chapter-11">
  <main class="centering">
    <button onclick="loadAndPlay()">재생</button>
    <button onclick="stop()">정지</button>
 
    <video id="myVideo" width="640" height="480" autoplay></video>
  </main>
</body>
</html>
cs

 

JavaScript

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
let stream;
 
async function loadAndPlay() {
  const video = document.getElementById('myVideo');
  stream = await getDeviceStream({
    video: { width: 640, height: 320 },
    audio: false
  });
  video.srcObject = stream;
}
 
function stop() {
  const video = document.getElementById('myVideo');
  const tracks = stream.getTracks();
 
  tracks.forEach((track) => {
    track.stop();
  });
 
  video.srcObject = null;
}
 
function getDeviceStream(option) {
  if ('getUserMedia' in navigator.mediaDevices) {
    return navigator.mediaDevices.getUserMedia(option);
  } else {
    return new Promise(function(resolve, reject) {
      navigator.getUserMedia(option, resolve, reject);
    });
  }
}
 
cs

 

 

저작자표시 비영리 (새창열림)