본문 바로가기

개발(Development)/Media(오디오&비디오 개발)16

자바스트립트 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.
스트리밍(Streaming)이란: 스트림(Stream), 버퍼(Buffer) 원리 # 스트림(Stream)이란? "스트림이란 시간의 흐름에 따라 발생하는 연속적인 데이터의 흐름이다." 이게 무슨 말인지 이해하기 위해 먼저 스트림과 파일의 기본적인 차이부터 집고 넘어가자. (이해하기 쉽게 단순화해서!) 파일은 mp3 처럼 4분 30초짜리 음원 데이터 전체가 기록되어 있다. 따라서 고정되어 있는 크기의 데이터를 처음부터 끝까지 읽어서 처리할 수 있다. 하지만 스트림은 파일과는 다르다. 스트림이란 계속해서 흘러 들어오는 데이터를 의미한다. 즉, 마이크에 대고 하는 이야기나, 비디오 카메라로 찍는 동영상 처럼 입력장치를 통해 계속해서 들어오는 데이터의 흐름을 의미한다. 따라서 실제 데이터가 입력되기 전에는 어떤 데이터가 들어올지 알 수 없으며, 실시간으로 들어오는 데이터를 그때 그때 읽고 처.. 2021. 11. 27.
오디오 파형 분석(FFT: 고속 푸리에 변환): Time Domain Data to Frequency Data 이번 글에서는 소리에 대한 내용을 좀더 깊게 다루어 볼 예정이다. 또한 FFT(고속 퓨리에 변환)을 통해 소리를 분석하는 방법도 간단하게 정리한다. ▼이 글을 읽기 전에 아래에서 다룬 소리 기초 내용을 알고 있으면 좋다.▼ 소리란? 소리의 기초 원리 (feat. 마이크와 스피커의 작동 원리) 소리의 진폭, 주기, 주파수, 파형 (볼륨, 음정, 음색의 결정 원리) 오디오 데이터 추출 및 변환: ADC, 샘플링, 샘플레이트, 채널 이 글에서 다루는 내용은 조금 길고 어려울 수 있지만, 최대한 쉽게 정리하려고 노력했다. 특히 Javascript Web Audio API 의 AnlayserNode 를 사용하려는 개발자 분들께는 큰 도움이 될 것 같다. * 글 중간 중간에 사용된 FDI(For Developer'.. 2021. 11. 26.
오디오 데이터 추출 및 변환: ADC, 샘플링, 샘플레이트, 채널 이번 글에서는 컴퓨터에서 오디오 데이터를 처리하기 위해 우리가 듣는 소리를 디지털 바이너리 데이터로 추출/변환하여 처리하는 방법을 다룬다. ▼단, 아래의 소리 기초 원리에 대한 이해가 필요하다.▼ 소리란? 소리의 기초 원리 (feat. 마이크와 스피커의 작동 원리) 소리의 진폭, 주기, 주파수, 파형 (볼륨, 음정, 음색의 결정 원리) # 컴퓨터가 소리를 다루는 원리 컴퓨터가 소리를 인식하고, 소리를 재생하는 원리는 무엇일까? 1. 소리가 발생하면 주변의 공기가 진동하여 마이크의 판막을 흔든다. 2. 마이크의 판막이 진동할 때마다 전기 신호가 생성된다. 3. 전기 신호가 메모리에 디지털 데이터(1, 0)로 저장된다. (ADC: Analog to Digital Conversion) 4. 저장된 데이터가 C.. 2021. 11. 25.
소리의 진폭, 주기, 주파수, 파형 (볼륨, 음정, 음색의 결정 원리) 소리란 공기의 밀도가 반복하여 변화(진동)하며 주변으로 퍼져나가는 것이다. ▼ 소리의 원리는 이전 글 참고 ▼ 소리란? 소리의 기초 원리 (feat. 마이크와 스피커의 작동 원리) 이번 글은 소리의 진폭, 주기, 주파수, 파형을 다루고, 소리의 3대 요소인 크기(Volume), 높낮이(Pitch), 음색(Timbre)이 어떻게 달라지는지 다룬다. # 소리의 파동(Wave) 소리가 발생하면 공기의 밀도가 변하면서 퍼져나간다. 이 때 공기의 밀도가 커졌다 작아졌다 진동하는 것을 그래프로 표현해보자. x축에 시간, y축에 밀도를 표시하면, 아래와 같은 그림이 그려질 것이다. * 이를 Time Domain Data라고 한다.(개발자들은 이 단어를 기억하자) 소리의 시간에 따른 밀도 변화를 파동(Wave) 혹은 .. 2021. 11. 24.
소리란? 소리의 기초 원리 (feat. 마이크와 스피커의 작동 원리) Audio|Sound 를 다루기 위해 기본적으로 알아야할 소리에 대한 기초 지식을 정리한다. 필자 자체가 소리에 문외한이기 때문에 최대한 쉽게 이해하려 노력했고, 그 노력의 과정을 기록으로 남기는 것이니, 누구라도 쉽게 이해할 수 있을 것이다. 먼저 소리가 대체 무엇인지! 그 원리부터 시작하여 소리의 주기, 주파수와 같은 기초 용어를 정리하고, 소리의 높낮이(Pitch), 크기(Volume), 음색은 어떻게 결정되는지 살펴본다. 최종적으로는 개발자를 위한 FFT와 ADC에 대한 내용도 다루어 볼 예정이다. 그럼 소리의 원리부터 시작해보자. 알고 나면 생각보다 쉽다. # 소리란? 소리란 공기의 떨림, 혹은 진동이다. 기타 줄을 튕기면 순간적으로 줄이 앞뒤로 흔들린다. 이 때 주변의 공기도 앞뒤로 흔들리며 .. 2021. 11. 22.