라이브스트리밍-방송

라이브 스트리밍 · 방송 오버레이 (broadcast)

상위: 홈 · 관련: 웹-독립페이지 · 앱-StatPad · 아키텍처

개요

경기 유튜브 라이브를 네이버 PRISM Live Studio로 송출하고, 화면 하단에 점수 오버레이를 얹는다. 오버레이 소스는 웹의 /broadcast/:gameId 페이지다.

왜 broadcast 페이지인가 (점수만 표시)

/broadcast/:gameId(BroadcastScoreboard)는 오버레이 전용으로 설계됨:

• 배경 투명(background: transparent), 크기 1280×100px의 점수 바 하나 (BroadcastScoreboard.css)
• 즉 “딱 점수 표시 만큼”만 렌더 → 오버레이를 작게 잡을 수 있음
• ⚠️ 전체화면을 잡아 오버레이하면, 폰으로 라이브스트리밍 시 화면이 밀리는(랙) 현상 발생 → 반드시 점수 바 크기만큼만 좁게 잡을 것

운영 절차 (실전 워크플로우)

1. **앱(novato_app)**을 연다.
2. 경기의 StatPad 진입 → 스탯 입력 화면에서 방송 주소 복사 (_getBroadcastUrl → .../broadcast/<gameId>).
3. 복사한 주소를 PRISM의 웹/브라우저 소스로 추가.
4. 오버레이를 하단에 점수 바 크기만큼만 배치 (전체화면 X).
5. 유튜브로 라이브 송출 시작.
6. StatPad에서 점수를 입력하면 → 실시간 반영 (아래 데이터 흐름).

데이터 흐름 (실시간)

앱 StatPad 점수 입력 → Supabase live_scores (Realtime)
       └────────────▶ /broadcast/:gameId 오버레이가 실시간 구독·표시

• 실시간 구독: LiveScoreService.subscribeToLiveScore
• 표시 모드(display_mode): score(기본) / player_stats(득점자) / team_info. 오버레이는 보통 score.
• +1점 규칙(녹색 견장) 반영됨 → 앱-StatPad

관련 방송 라우트 상태

라우트	용도	상태
/broadcast/:gameId	PRISM 오버레이 점수 바 (현행)	🟢 사용 중
/tvbroadcast/:gameId	TV 방송용(앱 StatPad에 복사 버튼 존재)	🔴 더 이상 안 씀 → 웹-독립페이지
/mobile-broadcast/:gameId	모바일 방송	🔴 사용성 없음, 폐기 대상
/broadcast24/:gameId	구 방송 버전	🔴 미사용

✅ 앱 StatPad의 TV 방송 주소 복사 버튼(_getTvBroadcastUrl)은 v1.0.1에서 제거됨. 앱은 이제 /broadcast(일반 오버레이)만 복사 제공.