MediaStream5 [자바스크립트] 캔버스(canvas) 화면 캡처/녹화 방법(+파일 저장 다운로드 구현) 자바스크립트는 태그의 화면을 캡처/녹화하는 방법을 제공한다. 예를 들어 캔버스에서 동작 중인 애니메이션을 녹화하여 동영상 등으로 저장할 수 있다. 작업 순서는 아래와 같다. # canvas 태그 화면 캡처/녹화 방법 1. canvas태그 화면 스트림 취득 : HTMLCanvasElement.captureStream()=>MediaStream 2. 취득한 스트림을 저장 : MediaRecorder, Blob 3. 저장한 스트림을 재생 OR 동영상 파일로 저장(다운로드) : BlobURL(ObjectURL) 먼저 canvas화면을 캡처하는 예제 코드 전문을 보고, 상세 설명을 정리한다. # canvas 캡처/녹화 방법 - 코드 전문 - 태그의 화면을 녹화하여 태그에서 재생하고, 동영상 파일로 다운로드 받는다.. 2021. 12. 12. [자바스크립트] 카메라 영상 녹화 방법 (+무음 비디오 촬영) 웹 브라우저 상에서 노트북이나 스마트폰의 전면/후면 카메라로 촬영하는 동영상을 녹음해야 하는 경우가 있다. 이 글은 별도 라이브러리 없이! 순수 자바스크립트만으로 카메라로 입력 받는 영상(비디오)를 녹화하는 방법을 정리한다. * 참고로 별도 라이브러리 없이 순수 자바스크립트만 사용하는 방식을 바닐라 자바스크립트(Vanilla Javascript)라고 한다. # 카메라 영상 녹화 순서 1. 카메라 영상 취득: MediaStream 2. 취득한 영상 저장: MediaRecorder 3. 녹화된 영상 재생: Blob, Video 옵션 설정에 따라 오디오 없이 비디오만 녹화하면 무음 영상 녹화도 가능하다. ▼이를 위해 사용되는 MediaStream, MediaRecorder, Blob 객체에 대해서는 아래글을 .. 2021. 12. 10. [자바스크립트] 마이크 음성 소리 녹음 방법 : MediaRecorder 별도 라이브러리 없이, 자바스크립트만으로 마이크로 입력 받는 오디오를 녹음하는 방법을 정리한다. 대략 아래와 같은 순서로 진행하면 된다. 1. 마이크 소리 입력: MediaStream 2. 입력된 소리 녹음: MediaRecorder 3. 녹음된 소리 재생: Blob, Audio 마이크 음성 녹음의 원리를 알기 위해서는 MediaStream, MediaRecorder, Blob 등에 대해 알아두면 좋다. ▼이에 대해서는 아래 글을 참고하자.▼ 자바스크립트 Media Capture and Streams API: MediaStream, MediaStreamTrack 자바스트립트 Media Stream Recording API: MediaRecorder 자바스크립트 File API 파헤치기: Blob, Fil.. 2021. 12. 9. [자바스크립트] MediaStream 예제 코드: 마이크, 카메라, audio, video, canvas 이번 글은 자바스크립트의 Media Capture and Streams API이용해 아래의 MediaStream을 취득해서 동시 재생하는 예제 코드를 정리한다. 1. 마이크 소리 2. 카메라 영상 3. 태그에서 재생 중인 소리 4. 태그에서 재생 중인 영상 5. 화면 ▼MediaStream, MediaStreamTrack의 원리는 아래 글 참고▼ 자바스크립트 Media Capture and Streams API: MediaStream, MediaStreamTrack 1. 마이크 소리 - 마이크 MediaStream 취득 방법: navigator.mediaDevices.getUserMedia({audio: true}); 마이크로 입력되는 소리를 MediaStream으로 취득하고, 태그로 재생하는 예제 코드.. 2021. 12. 8. 자바스크립트 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. 이전 1 다음
