เทคโนโลยี

อธิบายแบบเข้าใจง่าย

Dueli ทำงานในเบราว์เซอร์บนเครือข่ายระดับโลกของ Cloudflare ผู้แข่งขันสองคนประจันหน้ากันในการเรียกวิดีโอสดระหว่างอุปกรณ์ของพวกเขา (WebRTC แบบ peer-to-peer) เมื่อเครือข่ายปิดกั้นเส้นทางตรง รีเลย์ TURN จะช่วยให้การเชื่อมต่อผ่านไปได้

ระหว่างการแข่งขัน เบราว์เซอร์รวมภาพจากกล้องทั้งสองเป็นภาพเดียวและบันทึกเป็นส่วนย่อยสั้น ๆ ชิ้นละ 5 วินาที ส่วนย่อยถูกอัปโหลดทันทีที่ผลิตได้ เล่นย้อนหลังตามลำดับได้ และถูกประกอบเป็นการเล่นซ้ำฉบับเต็มหลังการแข่งขันจบ

การแข่งขันที่บันทึกไว้ดาวน์โหลดเป็นไฟล์ MP4 ได้ เมื่อไฟล์บันทึกต้องแปลง การแปลงจะทำงานภายในเบราว์เซอร์ของผู้เยี่ยมชมด้วย FFmpeg.wasm ไฟล์จึงไม่ถูกส่งไปยังบริการแปลงภายนอก

ข้อมูลแพลตฟอร์มอยู่ใน D1 หน้าเว็บและ API สร้างด้วย Hono และ TypeScript บน Cloudflare และส่วนติดต่อใช้ Tailwind CSS การอัปเดตสดมาทาง SSE และ polling

สำหรับวิศวกร

รันไทม์: Cloudflare Pages/Workers พร้อม Hono 4 บน 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 compositor วาดภาพจากทั้งสองแหล่ง และ MediaRecorder ส่งออกส่วนย่อยทุก 5 วินาที ผู้จัดลงทะเบียนส่วนย่อยแต่ละชิ้นที่ POST /api/chunks/register (คีย์ครั้งเดียวอายุสั้นที่ผูกกับการแข่งขัน ลำดับ และเพดานไบต์) อัปโหลด ตรวจสอบด้วย GET /verify และรายงานที่ POST /receipt การเล่นย้อนหลังอ่านจาก GET /api/chunks/playlist/:id และขั้นตอนปิดกระบวนการที่มีอยู่จะผลิต VOD

การดาวน์โหลด: @ffmpeg/core 0.12.10 ทำงานในเวิร์กเกอร์เบราว์เซอร์ที่โฮสต์เองเพื่อแปลงเป็น MP4 พร้อมเส้นทาง remux เชิงโครงสร้างสำหรับไฟล์บันทึกที่รองรับ MP4 อยู่แล้ว ความคืบหน้าและขีดจำกัดหน่วยความจำจัดการในเซอร์วิสฝั่งไคลเอนต์

เรียลไทม์: SSE ผ่าน GET /api/sse ส่งการอัปเดตสด และการส่งสัญญาณใช้ HTTP polling เส้นทางในระบบผลิตจริงไม่ใช้ WebSocket

คุณภาพ: Vitest ครอบคลุมการทดสอบยูนิตและสัญญา UI และ Playwright ครอบคลุมเส้นทางเบราว์เซอร์ตั้งแต่ต้นจนจบ เอกสาร Markdown เรนเดอร์ด้วย marked และ PostCSS พร้อม Autoprefixer ปิดท้ายกระบวนการ CSS