본문 바로가기

분류 전체보기518

[자바스크립트] 캔버스(canvas) 화면 캡처/녹화 방법(+파일 저장 다운로드 구현) 자바스크립트는 태그의 화면을 캡처/녹화하는 방법을 제공한다. 예를 들어 캔버스에서 동작 중인 애니메이션을 녹화하여 동영상 등으로 저장할 수 있다. 작업 순서는 아래와 같다. # canvas 태그 화면 캡처/녹화 방법 1. canvas태그 화면 스트림 취득 : HTMLCanvasElement.captureStream()=>MediaStream 2. 취득한 스트림을 저장 : MediaRecorder, Blob 3. 저장한 스트림을 재생 OR 동영상 파일로 저장(다운로드) : BlobURL(ObjectURL) 먼저 canvas화면을 캡처하는 예제 코드 전문을 보고, 상세 설명을 정리한다. # canvas 캡처/녹화 방법 - 코드 전문 - 태그의 화면을 녹화하여 태그에서 재생하고, 동영상 파일로 다운로드 받는다.. 2021. 12. 12.
[자바스크립트] 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.
[자바스크립트] 마이크 음성 소리 녹음 방법 : 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 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.
자바스크립트 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.
자바스크립트 File API 파헤치기: Blob, File, FileReader, FileList, BlobURL 자바스크립트는 바이너리 데이터를 다루기 위한 방법으로 Buffer와 FileAPI를 제공한다. 1. Buffer: 개발자가 메모리 관점에서 바이너리 데이터를 다룰 수 있다. 2. File API: 파일(png, mp3등)이나 입출력장치(마이크, 카메라, 화면 등)의 바이너리 데이터를 다룰 수 있다. ▼이 중 Buffer(ArrayBuffer, TypedArray 등)에 대해서는 아래 글에서 아주 상세하게 정리해 두었다.▼ 자바스크립트 버퍼(Buffer): ArrayBuffer, TypedArray 파헤치기! 이번 글에서는 File API를 정리한다. # FILE API 란? FILE API란 단순 텍스트 데이터 뿐만 아니라 이미지, 오디오, 비디오 등의 대용량 바이너리 데이터를 다루기 위한 API이다. .. 2021. 12. 1.
자바스크립트 버퍼(Buffer): ArrayBuffer, TypedArray 파헤치기! 자바스크립트는 바이너리 데이터를 다루기 위한 방법으로 버퍼(Buffer)를 구현한 ArrayBuffer, ArrayBufferView를 제공한다. 이번 글에서 다룰 내용을 요약하면 아래와 같다. 1. 버퍼(Buffer)란? - 임시로 바이너리 데이터를 저장하기 위한 메모리 공간 혹은 바이너리 데이터 자체 2. ArrayBuffer란? - 자바스크립트에서 구현된 버퍼이다. - 고정된 크기의 메모리 공간에 바이너리 데이터를 저장하는 객체다. 3. ArrayBufferView란? - ArrayBuffer에 저장된 바이너리 데이터에 접근하는 객체다. - TypedArray, DataView 2개가 제공된다. 4. TypedArray란? - ArrayBufferView의 한 종류이다. - 배열 요소의 타입/크기를.. 2021. 11. 30.

티스토리툴바