2-10주차

2-10주차 기능 추가 및 수정 사항

v-talk : https://vtalk2025-9c90d.web.app/
스마트 회의 플랫폼 다운로드 (상시 업데이트) : https://github.com/moth36/v-talk-project-university/tree/master

10주차 평가 목록

test server : https://v-talk-1f552.web.app/
호스트가 화상 공유 종료 버튼을 누르면 뷰어도 같이 종료 구현

호스트가 화상 공유 종료 버튼을 누르면 뷰어도 같이 종료 구현

1. 개요

V-Talk의 화상공유 기능(WebRTC 기반)은 다자간 회의 중 호스트(발신자)가 공유를 종료했을 때
뷰어(수신자) 측 화면이 즉시 닫히지 않는 문제가 존재 했습니다.
본 개선에서는 Firebase Realtime Database의 이벤트 감지(onChildRemoved) 를 활용하여
호스트 종료 시 뷰어 화면을 자동으로 종료하도록 기능을 추가 했습니다.

2. 기존 문제점

구분	문제 내용
이벤트 감지 실패	호스트 종료 시 `videoChatUsers` 노드 전체를 한 번에 삭제하여 `onChildRemoved` 트리거가 발생하지 않음
뷰어 비정상 유지	뷰어 화면(`remoteVideo`)이 계속 남아 있음
PeerConnection 누적	연결이 닫히지 않아 리소스 점유 지속

3. 개선 방법

(1) 데이터 삭제 로직 수정

기존: await remove(ref(database, "videoChatUsers/${roomId}"))
→ 부모 노드 전체 삭제
변경: 각 자식 노드를 개별 삭제하여 onChildRemoved 트리거 발생 보장

(2) 뷰어 감지 리스너 추가

뷰어 측에서 onChildRemoved를 등록하여 호스트의 UID가 삭제되면 자동 종료 수행.

(3) 호스트 UID 동기화

뷰어가 참여(joinVideoChat)할 때 currentVideoHostUid를 저장하도록 수정.

4. 동작 흐름도

`호스트 [종료 버튼 클릭]`

`↓`

`clearVideoChatData() 실행`

`↓`

`videoChatUsers 하위 UID 개별 remove()`

`↓`

`뷰어 측 onChildRemoved 감지`

`↓`

`remoteVideo 정리 및 PeerConnection close()`

`↓`

`UI "화상 공유: 종료됨" 표시`

5. 개선 효과

항목	개선 전	개선 후
뷰어 화면 종료	수동 종료 필요	자동 종료
연결 해제	일부 남음	자동 해제
리소스 낭비	존재	제거됨
사용자 경험	불편	자연스럽고 안정적

6. 테스트 결과

테스트 항목	기대 결과	실제 결과
호스트가 화상공유 종료	뷰어 화면 자동 종료	✅ 정상 작동
다수 뷰어 존재 시	모든 뷰어 일괄 종료	✅ 정상 작동
재참여 시	정상 재연결	✅ 정상 작동

7. 결론

본 개선을 통해 호스트 종료 시 모든 뷰어의 영상이 자동 종료되며, Firebase의 이벤트 기반 구조를 활용해 비동기 동기화 문제 해결 | 결과적으로 시스템의 안정성과 사용자 경험 향상.

미구현 기능 (추후 추가 예정)

기존에 있던 코드와 통합

스마트 회의 플랫폼