[javascript] Reveal.js를 이용한 웹캠 실시간 스트리밍

27 Nov 2023

javascript

이번 포스트에서는 Reveal.js를 사용하여 웹캠의 실시간 스트리밍을 구현하는 방법을 알아보겠습니다.

1. Reveal.js 설치

먼저 Reveal.js를 설치해야 합니다. Reveal.js는 HTML 기반의 프레젠테이션 툴킷으로, 웹 페이지를 통해 프레젠테이션을 만들 수 있도록 도와줍니다. 아래 명령어를 사용하여 Reveal.js를 설치합니다.

npm install reveal.js

2. 웹캠 접근 권한 확인

웹캠을 사용하기 위해서는 사용자의 권한이 필요합니다. 따라서 웹페이지에서 웹캠에 접근할 수 있는 권한을 확인하는 코드를 작성해야 합니다.

navigator.mediaDevices.getUserMedia({ video: { facingMode: "user" } })
  .then(function(stream) {
    var video = document.getElementById('video');
    video.srcObject = stream;
    video.play();
  })
  .catch(function(error) {
    console.error('Unable to access the camera/webcam: ', error);
  });

위의 코드는 getUserMedia 함수를 통해 웹캠에 접근하고, video 요소에 스트림을 연결하는 예시입니다.

3. Reveal.js 프레젠테이션에 웹캠 추가

Reveal.js를 초기화하고 웹캠 스트림을 추가하기 위해 HTML 파일에서 다음과 같이 코드를 작성합니다.

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="css/reset.css">
  <link rel="stylesheet" href="css/reveal.css">
  <link rel="stylesheet" href="css/theme/black.css">

  <script src="js/reveal.js"></script>
</head>
<body>
  <div class="reveal">
    <div class="slides">
      <section>
        <h1>웹캠 실시간 스트리밍</h1>
        <video id="video" width="640" height="480"></video>
      </section>
    </div>
  </div>

  <script>
    Reveal.initialize();
  </script>
</body>
</html>

위의 코드에서 video 요소는 웹캠 스트림을 표시할 영역입니다.

4. 웹캠 실시간 스트리밍 확인

위의 코드를 실행하여 웹페이지를 로드하면 웹캠 스트림이 실시간으로 표시됩니다. 사용자의 권한이 필요한 경우 권한을 허용해야 웹캠에 접근할 수 있습니다.

참고 자료

위 포스트에서는 Reveal.js를 사용하여 웹캠의 실시간 스트리밍을 구현하는 방법을 알아보았습니다. Reveal.js를 활용하면 웹페이지에서 강력한 프레젠테이션을 만들 수 있으며, 웹캠 스트리밍과 같은 동적인 요소도 간편하게 추가할 수 있습니다.