지난 몇 년 동안 웹 애플리케이션에서 멀티미디어 콘텐츠 재생이 많이 발전해 왔습니다. MediaStream API는 웹에서 오디오 및 비디오를 실시간으로 스트리밍하고 조작하는 데 사용될 수 있는 강력한 기능을 제공합니다. 이 기능을 사용하여 웹에서 실시간 라디오 스트리밍 앱을 개발할 수 있습니다.

1. getUserMedia를 사용하여 오디오 스트림 가져오기

MediaStream API의 첫 번째 단계는 getUserMedia 메서드를 사용하여 오디오 스트림을 가져오는 것입니다. 이를 통해 사용자의 마이크를 통해 입력된 오디오 데이터를 가져와서 스트리밍할 수 있습니다.

navigator.mediaDevices.getUserMedia({ audio: true })
  .then(function(stream) {
    // 스트림을 이용하여 추가적인 작업 수행
  })
  .catch(function(error) {
    // 오디오 스트림을 가져오는데 실패한 경우 처리
  });

위의 코드는 사용자의 마이크로부터 오디오 스트림을 가져오는 예제입니다. getUserMedia 메서드를 호출하고 속성으로 audio: true를 지정하여 오디오 스트림을 요청합니다. 이후 then 블록에서 반환된 스트림을 이용하여 추가적인 작업을 수행할 수 있습니다.

2. MediaRecorder를 사용하여 스트림 녹음하기

오디오 스트림을 가져온 후, MediaRecorder API를 사용하여 스트림을 녹음할 수 있습니다. 이를 통해 녹음된 오디오를 파일로 저장하거나 네트워크를 통해 전송할 수 있습니다.

const recorder = new MediaRecorder(stream);
recorder.start();

// 녹음이 시작되었을 때 이벤트 처리하기
recorder.onstart = function(event) {
  // 녹음이 시작되었을 때 실행할 동작
};

// 녹음이 멈췄을 때 이벤트 처리하기
recorder.onstop = function(event) {
  // 녹음이 멈췄을 때 실행할 동작
};

// 녹음된 데이터를 얻을 때 이벤트 처리하기
recorder.ondataavailable = function(event) {
  const recordedData = event.data;
  // 녹음된 데이터를 이용하여 추가적인 작업 수행
};

// 녹음 중인 스트림을 중단하기
recorder.stop();

위의 코드에서는 stream을 이용하여 MediaRecorder 객체를 생성하고 start 메서드를 호출하여 녹음을 시작합니다. onstart, onstop, ondataavailable 이벤트 핸들러를 등록하여 각각 녹음이 시작되었을 때, 녹음이 멈췄을 때, 그리고 녹음된 데이터를 얻었을 때에 대한 동작을 설정할 수 있습니다. 마지막으로 stop 메서드를 통해 녹음 중인 스트림을 중단할 수 있습니다.

3. 녹음된 오디오를 재생하기

MediaStream API를 사용하여 스트리밍된 오디오를 녹음한 후, 해당 녹음을 재생할 수 있습니다. 녹음된 오디오 데이터를 AudioContext를 이용하여 재생하기 위해 다음과 같은 코드를 사용할 수 있습니다.

const audioContext = new AudioContext();
const audioBuffer = await audioContext.decodeAudioData(recordedData);
const source = audioContext.createBufferSource();
source.buffer = audioBuffer;
source.connect(audioContext.destination);
source.start(0);

위의 코드에서는 AudioContext를 생성한 후, decodeAudioData 메서드를 사용하여 녹음된 오디오 데이터를 디코딩합니다. 디코딩된 데이터를 이용하여 BufferSource를 생성하고 buffer 속성에 할당합니다. 이후 connect 메서드를 사용하여 출력 장치로 연결하고 start 메서드를 호출하여 재생을 시작합니다.

마치며

MediaStream API는 웹에서 실시간 라디오 스트리밍 앱을 개발하는 데 필요한 강력한 기능을 제공합니다. 이를 통해 사용자의 마이크로부터 오디오 스트림을 가져오고, 녹음하고, 재생하는 등 다양한 기능을 구현할 수 있습니다. MediaStream API를 사용하여 웹에서 실시간 라디오 스트리밍 앱을 개발하는 과정에서 위의 단계를 따라 진행하면 됩니다.

#WebDevelopment #MediaStreamAPI