Công nghệ

Nói theo cách giản dị

Dueli chạy trong trình duyệt trên mạng toàn cầu của Cloudflare. Hai thí sinh gặp nhau trong một cuộc gọi video trực tiếp giữa các thiết bị của họ (WebRTC ngang hàng); khi mạng chặn đường đi trực tiếp, một máy chủ trung chuyển TURN giúp kết nối đi qua.

Trong một cuộc thi, trình duyệt kết hợp cả hai luồng camera thành một hình ảnh và ghi lại thành các phân đoạn ngắn 5 giây. Các phân đoạn được tải lên ngay khi tạo ra, có thể phát lại theo thứ tự, và được lắp ráp thành bản phát lại đầy đủ sau khi trận đấu kết thúc.

Các cuộc thi đã ghi hình có thể được tải xuống dưới dạng tệp MP4. Khi một bản ghi hình cần chuyển đổi, việc chuyển đổi chạy ngay trong trình duyệt của người truy cập với FFmpeg.wasm, nên tệp không bị gửi đến dịch vụ chuyển đổi bên ngoài.

Dữ liệu nền tảng nằm trong D1, các trang và API được xây dựng bằng Hono và TypeScript trên Cloudflare, và giao diện dùng Tailwind CSS. Cập nhật trực tiếp đến qua SSE và hỏi vòng.

Dành cho kỹ sư

Môi trường chạy: Cloudflare Pages/Workers với Hono 4 trên TypeScript. D1 (SQLite) là cơ sở dữ liệu. Vite dựng gói Worker, Tailwind CSS 4 tạo kiểu cho giao diện, và esbuild đóng gói các điểm vào của trình duyệt.

Phương tiện trực tiếp: một RTCPeerConnection của trình duyệt truyền WebRTC giữa chủ phòng và đối thủ. Máy chủ ICE được cấp cho từng phiên từ GET /api/signaling/ice-servers; Cloudflare Calls TURN (TURN_TOKEN_ID và TURN_API_TOKEN) hoặc coturn tự lưu trữ (TURN_URL và TURN_SECRET) có thể trung chuyển, với phương án dự phòng chỉ STUN khi cả hai đều không được cấu hình.

Ghi hình: một bộ tổng hợp canvas vẽ cả hai luồng, và MediaRecorder tạo ra một phân đoạn mỗi 5 giây. Chủ phòng đăng ký từng phân đoạn tại POST /api/chunks/register (một khóa dùng một lần ngắn hạn gắn với cuộc thi, thứ tự và giới hạn byte), tải nó lên, xác minh bằng GET /verify và báo cáo POST /receipt. Việc phát lại đọc GET /api/chunks/playlist/:id, và bước hoàn tất hiện có tạo ra VOD.

Tải xuống: @ffmpeg/core 0.12.10 chạy trong một worker trình duyệt tự lưu trữ để chuyển đổi MP4, với đường remux cấu trúc cho các bản ghi hình đã tương thích MP4. Tiến trình và giới hạn bộ nhớ được xử lý trong dịch vụ phía máy khách.

Thời gian thực: SSE qua GET /api/sse truyền các cập nhật trực tiếp, và signaling dùng hỏi vòng HTTP; đường dẫn môi trường sản xuất không dùng WebSocket.

Chất lượng: Vitest bao phủ các hợp đồng đơn vị và UI, và Playwright bao phủ các luồng trình duyệt từ đầu đến cuối. Tài liệu Markdown được kết xuất bằng marked, và PostCSS với Autoprefixer hoàn tất chuỗi xử lý CSS.