技術

平易に言うと

DueliはCloudflareのグローバルネットワーク上でブラウザで実行されます。2人の競技者が、それぞれのデバイス間でライブビデオコールで対戦します（WebRTCピアツーピア）；ネットワークが直接の経路をブロックした場合、TURNリレーが接続を支援します。

競技中、ブラウザは両方のカメラ映像を1つの画像に組み合わせ、5秒の短いチャンクとして記録します。チャンクは生成され次第アップロードされ、順番に再生でき、試合終了後に完全なリプレイに組み立てられます。

記録された競技はMP4ファイルとしてダウンロードできます。変換が必要な場合、変換は訪問者のブラウザ内でFFmpeg.wasmで実行されるため、ファイルは外部の変換サービスに送信されません。

プラットフォームのデータはD1に保存され、ページとAPIはCloudflare上でHonoとTypeScriptで構築され、インターフェースはTailwind CSSを使用します。ライブ更新はSSEとポーリングで到着します。

エンジニア向け

ランタイム：Cloudflare Pages/Workers、Hono 4 on 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のみのフォールバックが使用されます。

録画：canvasコンポジターが両方の映像を描画し、MediaRecorderが5秒ごとにチャンクを出力します。ホストは各チャンクをPOST /api/chunks/registerに登録（競技、シーケンス、バイト上限にバインドされた短期間のワンタイムキー）、アップロードし、GET /verifyで検証し、POST /receiptで報告します。再生はGET /api/chunks/playlist/:idを読み取り、既存のfinalizeステップがVODを生成します。

ダウンロード：@ffmpeg/core 0.12.10がセルフホストのブラウザワーカー内でMP4変換を実行し、既にMP4互換の録画用には構造的なリmuxパスを使用します。進捗とメモリ制限はクライアントサービスで処理されます。

リアルタイム：GET /api/sse経由のSSEがライブ更新を伝え、シグナリングはHTTPポーリングを使用します。本番環境のパスではWebSocketは使用されません。

品質：VitestがユニットとUIコントラクトをカバーし、Playwrightがエンドツーエンドのブラウザフローをカバーします。Markdownドキュメントはmarkedでレンダリングされ、PostCSSとAutoprefixerがCSSパイプラインを完成させます。