Τεχνολογία

Με απλά λόγια

Το 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 σχεδιάζει και τις δύο ροές, και το MediaRecorder εκπέμπει ένα τμήμα κάθε 5 δευτερόλεπτα. Ο οικοδεσπότης καταχωρεί κάθε τμήμα στο POST /api/chunks/register (ένα σύντομης διάρκειας κλειδί μίας χρήσης δεμένο με τον διαγωνισμό, τη σειρά και το όριο byte), το μεταφορτώνει, το επαληθεύει με GET /verify και αναφέρει στο POST /receipt. Η αναπαραγωγή διαβάζει το GET /api/chunks/playlist/:id, και το υπάρχον βήμα οριστικοποίησης παράγει το VOD.

Λήψεις: το @ffmpeg/core 0.12.10 τρέχει σε αυτο-φιλοξενούμενο worker προγράμματος περιήγησης για μετατροπή MP4, με διαδρομή δομικού remux για εγγραφές που είναι ήδη συμβατές με MP4. Η πρόοδος και τα όρια μνήμης διαχειρίζονται στην υπηρεσία πελάτη.

Σε πραγματικό χρόνο: το SSE μέσω GET /api/sse μεταφέρει ζωντανές ενημερώσεις, και η σηματοδότηση χρησιμοποιεί HTTP polling· η παραγωγική διαδρομή δεν χρησιμοποιεί WebSocket.

Ποιότητα: το Vitest καλύπτει μονάδες και συμβόλαια UI, και το Playwright καλύπτει ροές προγράμματος περιήγησης από άκρη σε άκρη. Τα έγγραφα Markdown αποδίδονται με marked, και το PostCSS με Autoprefixer ολοκληρώνει τον σωλήνα CSS.