Colin's Blog
[javascript] 자바스크립트로 모바일 디바이스의 동영상 촬영 기능 구현

모바일 디바이스에서 동영상을 촬영하는 기능은 현대적인 웹 어플리케이션에서 매우 중요한 기능입니다. 이 기능을 자바스크립트를 사용하여 구현하는 방법에 대해 알아보겠습니다.

1. getUserMedia API 사용하기

getUserMedia API는 웹 브라우저에서 사용자의 미디어 장치를 액세스하는 데 사용됩니다. 이를 통해 카메라와 마이크 같은 장치에 접근하여 동영상을 촬영하고 스트림을 생성할 수 있습니다.

navigator.mediaDevices.getUserMedia({ video: true })
  .then(stream => {
    const videoElement = document.createElement('video');
    videoElement.srcObject = stream;
    document.body.appendChild(videoElement);
  })
  .catch(error => {
    console.error('Error accessing media devices:', error);
  });

위의 코드는 getUserMedia API를 사용하여 동영상 스트림을 얻어내고, 이를 video 요소의 srcObject로 설정하여 화면에 띄우는 예시입니다. 이 코드를 실행하면 브라우저는 사용자에게 카메라 접근 권한을 요청하게 됩니다.

2. MediaRecorder API를 사용하여 동영상 녹화하기

MediaRecorder API는 브라우저에서 스트림에 있는 미디어 데이터를 기록하고 저장할 수 있는 기능을 제공합니다. 이를 사용하여 모바일 디바이스의 동영상을 녹화할 수 있습니다.

let mediaRecorder;
const recordedChunks = [];

function startRecording() {
  mediaRecorder = new MediaRecorder(userMediaStream);
  
  mediaRecorder.ondataavailable = event => {
    recordedChunks.push(event.data);
  };
  
  mediaRecorder.start();
}

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

function saveRecording() {
  const blob = new Blob(recordedChunks, { type: 'video/webm' });
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url;
  a.download = 'recording.webm';
  document.body.appendChild(a);
  a.click();
}

위의 코드는 startRecording 함수를 호출하면 MediaRecorder를 생성하고 녹화를 시작합니다. 녹화된 데이터는 ondataavailable 이벤트 핸들러에서 recordedChunks 배열에 저장됩니다. stopRecording 함수를 호출하여 녹화를 멈출 수 있으며, saveRecording 함수를 호출하여 녹화된 동영상을 저장할 수 있습니다.

결론

위의 코드를 사용하면 자바스크립트로 모바일 디바이스의 동영상 촬영 기능을 구현할 수 있습니다. getUserMedia API를 사용하여 스트림을 얻어내고, MediaRecorder API를 사용하여 동영상을 녹화할 수 있습니다. 이를 활용하여 웹 어플리케이션에서 동영상 촬영 기능을 제공할 수 있습니다.

참고 자료

© 2018 Colin. All rights reserved.