자바스크립트와 MediaStream API를 사용하여 웹에서의 실시간 전자 펜 앱 개발하기

13 Oct 2023

javascript

이번 기술 블로그에서는 자바스크립트와 MediaStream API를 활용하여 웹에서 실시간으로 전자 펜 앱을 개발하는 방법에 대해 소개하겠습니다.

MediaStream API란?

MediaStream API는 웹 브라우저에서 오디오나 비디오와 같은 미디어 스트림에 접근할 수 있는 API입니다. 이 API를 활용하면 웹에서 실시간으로 마치 전자 펜을 사용하는 듯한 기능을 구현할 수 있습니다.

전자 펜 앱 개발 과정

전자 펜 앱을 개발하기 위해 다음과 같은 단계를 따릅니다:

웹카메라에 액세스하여 사용자의 웹캠에서 비디오 스트림을 받아옵니다.
받아온 비디오 스트림을 화면에 표시합니다.
사용자 마우스 또는 터치 입력을 감지하고 해당 위치에 선을 그립니다.

예제 코드

// 웹캠 액세스
navigator.mediaDevices.getUserMedia({ video: true })
  .then(function (stream) {
    const videoElement = document.getElementById('video');
    videoElement.srcObject = stream;
  })
  .catch(function (err) {
    console.error('웹캠 액세스 에러:', err);
  });

// 마우스 이벤트 핸들링
const canvas = document.getElementById('canvas');
const context = canvas.getContext('2d');
let isDrawing = false;
let lastX = 0;
let lastY = 0;

canvas.addEventListener('mousedown', (e) => {
  isDrawing = true;
  [lastX, lastY] = [e.clientX, e.clientY];
});

canvas.addEventListener('mousemove', (e) => {
  if (!isDrawing) return;

  context.beginPath();
  context.moveTo(lastX, lastY);
  context.lineTo(e.clientX, e.clientY);
  context.stroke();
  [lastX, lastY] = [e.clientX, e.clientY];
});

canvas.addEventListener('mouseup', () => {
  isDrawing = false;
});

canvas.addEventListener('mouseout', () => {
  isDrawing = false;
});

위 코드에서는 getUserMedia() 함수를 사용하여 웹캠에 접근하고, 받아온 비디오 스트림을 <video> 엘리먼트에 표시합니다. 그리고 마우스 이벤트를 감지하여 사용자의 입력에 따라 선을 그려주는 기능을 제공합니다.

결론

이렇게 자바스크립트와 MediaStream API를 사용하여 웹에서 실시간 전자 펜 앱을 개발할 수 있습니다. 이를 활용하면 웹 브라우저에서 간편하게 전자 펜을 사용할 수 있는 기능을 구현할 수 있습니다. 더 자세한 내용은 MediaStream API 문서를 참고하시기 바랍니다.

목차

MediaStream API란?

전자 펜 앱 개발 과정

예제 코드

결론