ტექნოლოგია

მარტივად რომ ვთქვათ

Dueli ბრაუზერში მუშაობს Cloudflare-ის გლობალურ ქსელზე. ორი მონაწილე პირდაპირ ვიდეოზარით ხვდება ერთმანეთს საკუთარი მოწყობილობებიდან (WebRTC peer-to-peer); როცა ქსელი პირდაპირ გზას ბლოკავს, TURN რელე კავშირს გზას უხსნის.

კონკურსის დროს ბრაუზერი ორივე კამერის სურათს ერთ კადრში აერთიანებს და მოკლე, 5-წამიან ნაწილებად იწერს. ნაწილები წარმოქმნისასვე იტვირთება, თანმიმდევრობით იკვრება და მატჩის დასრულების შემდეგ სრულ ჩანაწერად იკრიბება.

ჩაწერილი კონკურსები MP4 ფაილად ჩამოიტვირთება. როცა ჩანაწერს გადაქცევა სჭირდება, გადაქცევა სტუმრის ბრაუზერშივე სრულდება FFmpeg.wasm-ით, ამიტომ ფაილი გარე გადამქმნელ სერვისს არ გადაეცემა.

პლატფორმის მონაცემები D1-ში ცხოვრობს, გვერდები და API-ები Hono-სა და TypeScript-ზეა აწყობილი Cloudflare-ზე, ინტერფეისი კი Tailwind CSS-ს იყენებს. პირდაპირი განახლებები SSE-ით და პოლინგით მოდის.

ინჟინრებისთვის

გამშვები გარემო: 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-ზე (ხანმოკლე, ერთჯერადი გასაღები, რომელიც კონკურსს, თანმიმდევრობასა და ბაიტების ზღვარსაა მიბმული), ტვირთავს მას, გადაამოწმებს GET /verify-ით და შედეგს POST /receipt-ზე ახსენებს. დაკვრა კითხულობს GET /api/chunks/playlist/:id-ს, ხოლო არსებული საბოლოო ნაბიჯი სრულ ვიდეოჩანაწერს (VOD) ქმნის.

ჩამოტვირთვები: @ffmpeg/core 0.12.10 საკუთარ სერვერზე განთავსებულ ბრაუზერულ ვორკერში მუშაობს MP4-ზე გადასაქცევად, სტრუქტურული remux გზით იმ ჩანაწერებისთვის, რომლებიც უკვე MP4-თავსებადია. პროგრესსა და მეხსიერების ზღვრებს კლიენტის სერვისი მართავს.

რეალურ დროში: SSE GET /api/sse-ით პირდაპირ განახლებებს ატარებს, სიგნალიზაცია კი HTTP პოლინგს იყენებს; სამუშაო ვერსიის გზა WebSocket-ს არ იყენებს.

ხარისხი: Vitest ერთეულ ტესტებსა და UI კონტრაქტებს ფარავს, Playwright კი ბრაუზერულ ნაკადებს დასაწყისიდან ბოლომდე. Markdown დოკუმენტები marked-ით იხატება, PostCSS კი Autoprefixer-თან ერთად CSS კონვეიერს ასრულებს.