본문 바로가기

getUserMedia2

[자바스크립트] 카메라 영상 녹화 방법 (+무음 비디오 촬영) 웹 브라우저 상에서 노트북이나 스마트폰의 전면/후면 카메라로 촬영하는 동영상을 녹음해야 하는 경우가 있다. 이 글은 별도 라이브러리 없이! 순수 자바스크립트만으로 카메라로 입력 받는 영상(비디오)를 녹화하는 방법을 정리한다. * 참고로 별도 라이브러리 없이 순수 자바스크립트만 사용하는 방식을 바닐라 자바스크립트(Vanilla Javascript)라고 한다. # 카메라 영상 녹화 순서 1. 카메라 영상 취득: MediaStream 2. 취득한 영상 저장: MediaRecorder 3. 녹화된 영상 재생: Blob, Video 옵션 설정에 따라 오디오 없이 비디오만 녹화하면 무음 영상 녹화도 가능하다. ▼이를 위해 사용되는 MediaStream, MediaRecorder, Blob 객체에 대해서는 아래글을 .. 2021. 12. 10.
자바스크립트 Media Capture and Streams API: MediaStream, MediaStreamTrack # 자바스크립트에서 미디어를 다루는 방법 자바스크립트에서 미디어를 다루는 주요 API는 4가지가 있다. 1. Media Capture and Streams API (=Meida Stream API) - 마이크, 카메라 등을 이용해 들어오는 (Media Stream: 오디오, 비디오, 화면 등) 데이터를 다룬다. 2. MediaStream Recording API - 미디어 스트림(Media Stream: 오디오, 비디오, 화면 등) 데이터를 녹음/녹화 한다. 3. Web Audio API - 오디오 데이터를 처리/분석하는 API이다. - 오디오 데이터로 사용될 수 있는 음원은 MediaStream(마이크 소리 등), 오디오 파일(mp3 등), 컴퓨터로 직접 만든 소리(Oscillator) 등이 있다. 4.. 2021. 12. 3.