From 5c0420d8ba02f79d3d5117827c09062ff3f7e138 Mon Sep 17 00:00:00 2001 From: NEM-NE Date: Tue, 30 Nov 2021 18:16:04 +0900 Subject: [PATCH 1/3] =?UTF-8?q?=F0=9F=92=84=20=20toast=20z-index=20?= =?UTF-8?q?=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- client/src/components/common/toast/style.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/src/components/common/toast/style.ts b/client/src/components/common/toast/style.ts index 436f385e..9c380359 100644 --- a/client/src/components/common/toast/style.ts +++ b/client/src/components/common/toast/style.ts @@ -8,7 +8,7 @@ export const NotificationContainer = styled.div` font-size: 14px; - z-index: 10; + z-index: 1000; `; export const Notification = styled.div` From dae068f88c97350bf523be5b98abd76a117f7edb Mon Sep 17 00:00:00 2001 From: NEM-NE Date: Tue, 30 Nov 2021 18:17:10 +0900 Subject: [PATCH 2/3] =?UTF-8?q?=F0=9F=90=9B=20=20=EB=A7=88=EC=9D=B4?= =?UTF-8?q?=ED=81=AC=20=EC=97=86=EC=9D=B4=20=EC=9E=85=EC=9E=A5=20=EB=B2=84?= =?UTF-8?q?=EA=B7=B8=20=ED=95=B4=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- client/src/components/room/new-view/index.tsx | 5 --- client/src/hooks/useRtc.tsx | 40 ++++++++++++++----- 2 files changed, 31 insertions(+), 14 deletions(-) diff --git a/client/src/components/room/new-view/index.tsx b/client/src/components/room/new-view/index.tsx index 539bbccb..107f7b5b 100644 --- a/client/src/components/room/new-view/index.tsx +++ b/client/src/components/room/new-view/index.tsx @@ -43,11 +43,6 @@ function RoomModal() { else if (isAnonymous) setRoomView('selectModeView'); else { setRoomView('inRoomView'); - setToastList({ - type: 'success', - title: '방 생성', - description: '성공적으로 방이 생성됐습니다!', - }); } }) .catch((err) => { diff --git a/client/src/hooks/useRtc.tsx b/client/src/hooks/useRtc.tsx index 3c61f4f5..2fe795ef 100644 --- a/client/src/hooks/useRtc.tsx +++ b/client/src/hooks/useRtc.tsx @@ -1,7 +1,7 @@ import { MutableRefObject, RefObject, useCallback, useRef, useEffect, useState, Dispatch, } from 'react'; -import { useRecoilState, useRecoilValue } from 'recoil'; +import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil'; import { Socket } from 'socket.io-client'; import useSocket from '@src/hooks/useSocket'; @@ -9,6 +9,8 @@ import { bindTrailingArgs } from '@src/utils'; import roomDocumentIdState from '@atoms/room-document-id'; import userTypeState, { IUser } from '@atoms/user'; import anonymousState from '@atoms/anonymous'; +import roomViewState from '@atoms/room-view-type'; +import toastListSelector from '@selectors/toast-list'; export interface IRTC { socketId?: string, @@ -116,19 +118,39 @@ export const useRtc = (): [ const socket = useSocket('/room'); const [myStreamRef, myVideoRef, getLocalStream] = useLocalStream(); const setPeerConnection = useSetPeerConnection(setParticipants, myStreamRef); + const setRoomView = useSetRecoilState(roomViewState); + const setToastList = useSetRecoilState(toastListSelector); + useEffect(() => { if (!socket) return; const init = async () => { - await getLocalStream(); - socket.emit('room:join', { - roomDocumentId, userDocumentId: user.userDocumentId, socketId: socket!.id, isAnonymous, - }); + try { + await getLocalStream(); + if (!myStreamRef.current) throw new Error('NOT_ALLOW_MIC'); + socket.emit('room:join', { + roomDocumentId, userDocumentId: user.userDocumentId, socketId: socket!.id, isAnonymous, + }); + setToastList({ + type: 'success', + title: '방 생성', + description: '성공적으로 방이 생성됐습니다!', + }); + } catch (error) { + console.error(error); + setToastList({ + type: 'danger', + title: '장치 허용', + description: '마이크를 허용하지 않을 경우 방에 참가할 수 없습니다.', + }); + setRoomView('createRoomView'); + } }; init(); socket.on('room:join', async (participantsInfo: Array) => { + console.log('participantsInfo', participantsInfo); participantsInfo.forEach(async (participant: T) => { if (!myStreamRef.current) return; const peerConnection = setPeerConnection(participant, socket); @@ -188,10 +210,10 @@ export const useRtc = (): [ return []; }); - myStreamRef.current!.getTracks() - .forEach((track: MediaStreamTrack) => { - track.stop(); - }); + myStreamRef.current?.getTracks() + .forEach((track: MediaStreamTrack) => { + track.stop(); + }); }; }, [socket, setPeerConnection]); From 8f5ad7fc7b4d45875e2b3409f5f1d24606d06ba9 Mon Sep 17 00:00:00 2001 From: NEM-NE Date: Tue, 30 Nov 2021 18:31:53 +0900 Subject: [PATCH 3/3] =?UTF-8?q?=F0=9F=94=87=20=20=EC=BD=98=EC=86=94?= =?UTF-8?q?=EB=A1=9C=EA=B7=B8=20=EC=82=AD=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- client/src/hooks/useRtc.tsx | 9 ++------- 1 file changed, 2 insertions(+), 7 deletions(-) diff --git a/client/src/hooks/useRtc.tsx b/client/src/hooks/useRtc.tsx index 2fe795ef..32cb27dc 100644 --- a/client/src/hooks/useRtc.tsx +++ b/client/src/hooks/useRtc.tsx @@ -26,16 +26,12 @@ export const useLocalStream = (): [MutableRefObject, RefObje const myVideoRef = useRef(null); const getLocalStream = useCallback(async () => { - try { - myStreamRef.current = await navigator.mediaDevices.getUserMedia({ audio: true, video: false }); - if (myVideoRef.current) myVideoRef.current.srcObject = myStreamRef.current; + myStreamRef.current = await navigator.mediaDevices.getUserMedia({ audio: true, video: false }); + if (myVideoRef.current) myVideoRef.current.srcObject = myStreamRef.current; myStreamRef.current! .getAudioTracks() // eslint-disable-next-line .forEach((track: MediaStreamTrack) => (track.enabled = !track.enabled)); - } catch (e) { - console.error(e); - } }, []); return [myStreamRef, myVideoRef, getLocalStream]; @@ -150,7 +146,6 @@ export const useRtc = (): [ init(); socket.on('room:join', async (participantsInfo: Array) => { - console.log('participantsInfo', participantsInfo); participantsInfo.forEach(async (participant: T) => { if (!myStreamRef.current) return; const peerConnection = setPeerConnection(participant, socket);