본문 바로가기

브라우저녹화2

[자바스크립트] audio/video 태그에서 재생 중인 소리/영상 녹음 방법 자바스크립트는 , 태그나 Audio, Video객체를 통해 재생 중인 오디오/비디오를 녹음/녹화하는 방법을 제공한다. audio나 video의 차이는 audio객체를 사용하느냐, video객체를 사용하느냐의 차이밖에 없다. # audio/video 녹음 방법 1. Audio/Video에서 재생 중인 스트림 취득: MediaStream 2. 재생 중인 스트림 녹음: MediaRecorder 3. 녹음된 스트림 재생: BlobURL(ObjectURL) MediaStream, MediaRecorder, Blob객체의 원리를 알고 있다면 아주 간단한 일이다. 자바스크립트 Media Capture and Streams API: MediaStream, MediaStreamTrack 자바스트립트 Media Strea.. 2021. 12. 11.
[자바스크립트] 카메라 영상 녹화 방법 (+무음 비디오 촬영) 웹 브라우저 상에서 노트북이나 스마트폰의 전면/후면 카메라로 촬영하는 동영상을 녹음해야 하는 경우가 있다. 이 글은 별도 라이브러리 없이! 순수 자바스크립트만으로 카메라로 입력 받는 영상(비디오)를 녹화하는 방법을 정리한다. * 참고로 별도 라이브러리 없이 순수 자바스크립트만 사용하는 방식을 바닐라 자바스크립트(Vanilla Javascript)라고 한다. # 카메라 영상 녹화 순서 1. 카메라 영상 취득: MediaStream 2. 취득한 영상 저장: MediaRecorder 3. 녹화된 영상 재생: Blob, Video 옵션 설정에 따라 오디오 없이 비디오만 녹화하면 무음 영상 녹화도 가능하다. ▼이를 위해 사용되는 MediaStream, MediaRecorder, Blob 객체에 대해서는 아래글을 .. 2021. 12. 10.