그럼에도 불구하고

👨‍💻

카메라 기능 사용하기 본문

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

     

     

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

    'JavaScript > Function implementation' 카테고리의 다른 글

    Google maps platform API 사용하기  (0) 2023.04.14
    이미지 로딩 지연시키기  (0) 2023.03.22
    배경색 무작위 조작하기  (0) 2023.02.02
    숫자 뽑기 게임  (0) 2023.01.31
    Drag & Drop 이용하여 이미지 올리기  (0) 2023.01.26
    'JavaScript/Function implementation' Related Articles more
    Comments