hae02y / lab

EXP-006 · 2026.05 · Misc

Video Roulette

랜덤 상대와 1:1 화상 통화. WebRTC P2P로 서버 안 거치고 직접 연결

Open demo Source
video-roulette.vercel.appCheck
Video Roulette 화면
Fig. 1 — Video Roulette, 배포된 화면

01Question

미디어 서버 없이 모르는 사람 둘을 영상으로 이어줄 수 있을까?

02Approach

  1. 01

    브라우저마다 PeerJS로 peer ID를 만들고, 매칭 API에 대기열 등록을 요청한다.

  2. 02

    Redis 리스트를 대기열로 쓰고, 먼저 기다리던 사람을 꺼내 서로의 peer ID를 교환한다.

  3. 03

    매칭된 두 사람 중 한쪽(caller)만 통화를 걸고, 다른 쪽은 받기만 한다.

  4. 04

    영상과 음성은 STUN으로 NAT를 넘어 브라우저끼리 직접 흐른다. 서버는 소개만 한다.

03Findings

Note A

둘 다 전화를 걸면 아무도 연결되지 않는다

초기엔 양쪽이 동시에 call을 시도해 연결이 꼬였다. 매칭 결과에 caller 플래그를 넣어 한쪽만 걸게 하자 해결됐다.

Note B

폴링 콜백의 stale closure

매칭 폴링이 오래된 peer ID를 참조하는 버그가 있었다. state 대신 ref(peerRef.current.id)를 읽도록 고쳤다.

04Log

  1. 랜덤 영상 채팅 첫 연결

  2. 랜덤 한글 닉네임

  3. 하이드레이션 불일치 수정

  4. caller만 거는 P2P 매칭

  5. stale closure 버그 수정