Computer >> 컴퓨터 >  >> 프로그래밍 >> JavaScript

HTML5 MediaStream API 완벽 정리: 미디어 스트림의 이해와 활용

HTML5 MediaStream이란 무엇인가?

MediaStream은 오디오와 비디오 트랙으로 구성된 동기화된 미디어 스트림을 나타내는 인터페이스입니다. 웹캠이나 마이크 같은 미디어 장치에서 들어오는 데이터를 JavaScript로 손쉽게 다룰 수 있도록 해주는 핵심 개념입니다.

MediaStream 객체는 하나 이상의 트랙(Track)을 포함할 수 있으며, 각 트랙은 MediaStreamTrack이라는 객체로 표현됩니다. 예를 들어, 오디오 트랙과 비디오 트랙이 함께 존재하는 스트림을 만들 수 있습니다.

트랙 확인 방법: getAudioTracks()와 getVideoTracks()

MediaStream 객체는 트랙 정보를 조회하는 유용한 메서드를 제공합니다.

  • getAudioTracks(): 스트림에 포함된 오디오 트랙 배열을 반환합니다. 만약 오디오 트랙이 하나도 없다면 빈 배열(empty array)이 반환됩니다.
  • getVideoTracks(): 스트림에 포함된 비디오 트랙 배열을 반환합니다. 웹캠이 연결되어 있다면, 해당 웹캠의 영상 스트림을 나타내는 MediaStreamTrack 객체 하나가 담긴 배열을 반환받게 됩니다.

즉, 사용자 환경에 따라 반환되는 배열의 길이가 달라지므로, 실제 코드에서는 배열의 길이를 확인해 오디오나 비디오 입력 장치의 존재 여부를 판단할 수 있습니다.

실전 예제: 마이크 입력을 AudioContext로 처리하기

아래 예제는 navigator.getUserMedia()를 통해 마이크 오디오를 가져온 뒤, Web Audio API의 AudioContext로 연결하는 과정을 보여줍니다.

function gotStream(stream) {
    window.AudioContext = window.AudioContext || window.webkitAudioContext;
    var audioContext = new AudioContext();

    // 스트림으로부터 AudioNode 생성
    var mediaStreamSource = audioContext.createMediaStreamSource(stream);

    // destination에 연결하면 자신의 목소리를 들을 수 있고,
    // 다른 노드에 연결해 신호를 가공·처리할 수도 있습니다!
    mediaStreamSource.connect(audioContext.destination);
}
navigator.getUserMedia({audio:true}, gotStream);

코드 단계별 설명

  1. getUserMedia 호출: {audio:true} 옵션을 전달하여 마이크 접근 권한을 요청하고, 성공 시 콜백 함수 gotStream에 MediaStream 객체가 전달됩니다.
  2. AudioContext 생성: 브라우저 호환성을 위해 window.AudioContext || window.webkitAudioContext 형태로 Web Audio 컨텍스트를 초기화합니다.
  3. 미디어 스트림 소스 생성: createMediaStreamSource() 메서드로 스트림을 오디오 그래프에서 사용할 수 있는 AudioNode로 변환합니다.
  4. 출력 연결: connect(audioContext.destination)으로 스피커 출력에 연결하면 자신의 목소리를 실시간으로 들을 수 있으며, 필터나 분석기 같은 다른 노드에 연결해 음향 효과 처리도 가능합니다.

참고 사항

현재 최신 브라우저에서는 구식 navigator.getUserMedia() 대신 Promises 기반의 navigator.mediaDevices.getUserMedia() 사용이 권장됩니다. 또한 HTTPS 환경에서만 카메라·마이크 접근이 허용되며, 반드시 사용자 권한 승인 절차를 거쳐야 한다는 점도 기억해 두세요.