diff --git a/src/hooks/useAudio.ts b/src/hooks/useAudio.ts index 46faa52..97863a8 100644 --- a/src/hooks/useAudio.ts +++ b/src/hooks/useAudio.ts @@ -1,11 +1,7 @@ import { AudioActionType, AudioContext } from "@contexts/AudioProvider"; -import { SocketContext } from "@contexts/SocketProvider"; -import { useEffect, useState, useContext } from "react"; +import { useState, useContext } from "react"; export function useAudio() { - const [selectedDeviceId, setSelectedDeviceId] = - useState("마이크를 선택해 주세요."); - const { socket } = useContext(SocketContext); const { audio, dispatch } = useContext(AudioContext); const [isAudioLoading, setIsAudioLoading] = useState(false); @@ -13,12 +9,15 @@ export function useAudio() { setIsAudioLoading(true); try { const devices = await navigator.mediaDevices.enumerateDevices(); - const excludeDefault = devices.filter( - (v) => v.deviceId !== "default" && v.deviceId !== "" - ); - const inputs = excludeDefault.filter((v) => v.kind === "audioinput"); + const audioInputs = devices + .filter((v) => v.deviceId !== "" && v.kind === "audioinput") + .sort((a, b) => { + if (a.label.includes("Default")) return -1; + if (b.label.includes("Default")) return 1; + return 0; + }); - dispatch({ type: AudioActionType.SET_AUDIOLIST, payload: inputs }); + dispatch({ type: AudioActionType.SET_AUDIOLIST, payload: audioInputs }); setTimeout(() => { setIsAudioLoading(false); }, 100); @@ -36,25 +35,14 @@ export function useAudio() { deviceIdIndex = i; } } - setSelectedDeviceId(audio.audioList[deviceIdIndex].deviceId); return deviceIdIndex; }; - useEffect(() => { - // useAudio가 호출될때마다 dispatch 로직이 실행되어서 발생한 오류 - if (!audio.audioList.length) { - getAudioInputs(); - } - }, [socket]); - return { stream: audio.stream, deviceId: audio.deviceId, audioList: audio.audioList, isAudioLoading, - selectedDeviceId, - setSelectedDeviceId, - refresh: getAudioInputs, - findDeviceIdIndex, + getAudioInputs, }; }