문제

프로젝트 진행 중, 웹 상에서 녹음 기능을 구현해야 하는 상황이 생겼다. 크롬은 navigator.getUserMedia() 를 사용하여 쉽게 구현 가능했지만 IE에서는 지원하지 않는 API였기 때문에 구현에 어려움이 있었다.

시도

  • temasys adaptor

이 플러그인을 사용하면 WebRTC가 지원되지 않는 익스플로러에 ActiveX를 설치하는 것 처럼 기능을 설치해준다. 이후에 getUserMedia를 사용하여 stream을 얻을 수 있다.

1
2
3
4
5
6
7
8
9
10
11
12
13
let obj = this;
AdaptorJS.webRTCReady(isUsingPlugin => {
	getUserMedia({ // getUserMedia 를 사용하게 해준다
		audio: true,
		video: false
	},
	stream => { // stream을 이용해 작업이 가능하다
		// something login
	},
	error => {
		console.log(error);
	})
})
  • stream을 통한 기능 구현 중….

필자는 크롬에서 기능 구현을 위해 RecordRTC를 사용했다. 문제는 IE에서 RecordRTC가 정상 작동하지 않는다는 것. 직접 stream을 제어하기에는 필자의 실력이 부족했다. 구글링 결과 대부분 AudioContext를 통해 stream을 제어하는것을 봣지만 AudioContext도 IE에서는 미지원.

정리

  • IE에서 녹음기능 구현시도
  • temasys adaptor 를 사용해 IE에서도 getUserMedia 사용 가능
  • stream 제어를 위해 RecordRTC를 사용했지만 IE에서 지원하지 않음
  • AudioContext IE 미지원