자바스크립트를 활용한 웹에서의 실시간 가상 그림판 앱 개발을 위한 MediaStream API 활용 방법

13 Oct 2023

javascript

웹앱에서 실시간으로 그림을 그리고 공유하기 위해 MediaStream API를 활용하는 방법에 대해 알아보겠습니다.

MediaStream API란?

MediaStream API는 웹 브라우저에서 오디오 및 비디오 스트림을 다루는 기능을 제공하는 API입니다. 이 API를 사용하면 웹앱에서 웹캠의 비디오 스트림을 캡처하거나, 사운드 스트림을 처리할 수 있습니다.

웹캠 스트림 캡처하기

먼저, 원하는 도구로 가상 그림판 앱을 개발하기 위해 웹캠 스트림을 캡처해야 합니다. 이를 위해 다음과 같은 단계를 따릅니다.

getUserMedia 함수를 사용하여 웹캠 스트림을 가져옵니다. 이 함수는 사용자의 웹캠에 액세스할 수 있는 권한을 요청합니다.

navigator.mediaDevices.getUserMedia({ video: true })
  .then((stream) => {
    // 스트림을 성공적으로 가져왔을 때의 처리 로직
  })
  .catch((error) => {
    // 오류 처리 로직
  });

getUserMedia 함수의 video 속성을 true로 설정하여 웹캠 스트림을 가져옵니다.
스트림이 성공적으로 가져와지면, then 블록 안의 로직을 실행합니다. 이곳에서 웹캠 비디오를 화면에 표시하거나, 캡처한 스트림을 다른 처리 로직에 전달할 수 있습니다.

그림 그리기 기능 추가하기

그림 그리기 기능을 추가하기 위해, 캡처한 웹캠 스트림을 캔버스에 표시하고 사용자의 입력을 받아 그림을 그릴 수 있도록 구현해야 합니다. 다음은 예시 코드입니다.

const video = document.querySelector('video');
const canvas = document.querySelector('canvas');
const context = canvas.getContext('2d');

navigator.mediaDevices.getUserMedia({ video: true })
  .then((stream) => {
    video.srcObject = stream;
    video.play();
  })
  .catch((error) => {
    console.error('웹캠 스트림을 가져오는 도중 오류가 발생했습니다:', error);
  });

video.addEventListener('play', () => {
  const drawFrame = () => {
    context.clearRect(0, 0, canvas.width, canvas.height);
    context.drawImage(video, 0, 0, canvas.width, canvas.height);
    requestAnimationFrame(drawFrame);
  };

  drawFrame();
});

canvas.addEventListener('mousedown', (event) => {
  // 그림을 그리는 로직
});

canvas.addEventListener('mousemove', (event) => {
  // 마우스 움직임에 따른 그림 그리기 로직
});

canvas.addEventListener('mouseup', (event) => {
  // 그림 그리기 종료 로직
});

위 코드는 video 요소를 통해 웹캠 스트림을 보여주고, canvas 요소를 사용하여 그림을 그릴 수 있도록 합니다. mousedown 이벤트로 그림 그리기 시작, mousemove 이벤트로 그림 그리기 중, mouseup 이벤트로 그림 그리기 종료 로직을 처리할 수 있습니다.

결론

이처럼 MediaStream API를 활용하여 웹앱에서 실시간 가상 그림판 앱을 개발할 수 있습니다. 웹캠 스트림을 캡처하고, 그림 그리기 기능을 추가하여 사용자들과 즐길 수 있는 인터랙티브한 앱을 만들어보세요.

더 자세한 내용은 MDN 문서를 참고해주세요.

#웹개발 #자바스크립트