- 멤버 수: {study.member_number}
- 하루 벌금: {study.penalty}
- 스터디 정보: {study.info}
- 방장이름: {study.leader}
- 스터디 아이디: {study.id}
+
+
+
+
+
+
+ + {/* 목표 시간: {mystudy.target_time}
멤버 수: {mystudy.member_number}
하루 벌금: {mystudy.penalty}
스터디 정보: {mystudy.info}
방장이름: {mystudy.leader}
- 스터디 아이디: {mystudy.id}
+ 스터디 아이디: {mystudy.id}
*/}
+ 
+
+ );
+};
+
+
const Room = (props) => {
+ console.log("---------------------------재실행----------")
const videolistRef = useRef();
videolistRef.current = [];
@@ -84,77 +165,140 @@ const Room = (props) => {
videoColor=text;
}
+ function getPeerlist(){
+ console.log("function getPeerlist: ", peers);
+ console.log("function getPeerRef: ", peersRef);
+ }
+
+ getPeerlist();
- useEffect(() => { //호출 되면 실행?
- {peers.map((peer, index) => {
- peer.on("stream", stream => {
- videolistRef.current[index].srcObject = stream;
- }) })}
- })//,[peers]); <-문제 생기면 추가
useEffect(() => { //렌더링 될 때마다 실행, peers 값 변할 때마다 렌더링
-// <<<<<<< HEAD
-// console.log("렌더링3: useEffect 실행 -> 소켓 통신, 디텍션 ");
-// console.log("렌더링3: videolistRef.current[0] : ", videolistRef.current[0]);
-// socketRef.current = io.connect("https://10.200.11.221:8000"); //현재 커넥트 정보 저장
-// console.log(socketRef.current)
-// =======
- socketRef.current = io.connect("https://192.168.0.28:8000"); //현재 커넥트 정보 저장
-// >>>>>>> main
-
+
+
+ socketRef.current = io.connect("https://nudo-study.cf/"); //현재 커넥트 정보 저장
+ console.log("내 peer id: ", socketRef.current);
navigator.mediaDevices.getUserMedia({ video: videoConstraints, audio: false })
.then(stream => {
userVideo.current.srcObject = stream; // 내 비디오 추가
+
socketRef.current.emit("join room", roomID);
+
socketRef.current.on("all users", users => { //"all users" 이벤트 듣고 있다가 실행, 첫 접속 시 본인 제외 다른 피어들 정보 받아옴
- const peers = []; //위에 peers와 구분됨
+ console.log("@all users");
+ const peers = [];
users.forEach(userID => { //타 피어 정보 받아와서 peer 객체로 peersRef, peers 에 저장
const peer = createPeer(userID, socketRef.current.id, stream);
-
peersRef.current.push({ //peerRef 업데이트
peerID: userID,
- peer
+ peer,
+ videoState: false
})
- peers.push(peer);
+ peers.push({
+ peerID: userID,
+ peer,
+ videoState: false
+ });
})
setPeers(peers); //peers 업데이트 -> 재렌더링
-
+ console.log("0-2. peers: ", peers);
})
-
socketRef.current.on("user joined", payload => {
+ console.log("@user joined");
const peer = addPeer(payload.signal, payload.callerID, stream);
peersRef.current.push({
peerID: payload.callerID,
- peer
+ peer,
+ videoState: false
})
- setPeers(users => [...users, peer]);
+
+ const peerObj = {
+ peerID: payload.callerID,
+ peer,
+ videoState: false
+ }
+ setPeers(users => [...users, peerObj]);
+
+ //상태 emit
+ var state;
+ if(mode){ //mode on
+ if(props.detect === 'false') state = false;
+ else state = true;
+ }else{ //mode off
+ if(watch ==='false') state = false;
+ else state = true;
+ }
+ //console.log("@give-videostate emit")
+ // socketRef.current.emit('give-videostate', { giver: myID, peerID: payload.callerID, tf_state: state});
});
socketRef.current.on("receiving returned signal", payload => {
+ console.log("@receiving returned signal");
const item = peersRef.current.find(p => p.peerID === payload.id);
item.peer.signal(payload.signal);
+ socketRef.current.emit('call-videostate1', {peerID: myID, dst_room: roomID});
});
+ socketRef.current.on("call-videostate2", data => {
+ console.log("@call-videostate2");
+ //상태 emit
+ var state;
+ if(mode){ //mode on
+ if(props.detect === 'false') state = false;
+ else state = true;
+ }else{ //mode off
+ console.log("@call-videostate2 videoColor: ", videoColor);
+ if(videoColor ==='false') state = false;
+ else state = true;
+ }
+ socketRef.current.emit('receive-videostate1', {peerID: data.peerID, giver: myID, tf_state: state});
+ });
- //5. video-state 이벤트
- socketRef.current.on("video-state", data => { //data: peer_tf, tf_state (<-반대로 바꿔주기만 하면 됨)
+ socketRef.current.on("receive-videostate2", data => {
+ console.log("@receive-state2");
+ var index = peersRef.current.findIndex(p => p.peerID === data.peerID);
+ console.log("@receive-state data.peerID: ", data.peerID);
+ console.log("@receive-state data.tf_state: ", typeof(data.tf_state));
+ console.log("@receive-state index: ", index);
+ if(data.tf_state){ //주의: boolean 타입
+ console.log("@receive2에서 true");
+ const uniquePeers = peersRef.current;
+ uniquePeers[index].videoState = true;
+ peersRef.current[index].videoState = true;
+ watch_test=true; //이거 왜 있음?
+ setPeers(uniquePeers);
+ setPeers(users => [...users]); //강제로 렌더링
+ console.log("@receive2에서 setPEers");
+ }
+ });
+ socketRef.current.on("video-state", data => { //data: peer_tf, tf_state (<-반대로 바꿔주기만 하면 됨)
+ console.log("#video-state > data: ", data);
if(data.peer_tf === myID){ //서버에서 broadcast로 emit 못함
console.log ("5. 내 tf 상태 emit") //필요없음, 지워야
}else{
var index = peersRef.current.findIndex(i => i.peerID === data.peer_tf);
if(data.tf_state === 'false'){
- videolistRef.current[index].style.filter = 'brightness(0)'
+ const uniquePeers = peersRef.current;
+ uniquePeers[index].videoState = false;
+ peersRef.current[index].videoState = false;
watch_test=false;
+ setPeers(uniquePeers);
+ setPeers(users => [...users]); //강제로 렌더링
}else{
- videolistRef.current[index].style.filter = 'brightness(1)'
+ const uniquePeers = peersRef.current;
+ uniquePeers[index].videoState = true;
+ peersRef.current[index].videoState = true;
watch_test=true;
+ setPeers(uniquePeers);
+ setPeers(users => [...users]); //강제로 렌더링
}
}
})
socketRef.current.on("my peer id", myPeerID => {
+ console.log("#my peer id");
myID = myPeerID;
})
@@ -164,59 +308,52 @@ const Room = (props) => {
2. peers에서 삭제해야 (문제: peers에 socket.id 없음)
-> peersRef에서 인덱스 추출하고 peers에서는 해당 인덱스 삭제
*/
- socketRef.current.on("user-disconnected", disconnect_peer => {
- var idx = peersRef.current.findIndex(i => i.peerID === disconnect_peer); //peersRef에서 인덱스 추출
- peersRef.current.splice(idx,1); //peersRef에서 삭제
- setPeers(peers.filter((value,index) => index !== idx)); //peers 삭제
+ socketRef.current.on("user-disconnected", id => {
+ const peerObj = peersRef.current.find(p=>p.peerID === id);
+ if(peerObj){
+ peerObj.peer.destroy();
+ }
+ const peers = peersRef.current.filter(p=> p.peerID != id);
+ peersRef.current = peers;
+
+ const uniquePeers = peers.filter(p=> p.peerID != id); //수정: 이미 filter 처리 한거니까 그냥 peer만 넣기
+ setPeers(uniquePeers);
+ })
})
- })
+
},[]);
+
useEffect(()=>{
+
+ //0611~
+ const fullChange=() =>{
+ const element = document.documentElement;
+ if(element.requestFullscreen) {console.log("element.requestFullscreen"); element.requestFullscreen();}
+ else if(element.mozRequestFullScreen) {element.mozRequestFullScreen(); }
+ else if(element.webkitRequestFullscreen) {console.log("element.webkitRequestFullscreen"); element.webkitRequestFullScreen(); }
+ else if(element.msRequestFullscreen) {element.msRequestFullScreen(); }
+ }
+
+ const exitFullChange=() =>{
+ //const element = document.documentElement;
+ if(document.exitFullscreen){ console.log("document.exitFullscreen"); document.exitFullscreen(); }
+ else if(document.mozCancleFullScreen){ document.mozCancleFullScreen(); }
+ else if(document.webkitExitFullscreen){ document.webkitExitFullscreen(); }
+ else if(document.msExitFullscreen){ document.msExitFullscreen(); }
+ }
+ //~0611
+
const interval = setInterval(async () => {
captureImageFromCamera();
if (imageRef.current && mode) {
const formData = new FormData();
formData.append('image', imageRef.current);
-// <<<<<<< HEAD
-
-// const response = await fetch('https://10.200.11.221:5000/image', {
-// method: "POST",
-// body: formData,
-// }).then().catch(err => console.log(err));
-// console.log("0. 디텍트 실행");
-
-// if (response.status === 200) {
-
-
-// const text = await response.text();
-// detect = JSON.parse(text);
-// videoColor = detect.result;
-// console.log('2>(Room)실제 detect: ',detect.result);
-// setResult(detect.result);
-// console.log("3>(Room)useEffect안의 스탑워치: ",watch);
-
-// if(watch === 'false'){
-// detect.result = 'false';
-// console.log('4>(Room)detect 변경: ',detect.result);
-// }
-
-// console.log('5>(Room)두번째 detect: ',detect.result);
-
-// if(detect.result === 'true'){
-
-// num++;
-// yn_arr[num%2]=0;
-
-// if((yn_arr[0]+yn_arr[1])%2!=0 | start == 0){
-// now_yes=new Date();
-// console.log('NOW_YES: ',now_yes.getTime());
-// =======
var response;
if(mode) { //자동 측정 on 모드
- response = await fetch('https://192.168.0.28:5000/image', { //https://223.131.223.239:5000/image
+ response = await fetch('https://223.131.223.239:58292/image', { //https://223.131.223.239:5000/image
method: "POST",
body: formData,
signal: abortController.signal,
@@ -233,16 +370,19 @@ const Room = (props) => {
num++;
yn_arr[num%2]=0;
if(start == 0 | (yn_arr[0]+yn_arr[1])%2!=0){
- timeStart();
+ fullChange();
+ timeStart(); //필요
+ setWatch('true');
}
start++;
}else if(detect.result === 'false'){
num++;
yn_arr[num%2]=1;
if((yn_arr[0]+yn_arr[1])%2!=0){
- timeEnd();
+ exitFullChange();
+ timeEnd();
+ setWatch('false'); //0516 추가
}
-// >>>>>>> main
}
//위 코드랑 합치기 필요
@@ -311,8 +451,9 @@ const Room = (props) => {
const fetchStudyTime = async () => {
try{
+ axios.defaults.withCredentials = true;
const roomID = props.match.params.roomID;
- const response = await axios.patch('/api/studies/time/'+roomID,{study_time:studyTime_total/1000});
+ const response = await axios.patch('https://nudo-study.cf/api/studies/time/'+roomID,{study_time:studyTime_total/1000});
console.log(response.data);
if(response.data.code==="200"){
window.location.replace('/');
@@ -323,9 +464,12 @@ const Room = (props) => {
}
const enterHome = () =>{
- if( ((yn_arr[0]+yn_arr[1])==0 && studyTime_total>0) || (!mode && watch==='true')){ //mode on, off 둘 다 watch 기준으로 수정
+ //0516 mode && 추가, && studyTime_total>=0 삭제
+ //console.log("")
+ // ((mode && yn_arr[0]+yn_arr[1])==0) || (!mode && watch==='true') 0516 삭제, 수정
+ if( watch==='true'){ //mode on, off 둘 다 watch 기준으로 수정
+ console.log('#######################YES상태에서 나가기 누름'); //on mode의 측정 중, off mode의 측정 중 상황 모두 포함
timeEnd();
- console.log('YES상태에서 나가기 누름'); //on mode의 측정 중, off mode의 측정 중 상황 모두 포함
}
console.log('최종 공부시간(초):',studyTime_total/1000);
@@ -357,12 +501,15 @@ const Room = (props) => {
const modeClick = () =>{ //false : 자동모드 off , true: 자동모드 on
console.log("모드 바꿈");
const socket=socketRef.current;
+
//스탑워치가 작동 중이었다면, 스탑워치 멈출 때 시간 갱신
console.log("watch 상태 (작동중 클릭이면 true, 끊고 클릭이면 false여야", watch)
if(mode && watch === 'true' && detect.result === 'true'){ //mode on -> off 클릭일 때
num=0; //시간 측정 flag 초기화
- yn_arr = [0,0];
- flag = [1,1]; //socket-event flag 초기화
+ yn_arr = [1,1]; //0516 수정 , [false,false]
+ flag = [0,0]; //0516 수정, [false,false]
+ // yn_arr = [0,0];
+ //flag = [1,1]; //socket-event flag 초기화
n = 0;
timeEnd();
}else if(!mode && watch === 'true'){ //mode off -> on 클릭일 때
@@ -372,7 +519,7 @@ const Room = (props) => {
//timeStart(); //off 측정 중인 상태에서 on으로 갈 때 필요 //0505 삭제 (true, false인지도 모르는데 바로 시작하면 x)
}
- setClick(!click)
+ setClick(!click) //0516 왜 있지
mode = !mode; //true인 경우 : fetch x
//watch false로 바꾸기
if(!mode){ //off 모드면
@@ -382,8 +529,8 @@ const Room = (props) => {
socket.emit('false-event', { peer_tf: myID, dst_room: roomID, tf_state: 'false'}) //0325: 처음 상태 black
}else{ //on 모드
abortController = new AbortController();
- setClick(true)
- // getWatchValue('true'); //삭제
+ setClick(false) //0516 true-> false로 수정
+ getWatchValue('false'); //삭제 / 0516 다시 부활
n++;
flag[n%2] = 0;
videoColor = 'false'
@@ -392,24 +539,6 @@ const Room = (props) => {
//socket.emit : off -> stopwatch.js 에서, on -> Room.js에서 수행
}
-
- const videodivStyle = {
- position: 'relative',
- height: '45%',
- //width + margin = 50%
- width: '47%',
- margin: '0.3%',
- border: '2pt solid black',
- backgroundColor: 'black'
- }
-
- const peervideoStyle = {
- height: '100%' ,
- width: '100%',
- filter: 'brightness(1)',
- objectFit: 'cover'
- }
-
const outbuttonStyle = {
position: 'absolute',
left: '0px',
@@ -427,12 +556,19 @@ const Room = (props) => {
}
return (
+
-
-
- )
- })}
+ {peers.map((peer, index) => {
+ return (
+