본문 바로가기

영상녹화2

[자바스크립트] 카메라 영상 녹화 방법 (+무음 비디오 촬영) 웹 브라우저 상에서 노트북이나 스마트폰의 전면/후면 카메라로 촬영하는 동영상을 녹음해야 하는 경우가 있다. 이 글은 별도 라이브러리 없이! 순수 자바스크립트만으로 카메라로 입력 받는 영상(비디오)를 녹화하는 방법을 정리한다. * 참고로 별도 라이브러리 없이 순수 자바스크립트만 사용하는 방식을 바닐라 자바스크립트(Vanilla Javascript)라고 한다. # 카메라 영상 녹화 순서 1. 카메라 영상 취득: MediaStream 2. 취득한 영상 저장: MediaRecorder 3. 녹화된 영상 재생: Blob, Video 옵션 설정에 따라 오디오 없이 비디오만 녹화하면 무음 영상 녹화도 가능하다. ▼이를 위해 사용되는 MediaStream, MediaRecorder, Blob 객체에 대해서는 아래글을 .. 2021. 12. 10.
자바스트립트 Media Stream Recording API: MediaRecorder Media Stream Recording API란 소리나 영상 등의 미디어 스트림을 녹음, 녹화하는 API이다. 이 글은 Media Stream Recording API에 대한 개념과 예제 코드를 정리한다. # Media Stream Recording API란? - Media Stream을 Recording 하는 API로 MediaRecorder객체 하나로 구성되어 있다. - 즉, MediaStream객체를 통해 입력 받는 소리, 영상, 화면 등을 MediaRecorder객체로 녹음 및 녹화하는 API이다. * 주의사항 - MediaRecorder 객체는 브라우저별 지원 여부 확인 필요(2021년 기준, Safari는 지원 안 되는 것으로 확인된다.) # MediaRecorder로 녹음 및 녹화할 수 있.. 2021. 12. 6.