react-mic API 기반 마이크 테스트 기능 구현

API 사용 이유

마이크를 테스트하는 기능을 구현하기 위에 찾아보던 중, react-mic라는 API를 발견했다.

해당 API의 장점은 다음과 같다.

1. 리액트에서 사용할 수 있다.
2. 가시적으로 보여지는 요소들이 존재한다.
   
   

문제

설치를 위해 아래 명령어를 입력하였다.

npm install react-mic

하지만 무수한 에러의 향연이 이어졌다.
npm ERR!로 시작하는 에러들이 가득했고... 읽어도 이해할 수 없었다.

찾아보니 현재 프로젝트의 React 버전과 react-mic 패키지의 peer dependency인 React 버전 간의 충돌 때문이었다.

한 마디로, 종속성 충돌이 일어난 것이다.

현재 프로젝트에서 사용하는 React 버전은 18이다.
하지만 react-mic API는 React 16.x 버전을 지원해서 정상 설치가 불가했다.

해결을 위해서는 두 가지 방법 중에 선택해야했다.

1. react 버전 다운그레이드
   종속성 문제는 사라지겠지만, 프로젝트에 연동된 API에 문제가 발생할 수도 있다.
2. 강제 설치
   종속성 문제는 유지되지만, 프로젝트에 연동된 API는 지킬 수 있다.

API 하나 설치한다고 연동된 모든 API를 날릴 수 없기 때문에 우선 강제 설치를 선택하기로 했다.

npm install react-mic --force

Warning이 많이 뜨긴 했는데 설치는 무사히 되었다.
단, 앞으로의 프로젝트에 있어서도 강제 설치가 필요하다.

npm install --force

이런 식으로 강제 진행할 경우, 문제를 파악하지 못하기 때문에 이 API를 사용해야하나 고민이 많았다.

## 이제 구현! 딱히 깔끔한 코드는 아니라서 중점이 되는 코드만 보려고 한다. 아래는

const getMicrophone = async () => {
      try {
        const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
        const audioContext = new (window.AudioContext || window.webkitAudioContext)();
        const analyser = audioContext.createAnalyser();
        const source = audioContext.createMediaStreamSource(stream);
        source.connect(analyser);
        analyser.connect(audioContext.destination);

        setAudioContext(audioContext);
        setAnalyser(analyser);
        setMicrophoneStream(stream);
      } catch (error) {
        console.error('Error accessing microphone:', error);
      }
    };

입력 받는 값에 따라 잘 동작하는 것을 확인할 수 있다.

크롬에서 마이크 접근 권한 받는 것도 없이 바로 동작하기 때문에
권한 받아오는 기능도 추가하는 것이 필요해보인다.

navigator.mediaDevices.getUserMedia({ audio: true })

위의 코드를 통해 추가할 수 있다고 하니 더 공부해서 넣어봐야겠다.