- 미디어 레코더 API는 카메라, 마이크, 화면 등 미디어 스트림을 동영상 파일로 생성할 수 있는 웹 표준 API로, 별도 라이브러리 설치 없이 바로 사용 가능합니다. 🎥
- 카메라 영상을 녹화하여 동영상 파일로 저장하고 다운로드하는 기능을 구현하는 데 활용됩니다. 💾
- Vite를 사용하여 바닐라 자바스크립트 프로젝트를 빠르게 구성하고 VS Code에서 개발을 진행합니다. 🛠️
video태그로 영상 출력,button태그로 녹화 시작/중지/다운로드 제어,p태그로 상태 메시지 표시, 숨겨진a태그로 다운로드 기능을 구현합니다. 🖥️navigator.mediaDevices.getUserMedia()를 사용하여 카메라로부터 미디어 스트림을 얻어video태그에 연결합니다. 📹new MediaRecorder(stream, { mimeType: format })를 통해 미디어 레코더 객체를 생성하며, 이때 스트림과 동영상 포맷(MP4 또는 WebM)을 지정합니다. 🎬MediaRecorder객체의ondataavailable이벤트를 통해 녹화된 데이터 청크를recordedChunks배열에 지속적으로 저장합니다. 📥onstop이벤트 발생 시recordedChunks배열의 데이터를Blob으로 변환하고,URL.createObjectURL()을 사용하여 다운로드 가능한 URL을 생성합니다. 🔗- 생성된 URL을 숨겨진
a태그의href속성에 지정하고,download속성으로 파일명을 설정하여 사용자가 녹화된 영상을 다운로드할 수 있도록 합니다. ⬇️ - 녹화 시작, 중지, 다운로드 등 각 단계에 따라 버튼의 활성화/비활성화 및 상태 메시지를 적절하게 업데이트하여 사용자 경험을 개선합니다. ✨
Recommanded Videos
