2-7주차 기능 추가 및 수정 사항
- v-talk : https://v-chat-ade97.web.app/
- 스마트 회의 플랫폼 다운로드 (상시 업데이트) : https://github.com/moth36/v-talk-project-university
7주차 평가 목록
- 화상 공유 구현 (아직 불안정 하므로 test server 구현)
- test server : https://v-talk-1f552.web.app/
화상 공유 구현 (아직 불안정 하므로 test server 구현)
1. 개요
프로젝트명: V-Talk (WebRTC 기반 스마트 회의 플랫폼)
목표: 사용자 간 실시간 화상 회의 및 화면 공유 기능을 제공하여 원격 협업을 효율적으로 수행할 수 있도록 지원
사용 기술:
- WebRTC: 실시간 미디어 스트리밍 (비디오/오디오)
- Firebase Realtime Database (RTDB): 시그널링(Signaling) 처리 및 연결 관리
- Firestore: 사용자 및 채팅방 데이터 관리
- JavaScript (ES6): 클라이언트 로직 구현
2. 구현 기능 요약
(1) 화상 공유 시작 (호스트)
- 호스트가 “화상 공유 시작” 버튼을 클릭하면
navigator.mediaDevices.getUserMedia()를 통해 비디오 스트림을 가져옴 - 가져온 스트림은
<video id="localVideo">요소에 표시되고, Firebase RTDB의videoChatUsers/{roomId}경로에 **호스트 정보(newUid 포함)**를 등록 - 이후 호스트는 PeerConnection을 생성하고 Offer를 Firebase에 저장하여 뷰어가 수신할 수 있도록 함
(2) 화상 공유 보기 (뷰어)
- 뷰어는 채팅창에 표시된
[보기]버튼을 클릭하면joinVideoChat(hostNewUid)함수를 통해 호스트의 Offer를 수신 - Offer를 기반으로 PeerConnection을 생성하고 Answer를 생성하여 Firebase로 전송
- 호스트는 해당 Answer를 수신해 연결을 확립하고, 뷰어의
<video id="remoteVideo">에 호스트 화면이 표시됨
(3) 연결 관리 및 종료
- ICE Candidate는
videoChatCandidates/{roomId}경로를 통해 교환 - 화상 공유 종료 시, 모든 PeerConnection과 관련 Firebase 데이터(
videoChatOffers,videoChatCandidates,videoChatUsers)를 정리
3. 주요 기술 구조
| 항목 | 설명 |
|---|---|
| Signaling | Firebase RTDB 경로(videoChatOffers, videoChatCandidates, videoChatUsers) 사용 |
| 스트림 관리 | localVideo, remoteVideo DOM 요소로 로컬/원격 스트림 표시 |
| PeerConnection 관리 | videoPeerConnections[roomId][uid] 구조로 다자간 연결 관리 |
| UI 요소 | “화상 공유 시작 / 종료” 버튼, “보기” 버튼, “화상 공유 종료됨” 안내 메시지 |
4. 구현 결과
- 호스트가 화상 공유를 시작하면 정상적으로 영상이 표시됨
- 뷰어는 “보기” 버튼 클릭 시 호스트의 영상을 수신하고 시청 가능
호스트가 화상 공유를 시작 할 때
뷰어가 호스트의 화상 공유를 보기 버튼을 눌러 참여 할 때
호스트가 화상 공유를 종료 할 때
미구현 기능 (추후 추가 예정)
- 호스트가 화상 공유 종료 버튼을 누르면 뷰어도 같이 종료 되게끔 만들 것.
Leave a Reply