Տեխնոլոգիա

Պարզ ասած

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-ը աշխատում է ինքնուրույն հյուրընկալված զննարկչի worker-ում՝ MP4 փոխակերպման համար, իսկ արդեն MP4-համատեղելի ձայնագրությունների համար կա կառուցվածքային remux ուղի: Ընթացքը և հիշողության սահմանները կառավարվում են հաճախորդի ծառայությունում:

Իրական ժամանակ. SSE-ը GET /api/sse-ի միջոցով փոխանցում է ուղիղ թարմացումներ, իսկ ազդանշանումը օգտագործում է HTTP պարբերական հարցումներ. արտադրական ուղին WebSocket չի օգտագործում:

Որակ. Vitest-ը ընդգրկում է միավորային և UI պայմանագրերը, իսկ Playwright-ը՝ զննարկչի ամբողջական հոսքերը: Markdown փաստաթղթերը մշակվում են marked-ով, իսկ PostCSS-ը Autoprefixer-ի հետ ավարտում է CSS հոսքագիծը: