웹에서의 실시간 오디오 송신을 위한 MediaStream API 활용 방법

13 Oct 2023

javascript

MediaStream API는 웹 개발자가 웹 브라우저에서 오디오 및 비디오 스트림을 다루고 제어할 수 있는 강력한 도구입니다. 이 API를 활용하면 실시간 오디오 송신을 구현할 수 있으며, 이를 통해 음성 통화, 음성 인식 등 다양한 응용 프로그램을 개발할 수 있습니다.

MediaStream 생성하기

먼저, 오디오 스트림을 생성해야 합니다. 이를 위해 navigator.mediaDevices.getUserMedia()를 사용합니다. 다음은 오디오 스트림을 생성하는 예제 코드입니다.

navigator.mediaDevices.getUserMedia({ audio: true })
  .then(function(stream) {
    // 오디오 스트림을 stream 변수에 저장한다.
  })
  .catch(function(error) {
    console.log('오디오 스트림을 가져오는데 실패했습니다: ', error);
  });

위 코드에서 getUserMedia() 메서드는 사용자의 브라우저에서 오디오 액세스 권한을 요청합니다. 성공적으로 권한을 획득하면 then()을 통해 오디오 스트림을 다룰 수 있습니다.

오디오 데이터 보내기

오디오 스트림을 얻은 후에는 해당 스트림을 원격 서버로 보내야 합니다. 이를 위해서는 WebRTC를 사용하여 실시간 통신을 설정해야 합니다. WebRTC(p2p)를 사용하는 방법은 여러 가지가 있지만, 여기서는 RTCPeerConnection을 사용한 예제를 제시하겠습니다.

// RTCPeerConnection 객체 생성
const pc = new RTCPeerConnection();

// 오디오 트랙을 가져옴
const audioTracks = stream.getAudioTracks();
audioTracks.forEach(function(track) {
  pc.addTrack(track, stream);
});

// 원격 서버에 연결을 위한 offer 생성
pc.createOffer().then(function(offer) {
  return pc.setLocalDescription(offer);
}).then(function() {
  // offer를 서버로 보냄
}).catch(function(error) {
  console.log('오디오 데이터 전송에 실패했습니다: ', error);
});

위 코드에서 RTCPeerConnection 객체를 생성한 후에는 stream에서 오디오 트랙을 가져와서 addTrack()으로 연결합니다. 그리고 createOffer()를 통해 서버에 보낼 offer를 생성하고, setLocalDescription()을 사용하여 offer를 pc에 설정합니다. 마지막으로 생성된 offer를 원격 서버로 보낼 수 있습니다.

MediaStream 생성하기

오디오 데이터 보내기

참고 자료