OpenVidu 마이크 테스트 기능

왜 react-mic를 안 쓰고?

이미 OpenVidu API에서 음성 정보를 받고 있었기 때문에 이중으로 쓸 필요가 없었다.
괜히 성능 저하만 일으킬 것 같다는 생각이...

따라서 마이크 볼륨의 정보만 따서 UI상으로 표현하고자 했다.
열심히 GPT에게 물어보며 해낸 과정을 정리하고자 한다.

구현 레츠고

기존에 있던 OpenVidu 코드에서, 음성 정보와 관련된 코드를 추가했다.

//실시간 마이크 볼륨 확인
componentDidMount() {
  this.setupMicrophone();
  window.addEventListener('beforeunload', this.onbeforeunload);
}

우선, 실시간으로 마이크 볼륨 정보를 받아와야 했기 때문에 따로 함수를 뺀 뒤, 이벤트가 발생할 때마다 호출하도록 했다.

setupMicrophone() {
  //마이크 사용 허가 요청
  navigator.mediaDevices.getUserMedia({ audio: true })
    .then(stream => {
    const audioContext = new AudioContext();
    const microphone = audioContext.createMediaStreamSource(stream);
    const analyser = audioContext.createAnalyser();

    analyser.fftSize = 256;
    const bufferLength = analyser.frequencyBinCount;
    const dataArray = new Uint8Array(bufferLength);

    microphone.connect(analyser);

    const volumeMeter = document.getElementById('volume-meter');
    if(!volumeMeter) {
      console.error("volume-meter을 찾을 수 없음!");
      // return;
    }

    const updateVolume = () => {
      analyser.getByteFrequencyData(dataArray);
      const average = dataArray.reduce((sum, value) => sum + value, 0) / bufferLength;
      console.log('>>>>>>볼륨: '+average);

      // average 값으로 UI 업데이트 (예: CSS를 사용하여 높이 조절)
      // 수정된 부분: volumeMeter가 null이 아닌 경우에만 스타일 조작
      if(volumeMeter){
        volumeMeter.style.height = `${average}px`;
      }
    };

    setInterval(updateVolume, 100);
  })
    .catch(error => {
    console.error('마이크 접근 중 오류 발생:', error);
  });
}

코딩테스트를 볼 때, 마이크 권한 허용을 위한 창이 뜨고는 한다.
이 기능을 추가하기 위해 navigator.mediaDevices.getUserMedia() 함수를 사용했다.

중점적으로 사용되는 변수 위주로 살펴보도록 하겠다.
변수 analyser는, Web Audio API에서 사용되는 객체를 가지게 된다.

특히 createAnalyser()는 분석을 수행하는 객체를 생성하게 되는데, 실시간 오디오 데이터를 분석하여 주파수, 진폭 등 다양한 정보를 갖게 된다.

AnalyserNode 객체는 다음과 같은 속성과 메서드를 가진다.

• fftSize: Fast Fourier Transform을 수행할 때 사용되는 샘플 수. 주파수 영역으로 신호를 변환하는 데 사용된다.
• frequencyBinCount: 분석에 의해 생성된 주파수 영역의 데이터 크기를 나타낸다.
• getByteFrequencyData(): 주파수 데이터를 바이트 단위로 가져오는 메서드. 주파수의 크기를 얻을 수 있다.

아래는 구현 결과이다.

이를 사용해서 render() 중에 실시간으로 데이터 값을 표기할 수 있다.
현재는 console로만 출력한 상태이지만, 실제 오디오 바처럼 표현할 예정이다.