MediaStream API를 사용하여 웹에서 사진 및 비디오 캡처 기능 구현하기

13 Oct 2023

javascript

개요

웹 개발에서 사진이나 비디오 캡처 기능을 구현하기 위해서는 MediaStream API를 사용할 수 있습니다. MediaStream API는 미디어 스트림을 제어하고 접근할 수 있는 기능을 제공합니다. 이를 활용하여 웹에서 사진 및 비디오를 캡처하는 기능을 구현할 수 있습니다.

코드 예제

다음은 getUserMedia 함수를 사용하여 웹캠에 접근하고, 사진을 캡처하는 코드의 예제입니다.

navigator.mediaDevices.getUserMedia({ video: true })
  .then((stream) => {
    const video = document.createElement('video');
    video.srcObject = stream;
    video.play();

    const canvas = document.createElement('canvas');
    canvas.width = video.videoWidth;
    canvas.height = video.videoHeight;

    setInterval(() => {
      // 스트림에서 현재 프레임을 캡처하여 캔버스에 그립니다.
      canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);

      // 캔버스에서 이미지 데이터를 가져옵니다.
      const imageData = canvas.toDataURL('image/jpeg');

      // 이미지 데이터를 사용하여 원하는 동작을 수행합니다.
      // 예: 이미지를 표시하거나 서버에 전송합니다.
      console.log('Captured image data:', imageData);
    }, 1000);
  })
  .catch((error) => {
    console.error('Error accessing webcam:', error);
  });

위의 코드는 웹캠에 접근하고, 1초마다 현재 프레임을 캡처하여 이미지 데이터로 가져오는 예제입니다. 사용자의 웹캠이 정상적으로 작동하면, 이미지 데이터가 콘솔에 출력됩니다.

참고 자료

#웹캠 #미디어스트림