Merge pull request #143 from SWM-FIRE/FIRE-528-미디어-기기-설정-기능-구현

FIRE-528-미디어-기기-설정-기능-구현

src/components/ready/modal/SettingModal.tsx

@@ -1,6 +1,8 @@
 import React, { useRef, useEffect } from 'react';
 import styled from 'styled-components';
 import Selectors from './Selectors';
+import UserMediaStreamStore from '../../../stores/userMediaStreamStore';
+import { useCreateMediaStream } from '../../../hooks/useCreateMediaStream';
 import { ReactComponent as X } from '../../../assets/svg/X.svg';
 
 export default function SettingModal({
@@ -10,6 +12,13 @@ export default function SettingModal({
   setSetting: React.Dispatch<React.SetStateAction<boolean>>;
   stream: MediaStream;
 }) {
+  const { userAudioInputDevice } = UserMediaStreamStore();
+  const { replaceAudioStream } = useCreateMediaStream();
+
+  useEffect(() => {
+    replaceAudioStream();
+  }, [userAudioInputDevice]);
+
   const closeModal = (event: React.MouseEvent<HTMLButtonElement>) => {
     event.preventDefault();
     setSetting(false);

src/components/room/header/Header.tsx

@@ -3,7 +3,7 @@ import { useNavigate, useParams } from 'react-router-dom';
 import Timer from './Timer';
 import Settings from './Settings';
 import { ReactComponent as X } from '../../../assets/svg/X.svg';
-import Theme from '../Theme';
+import Theme from './Theme';
 import roomSocket from '../../../adapters/roomSocket';
 import connectedUsersStore from '../../../stores/connectedUsersStore';
 import messageStore from '../../../stores/messagesStore';

src/components/room/Theme.tsx → src/components/room/header/Theme.tsx

@@ -1,13 +1,14 @@
 import { useState, useRef, useEffect } from 'react';
 import styled from 'styled-components';
-import MovingTheme from './screenShare/MovingTheme';
-import { ReactComponent as VolumeOn } from '../../assets/svg/VolumeOn.svg';
-import { ReactComponent as VolumeOff } from '../../assets/svg/VolumeOff.svg';
-import UserMediaStreamStore from '../../stores/userMediaStreamStore';
-import ThemeSound from './header/ThemeSound';
+import MovingTheme from '../screenShare/MovingTheme';
+import { ReactComponent as VolumeOn } from '../../../assets/svg/VolumeOn.svg';
+import { ReactComponent as VolumeOff } from '../../../assets/svg/VolumeOff.svg';
+import UserMediaStreamStore from '../../../stores/userMediaStreamStore';
+import ThemeSound from './ThemeSound';
 
 export default function Theme({ theme }) {
-  const { userSpeaker, setUserSpeaker } = UserMediaStreamStore();
+  const { userSpeaker, setUserSpeaker, userAudioOutputDevice } =
+    UserMediaStreamStore();
   const [volume, setVolume] = useState<number>(0.5);
   const volumeRef = useRef<HTMLAudioElement>(null);
   const setSpeaker = () => {
@@ -21,7 +22,9 @@ export default function Theme({ theme }) {
     if (volumeRef.current) {
       volumeRef.current.volume = volume;
     }
-  }, [volume, userSpeaker]);
+    const newAudio = volumeRef.current;
+    (newAudio as any).setSinkId(userAudioOutputDevice?.deviceId);
+  }, [volume, userSpeaker, userAudioOutputDevice]);
 
   return (
     <Container>

src/components/room/screenShare/SingleScreen.tsx

@@ -4,6 +4,7 @@ import MyAvatar from '../../../assets/avatar/MyAvatar';
 import controlModal from '../../../stores/controlModal';
 import messageStore from '../../../stores/messagesStore';
 import userStore from '../../../stores/userStore';
+import UserMediaStreamStore from '../../../stores/userMediaStreamStore';
 
 export default function SingleScreen({ connectedUser, stream }) {
   const { messages } = messageStore();
@@ -12,6 +13,7 @@ export default function SingleScreen({ connectedUser, stream }) {
     controlModal();
   const { uid } = userStore();
   const videoRef = useRef<HTMLVideoElement | null>(null);
+  const { userAudioOutputDevice } = UserMediaStreamStore();
 
   const OpenModal = () => {
     setNickname(connectedUser.nickname);
@@ -25,7 +27,9 @@ export default function SingleScreen({ connectedUser, stream }) {
     if (videoRef.current && stream) {
       videoRef.current.srcObject = stream;
     }
-  }, [stream, videoRef]);
+    const newRef = videoRef.current;
+    (newRef as any).setSinkId(userAudioOutputDevice?.deviceId);
+  }, [stream, videoRef, userAudioOutputDevice]);
 
   useEffect(() => {
     const timer = setInterval(() => {

src/hooks/useCreateMediaStream.ts

@@ -11,6 +11,7 @@ export const useCreateMediaStream = () => {
     setUserMic,
     setUserVideo,
     userVideo,
+    userAudioInputDevice,
   } = UserMediaStreamStore();
   const myStream: { localStream: MediaStream | null } = {
     localStream: userMediaStream,
@@ -79,6 +80,38 @@ export const useCreateMediaStream = () => {
     }
   };
 
+  const replaceAudioStream = async () => {
+    try {
+      const audioStream = await navigator.mediaDevices.getUserMedia({
+        audio: {
+          deviceId: userAudioInputDevice?.deviceId,
+          autoGainControl: false,
+          channelCount: 2,
+          echoCancellation: true,
+          latency: 0,
+          noiseSuppression: false,
+          sampleRate: 48000,
+          sampleSize: 16,
+        },
+      });
+      myStream.localStream.removeTrack(
+        myStream.localStream.getAudioTracks()[0],
+      );
+      myStream.localStream.addTrack(audioStream.getAudioTracks()[0]);
+      setUserMediaStream(myStream.localStream);
+      Object.keys(pcs).forEach((pc) => {
+        const sender = pcs[pc]
+          .getSenders()
+          .find((s) => s.track.kind === 'audio');
+        sender.replaceTrack(audioStream.getAudioTracks()[0]);
+      });
+    } catch (error) {
+      console.log('failed to change audio stream', error);
+      const stream = new MediaStream();
+      setUserMediaStream(stream);
+    }
+  };
+
   const createDisplayStream = async () => {
     try {
       const videoStream = await navigator.mediaDevices.getDisplayMedia({
@@ -110,6 +143,7 @@ export const useCreateMediaStream = () => {
   };
 
   return {
+    replaceAudioStream,
     toggleMic,
     createDisplayStream,
     createAudioStream,