자바스크립트와 MediaStream API를 사용하여 웹에서의 실시간 그림판 캡처 기능 개발하기
이번 포스트에서는 자바스크립트와 MediaStream API를 활용하여 웹 페이지에서 실시간 그림판 캡처 기능을 개발해보겠습니다.
MediaStream API란?
MediaStream API는 웹 브라우저에서 사용자의 컴퓨터 또는 모바일 장치의 미디어 스트림 (예: 비디오, 오디오)을 사용할 수 있도록 해주는 API입니다. 이를 통해 웹에서 실시간으로 미디어 스트림을 캡처하고 처리할 수 있습니다.
그림판 캡처 기능 개발하기
1. 미디어 스트림 가져오기
먼저, 미디어 스트림을 가져오기 위해 getUserMedia를 사용하여 사용자의 카메라나 화면 공유를 요청합니다.
navigator.mediaDevices.getUserMedia({ video: true })
.then((stream) => {
// 스트림을 가져왔을 때의 동작 작성
})
.catch((error) => {
// 스트림을 가져오지 못했을 때의 동작 작성
});
2. 캔버스에 그림 그리기
드로잉 툴로 사용할 캔버스를 생성하고, mousemove 이벤트를 리스닝하여 마우스 움직임에 따라 패스를 그립니다.
const canvas = document.getElementById("canvas");
const context = canvas.getContext("2d");
let isDrawing = false;
let lastX = 0;
let lastY = 0;
function draw(e) {
if (!isDrawing) return;
context.beginPath();
context.moveTo(lastX, lastY);
context.lineTo(e.offsetX, e.offsetY);
context.stroke();
[lastX, lastY] = [e.offsetX, e.offsetY];
}
canvas.addEventListener("mousemove", draw);
canvas.addEventListener("mousedown", (e) => {
isDrawing = true;
[lastX, lastY] = [e.offsetX, e.offsetY];
});
canvas.addEventListener("mouseup", () => (isDrawing = false));
canvas.addEventListener("mouseout", () => (isDrawing = false));
3. 그림 캡처하기
그림을 캡처하기 위해 canvas.toDataURL을 사용하여 캔버스 이미지를 데이터 URL로 가져옵니다.
function captureImage() {
const dataURL = canvas.toDataURL("image/png");
// 데이터 URL을 서버로 보내거나 다운로드할 수 있습니다.
// 예: axios.post('/api/capture', { image: dataURL })
}
마무리
이렇게 자바스크립트와 MediaStream API를 활용하여 웹에서 실시간 그림판 캡처 기능을 개발할 수 있었습니다. 이를 활용하여 웹 페이지에서 캡처한 이미지를 저장하거나 다른 서비스로 전송할 수 있습니다. 더 자세한 내용은 MediaStream API 문서를 참고하시기 바랍니다.