기술

평이한 언어로

Dueli는 Cloudflare의 글로벌 네트워크에서 브라우저에서 실행됩니다. 두 경쟁자는 각자의 기기 사이에서 라이브 비디오 통화를 합니다(WebRTC 피어 투 피어); 네트워크가 직접 경로를 차단할 경우 TURN 릴레이가 연결을 도와줍니다.

경쟁 중에 브라우저는 두 카메라 피드를 하나의 이미지로 결합하고 5초 단위의 조각으로 기록합니다. 조각들은 생성될 때마다 업로드되며, 순서대로 재생할 수 있으며, 경쟁이 끝난 후 전체 리플레이로 조립됩니다.

녹화된 경쟁은 MP4 파일로 다운로드할 수 있습니다. 변환이 필요한 경우 변환은 방문자의 브라우저 내에서 FFmpeg.wasm으로 실행되므로 파일이 외부 변환 서비스로 전송되지 않습니다.

플랫폼 데이터는 D1에 저장되며, 페이지와 API는 Cloudflare에서 Hono와 TypeScript로 구축되고 인터페이스에는 Tailwind CSS가 사용됩니다. 실시간 업데이트는 SSE 및 폴링을 통해 도착합니다.

엔지니어를 위한 내용

런타임: Hono 4를 사용한 Cloudflare Pages/Workers 및 TypeScript. D1(SQLite)이 데이터베이스입니다. Vite가 Worker 번들을 빌드하고, Tailwind CSS 4가 인터페이스를 스타일링하며, esbuild가 브라우저 진입점을 번들링합니다.

라이브 미디어: 브라우저 RTCPeerConnection이 호스트와 상대방 간에 WebRTC를 전달합니다. ICE 서버는 세션별로 GET /api/signaling/ice-servers에서 발급됩니다; Cloudflare Calls TURN(TURN_TOKEN_ID 및 TURN_API_TOKEN) 또는 자체 호스팅 coturn(TURN_URL 및 TURN_SECRET)이 릴레이할 수 있으며, 둘 다 구성되지 않은 경우 STUN 전용으로 대체됩니다.

녹화: 캔버스 컴포지터가 두 피드를 그리고 MediaRecorder가 5초마다 조각을 출력합니다. 호스트는 각 조각을 POST /api/chunks/register에 등록합니다(경쟁, 시퀀스 및 바이트 상한에 바인딩된 단기 일회용 키), 업로드하고 GET /verify로 확인하며 POST /receipt를 보고합니다. 재생은 GET /api/chunks/playlist/:id을 읽고, 기존의 마무리 단계가 VOD를 생성합니다.

다운로드: @ffmpeg/core 0.12.10이 자체 호스팅 브라우저 워커에서 MP4 변환을 실행하며, 이미 MP4 호환인 녹화물의 경우 구조적 리맵 경로를 사용합니다. 진행률 및 메모리 제한은 클라이언트 서비스에서 처리됩니다.

실시간: GET /api/sse를 통한 SSE가 실시간 업데이트를 전달하고, 신호 전달은 HTTP 폴링을 사용합니다; 프로덕션 경로는 WebSocket을 사용하지 않습니다.

품질: Vitest가 단위 및 UI 계약을, Playwright가 엔드투엔드 브라우저 흐름을 커버합니다. Markdown 문서는 marked로 렌더링되며, Autoprefixer가 있는 PostCSS가 CSS 파이프라인을 완료합니다.