자바스크립트 Media Capture and Streams API: MediaStream, MediaStreamTrack
마이크, 카메라 등을 이용해 들어오는 (Media Stream: 오디오, 비디오, 화면 등) 데이터를 다룬다
MediaStream Recording API
- 미디어 스트림 ( Media Stream : 오디오, 비디오, 화면 등 ) 데이터를 다룬다
Web Audio API
- 오디오 데이터를 처리/분석하는 API이다.
- 오디오 데이터로 사용될 수 있는 음원은 MediaStream(마이크 소리 등), 오디오 파일(mp3 등), 컴퓨터로 직접 만든 소리(Oscillator) 등이 있다
여기에선 크게 3가지 스트림에 대해서 다뤄야 하는데 하나씩 살펴보자면
- audio 태그를 통해 재생하는 오디오 소리 스트림
- video 태그를 통해 재생하는 비디오 영상 스트림
- canvas 태그를 통해 영역의 화면을 캡처하는 화면 스트림
MediaStream 이란
오디오와 비디오 같은 미디어 스트림을 다루는 객체
⇒ 위에 말한 3가지 스트림을 다루는데 사용된다
주의 할 점은 MediaStream 객체는 한번 생성되면 계속 데이터를 입력 받으므로 별도로 닫아줘야함
MediaStream 생성방법
MediaStream 객체는 생성할 때 주로 2가지 방법이 사용되는데
주의 할 점이 MediaStream 객체를 여러 개 생성하더라도 동일한 소스( 마이크, 카메라, 화면)를 사용한다면 입력되는 “스트림은 동일”하다는 점
1. MediaStream 생성자
생성자로 객체 생성하는 방법
1) new MediaStream()
비어있는 MediaStream 객체 생성
2) new MediaStream(다른MediaStream객체)
parameter 로 들어온 객체와 동일한 트랙을 갖는 MediaStream 객체 생성
= 동일한 스트림 소스에 연결
3) new MediaStream([MediaStreamTrack객체, …])
여러 개의 트랙을 조합한 MediaStream 객체 생성
2. 입력 소스에서 MediaStream 받기
입력 소스로부터 MediaStream 객체를 받아서 사용
1) 마이크, 카메라
navigator.mediaDevices.getUserMedia()
- 마이크, 카메라로 입력되는 오디오, 비디오 MediaStream 객체 생성
- MediaDevices 객체는 전역 객체 navigator.mediaDevices 로 참조 가능
- navigator.mediaDevices,getUserMedia 는 실제 배포 환경에서는 https 에서만 작동
2) audio, video 태그
HTMLMediaElement.captureStream()
- audio, video 가 재생하는 MediaStream 객체 생성
- captureStream() 메서드는 브라우저별 지원여부 확인 후 사용
3) canvas 태그
HTMLCanvasElement.captureStream()
- canvas 영역에서 발생하는 화면 MediaStrema 객체 생성
- canvas 에서 그려지는 그림을 영상으로 캡쳐
4) 브라우저 화면
navigator.mediaDevices.getDisplayMedia()
- 브라우저 window 일부 영역에 대한 화면 MediaStream 객체 생성
- 브라우저 화면에서 발생하는 내용을 영상으로 캡쳐
혼자 공부해본 자료들은 아래에 있으며 아래에 링크를 달아두겠으니 필요시 사용해보자
https://github.com/inho-park/WebRTC
뭔가 내가 잊지 않으려고 정리하려다 보니 너무 간단히 요약해버린 감이 있지만 직접 소스를 구현해보니 생각한 것보다 간단하게 구현해볼 수 있다... 그러나 직접 버퍼를 구현한 후 서버에 데이터를 전달하는 과정을 구현한다면 아마 조금 더 video 나 audio 파일에 대한 이해가 필요할 것 같다는 생각이 들었다...
