자바스크립트와 MediaStream API를 사용하여 웹에서의 실시간 아날로그 시계 앱 개발하기

13 Oct 2023

javascript

이번 블로그 포스트에서는 자바스크립트와 MediaStream API를 활용하여 웹에서 실시간 아날로그 시계 앱을 개발하는 방법에 대해 알아보겠습니다. 해당 앱은 현재 시간을 아날로그 시계로 표시하고, 실시간으로 업데이트될 수 있도록 구현될 것입니다.

필수 준비물

이 튜토리얼을 따라하기 위해서는 다음과 같은 필수 준비물이 필요합니다.

웹 브라우저 (Chrome, Firefox 등)
텍스트 편집기 (VS Code, Sublime Text 등)
기본적인 HTML, CSS, 자바스크립트 지식

프로젝트 구성

우선, index.html 파일을 생성한 후에 다음과 같은 기본 구조를 작성해줍니다.

<!DOCTYPE html>
<html>
<head>
  <title>실시간 아날로그 시계</title>
  <style>
    /* CSS 스타일 작성 */
  </style>
</head>
<body>
  <canvas id="clock"></canvas>

  <script>
    // 자바스크립트 코드 작성
  </script>
</body>
</html>

위의 코드에서 <canvas> 태그는 시계를 그리기 위한 공간을 제공합니다. <script> 태그 안에는 자바스크립트 코드를 작성할 것입니다.

시계 그리기

이제 자바스크립트 코드를 작성하여 실시간 아날로그 시계를 그려보겠습니다.

// 시계 그리기
function drawClock() {
  // 캔버스 요소와 2D 컨텍스트 가져오기
  var canvas = document.getElementById("clock");
  var context = canvas.getContext("2d");

  // 시계 중심 위치 설정
  var centerX = canvas.width / 2;
  var centerY = canvas.height / 2;

  // 시계 반지름 설정
  var radius = Math.min(centerX, centerY) * 0.9;

  // 현재 시간 가져오기
  var now = new Date();
  var hours = now.getHours();
  var minutes = now.getMinutes();
  var seconds = now.getSeconds();

  // 시간 계산
  var hourAngle = (hours % 12) * 30 + minutes / 2;
  var minuteAngle = minutes * 6;
  var secondAngle = seconds * 6;

  // 시계판 그리기
  context.clearRect(0, 0, canvas.width, canvas.height);
  context.fillStyle = "black";
  context.beginPath();
  context.arc(centerX, centerY, radius, 0, 2 * Math.PI);
  context.fill();

  // 시침 그리기
  context.strokeStyle = "white";
  context.lineWidth = 8;
  context.beginPath();
  context.moveTo(centerX, centerY);
  context.lineTo(centerX + Math.sin(hourAngle * Math.PI / 180) * radius * 0.5,
    centerY - Math.cos(hourAngle * Math.PI / 180) * radius * 0.5);
  context.stroke();

  // 분침 그리기
  context.strokeStyle = "white";
  context.lineWidth = 5;
  context.beginPath();
  context.moveTo(centerX, centerY);
  context.lineTo(centerX + Math.sin(minuteAngle * Math.PI / 180) * radius * 0.8,
    centerY - Math.cos(minuteAngle * Math.PI / 180) * radius * 0.8);
  context.stroke();

  // 초침 그리기
  context.strokeStyle = "red";
  context.lineWidth = 2;
  context.beginPath();
  context.moveTo(centerX, centerY);
  context.lineTo(centerX + Math.sin(secondAngle * Math.PI / 180) * radius * 0.9,
    centerY - Math.cos(secondAngle * Math.PI / 180) * radius * 0.9);
  context.stroke();

  // 1초마다 시계 그리기
  setTimeout(drawClock, 1000);
}

// 페이지 로딩 시 시계 그리기 함수 호출
drawClock();

위의 코드는 drawClock() 함수를 정의하고, 이 함수 안에서 실시간으로 아날로그 시계를 그리는 로직을 작성합니다. 각 시침, 분침, 초침의 위치와 각도를 계산하여 캔버스 상에 그려줍니다. 마지막으로 setTimeout() 함수를 사용하여 1초마다 시계를 업데이트하도록 설정합니다.

웹캠에서 현재 시간 읽어오기

이제 MediaStream API를 사용하여 웹캠에서 현재 시간을 읽어오겠습니다. 이를 위해서는 다음과 같은 추가 코드를 작성해야합니다.

// 웹캠에서 현재 시간 읽어오기
function readWebcamTime() {
  navigator.mediaDevices.getUserMedia({ video: true })
    .then(function (stream) {
      var video = document.createElement("video");
      video.srcObject = stream;
      video.play();

      video.addEventListener("loadedmetadata", function () {
        var canvas = document.createElement("canvas");
        var context = canvas.getContext("2d");
        canvas.width = this.videoWidth;
        canvas.height = this.videoHeight;
        setInterval(function () {
          context.drawImage(video, 0, 0, canvas.width, canvas.height);
          var imageData = context.getImageData(0, 0, canvas.width, canvas.height);
          var pixelData = imageData.data;

          // 픽셀 데이터를 분석하여 시간 추출 및 출력
          // ...
        }, 1000);
      });
    })
    .catch(function (error) {
      console.error("웹캠 접근 오류:", error);
    });
}

// 페이지 로딩 시 웹캠에서 현재 시간 읽어오기 함수 호출
readWebcamTime();

위의 코드는 navigator.mediaDevices.getUserMedia() 함수를 사용하여 웹캠에 접근합니다. video 속성을 true로 설정하여 비디오 스트림을 얻어옵니다. 그 후 loadedmetadata 이벤트에 대한 리스너를 등록하여 비디오 로딩이 완료되면 캔버스를 생성하고, 1초마다 웹캠 이미지를 캔버스에 그려줍니다. 그리고 context.getImageData() 함수를 사용하여 픽셀 데이터를 추출하고, 해당 데이터를 분석하여 현재 시간을 추출하고 출력하는 코드를 작성해야합니다. 해당 코드는 개발자의 필요에 따라 작성되어야 합니다.

마무리

이제 위의 코드를 index.html 파일에 추가하고, 웹 브라우저에서 해당 파일을 열어보면 실시간 아날로그 시계 앱이 동작하는 것을 확인할 수 있습니다. 웹캠으로부터 현재 시간을 읽어와서 시계를 업데이트하는 기능을 구현하였습니다. 필요에 따라 시계의 스타일 및 추가 기능을 개선해볼 수도 있습니다.

더 자세한 내용은 다음 자료를 참고하시기 바랍니다.

이상으로 웹에서의 실시간 아날로그 시계 앱 개발에 관한 내용을 소개해드렸습니다. 개발하시기 전에 필요한 기본 지식과 문서를 잘 참고하여 진행하시면 좋을 것입니다. 만약 궁금한 점이 있다면 언제든지 문의해주세요.