자바스크립트를 이용한 브라우저의 동영상 캡처

13 Oct 2023

브라우저에서 동영상을 캡처하고 싶은 경우, 자바스크립트를 사용하여 이를 수행할 수 있습니다. 이 글에서는 MediaStream Recording API를 사용하여 브라우저의 동영상을 캡처하는 방법에 대해 알아보겠습니다.

MediaStream Recording API란?

MediaStream Recording API는 미디어 스트림을 기록하고 캡처하는 기능을 제공합니다. 이 API를 사용하면 웹 브라우저에서 동영상을 쉽게 캡처할 수 있습니다.

사용 방법

먼저, 브라우저에서 미디어 스트림을 가져와야 합니다. navigator.mediaDevices.getUserMedia() 메서드를 사용하여 사용자의 카메라나 마이크에 접근할 수 있습니다.

navigator.mediaDevices.getUserMedia({ video: true, audio: true })
  .then(function(stream) {
    // 미디어 스트림을 성공적으로 가져온 경우, 캡처할 준비를 합니다.
    startRecording(stream);
  })
  .catch(function(error) {
    // 에러 처리
    console.error('미디어 스트림을 가져오는 중 에러 발생:', error);
  });

MediaRecorder 객체를 생성하여 미디어 스트림을 캡처합니다.

let mediaRecorder;

function startRecording(stream) {
  mediaRecorder = new MediaRecorder(stream);

  // 미디어 데이터를 기록할 이벤트 리스너
  mediaRecorder.ondataavailable = function(event) {
    // 캡처된 데이터 사용
    handleData(event.data);
  };

  // 녹화 시작
  mediaRecorder.start();
}

function stopRecording() {
  // 녹화 중지
  mediaRecorder.stop();
}

캡처된 데이터를 처리하는 핸들러를 작성합니다. 이 핸들러에서는 캡처된 데이터를 서버로 업로드하거나, 뷰어에 표시하는 등의 작업을 수행할 수 있습니다.

function handleData(data) {
  // 캡처된 데이터 처리
  // 여기서는 간단히 로컬에 저장하는 예시를 보여줍니다.
  const blob = new Blob([data], { type: 'video/webm' });
  const url = URL.createObjectURL(blob);
  
  const link = document.createElement('a');
  link.href = url;
  link.download = 'captured_video.webm';
  link.click();
}

실행 예시

위의 코드를 이용하여 동영상 캡처를 구현한 예시는 다음과 같습니다.

navigator.mediaDevices.getUserMedia({ video: true, audio: true })
  .then(function(stream) {
    startRecording(stream);
  })
  .catch(function(error) {
    console.error('미디어 스트림을 가져오는 중 에러 발생:', error);
  });

function startRecording(stream) {
  mediaRecorder = new MediaRecorder(stream);

  mediaRecorder.ondataavailable = function(event) {
    handleData(event.data);
  };

  mediaRecorder.start();
}

function stopRecording() {
  mediaRecorder.stop();
}

function handleData(data) {
  const blob = new Blob([data], { type: 'video/webm' });
  const url = URL.createObjectURL(blob);
  
  const link = document.createElement('a');
  link.href = url;
  link.download = 'captured_video.webm';
  link.click();
}

이 예시 코드를 사용하면 브라우저에서 동영상을 캡처하고, 캡처된 동영상을 ‘captured_video.webm’ 파일로 다운로드할 수 있습니다.

결론

자바스크립트를 사용하여 브라우저에서 동영상을 캡처하는 방법에 대해 알아보았습니다. MediaStream Recording API를 활용하면 웹 브라우저에서 동영상을 쉽게 캡처할 수 있으며, 캡처된 동영상을 원하는 대로 처리할 수 있습니다.

자세한 내용은 MDN web docs를 참고하시기 바랍니다.

#javascript #동영상캡처