🎭 Warudo Cam

SOOP Warudo 스트리머를 위한 P2P 영상 전송 도구

SOOP에서 Warudo 아바타를 사용하는 스트리머 두 명이 함께 방송할 때, 상대방의 아바타 영상을 내 OBS로 가져와야 합니다. 보통 Discord 화면 공유를 쓰지만 720p 제한, 미국/유럽 서버 경유로 인한 지연, 화질 저하가 불가피합니다.

Warudo Cam은 이 문제를 해결합니다:

• P2P 직접 연결 — 중간 서버 없이 양쪽 PC끼리 직접 영상을 주고받습니다
• VP9 코덱 — H.264 대비 동일 비트레이트에서 30~50% 더 나은 화질
• 최대 4K 60fps — Discord의 720p 30fps 한계를 넘어섭니다
• 서버 비용 제로 — GitHub Pages에서 정적 파일로 호스팅, 영상 데이터는 P2P로 전송

• VP9 코덱 기본 지원 (H.264도 선택 가능)
• 해상도 프리셋: 최대(카메라 최고) / 4K / 1440p / 1080p / 720p
• 60fps / 30fps 프레임레이트 선택
• 비트레이트 슬라이더 4~30 Mbps (기본 12 Mbps, 최소 8 Mbps 보장)
• 수신측 실시간 영상 보정 11종 (선명도, 색상, 변환)
• 자동 재연결: ICE restart 최대 5회 → 풀 재연결 최대 3회
• 실시간 통계 모니터링 (비트레이트, 해상도, fps, 패킷 손실, 코덱, RTT)
• OBS 브라우저 소스에 최적화 (연결 후 배경 투명, UI 자동 숨김)

송신 (Push)                    수신 (View)
  Warudo                         OBS
    ↓                             ↑
  Virtual Camera                  │
    ↓                             │
  index.html ──── WebRTC P2P ──── view.html
           (STUN/TURN으로 NAT 통과)

1. 송신측이 연결 코드(SDP Offer) 를 생성합니다
2. 카톡이나 디코로 코드를 상대방에게 전달합니다
3. 수신측이 코드를 붙여넣으면 응답 코드(SDP Answer) 가 생성됩니다
4. 응답 코드를 송신측에 돌려주면 P2P 연결이 완료됩니다

연결 코드는 LZ-String으로 압축되어 카톡/디코에 붙여넣기 편한 크기입니다. STUN 서버(Google, Cloudflare)로 NAT를 통과하고, 안 되면 TURN 서버로 릴레이합니다.

• Chrome 브라우저 (데스크톱)
• Warudo + Virtual Camera 활성화
• OBS Studio (영상 수신 시)

1. Push 페이지를 Chrome에서 엽니다
2. 카메라 목록에서 Warudo Virtual Camera를 선택합니다
3. 필요하면 송신 설정(해상도, fps, 비트레이트, 코덱)을 조정합니다
4. "연결 코드 생성" 버튼을 클릭하고, 생성된 코드를 "복사" 합니다
5. 카톡이나 디코로 상대방에게 코드를 보냅니다
6. 상대방이 보내준 응답 코드를 하단 입력칸에 붙여넣고 "연결" 을 클릭합니다
7. 상태 표시가 "연결됨 ✓" 로 바뀌면 전송이 시작됩니다

1. View 페이지를 Chrome에서 엽니다
2. 상대방이 보낸 연결 코드를 입력칸에 붙여넣고 "연결" 을 클릭합니다
3. 생성된 응답 코드를 복사해서 상대방에게 돌려보냅니다
4. 연결이 완료되면 영상이 전체 화면으로 표시됩니다

OBS에서 직접 View 페이지를 브라우저 소스로 추가하면 별도 캡처 없이 영상을 받을 수 있습니다.

1. OBS → 소스 추가 → 브라우저
2. URL에 View 페이지 주소를 입력합니다
3. 너비/높이를 송신 해상도에 맞춥니다 (예: 1920×1080)
4. FPS를 커스텀 프레임레이트로 설정합니다 (60 권장)
5. 연결 과정은 위 View 사용법과 동일합니다
6. 연결이 완료되면 설정 UI가 사라지고 영상만 표시됩니다

스크롤바가 보이면 커스텀 CSS에 body { overflow: hidden; } 를 추가하세요.

Push 페이지의 송신 설정 패널에서 영상 품질을 조정합니다.

참고 사항:

• 최대 해상도는 카메라가 지원하는 가장 높은 해상도를 사용합니다 (최대 4096×2160)
• 비트레이트를 4 Mbps 이하로 내려도 최소 8 Mbps가 보장됩니다
• 해상도나 fps를 변경하면 카메라가 자동으로 재획득됩니다
• VP9가 안 되는 환경(구형 하드웨어)에서는 H.264를 선택하세요

View 페이지에서 연결 후 우측 상단의 ⚙️ 톱니바퀴 아이콘을 클릭하면 영상 보정 패널이 열립니다. 연결 상태에서는 아이콘이 30% 투명도로 표시되며, 마우스를 올리면 나타납니다.

화질 향상 토글로 모든 필터를 한번에 끄고 켤 수 있습니다. 초기화 버튼을 누르면 모든 값이 기본값으로 돌아갑니다.

연결 후 통계 패널이 자동으로 표시됩니다 (2초 간격 갱신).

• Push 페이지: 연결 후 하단에 인라인으로 표시
• View 페이지: S 키를 눌러 통계 오버레이를 토글합니다

색상 코드:

• 🟢 초록: 양호 (비트레이트 > 8 Mbps, fps ≥ 28, 패킷 손실 < 1%)
• 🟡 노랑: 주의 (비트레이트 48 Mbps, fps 2028, 패킷 손실 1~5%)
• 🔴 빨강: 위험 (비트레이트 < 4 Mbps, fps < 20, 패킷 손실 > 5%)

대부분의 환경에서는 STUN만으로 P2P 연결이 됩니다. 하지만 Symmetric NAT 환경(일부 KT, SK, LG U+ 공유기)에서는 P2P가 불가능해서 TURN 서버가 필요합니다.

TURN 서버 설정 가이드: docs/coturn-setup.md

rtc.js 상단의 ICE_SERVERS 배열에서 TURN 서버 정보를 수정하세요:

var ICE_SERVERS = [
  { urls: 'stun:stun.l.google.com:19302' },
  { urls: 'stun:stun.cloudflare.com:3478' },
  { urls: 'turn:YOUR_TURN_SERVER:443?transport=tcp', username: 'TURN_USER', credential: 'TURN_PASS' }
];

YOUR_TURN_SERVER, TURN_USER, TURN_PASS를 실제 서버 정보로 교체하세요.

서버 사이드 코드 없음 — 시그널링은 수동 SDP 복사/붙여넣기로 처리합니다.