Технология

Қарапайым тілде

Dueli браузерде Cloudflare-дің ғаламдық желісінде жұмыс істейді. Екі қатысушы құрылғыларының арасындағы тікелей видеошақыруда кездеседі (WebRTC peer-to-peer); желі тікелей жолды тосып қалса, TURN делдалы байланысты өткізеді.

Жарыс кезінде браузер екі камера көрінісін бір суретке біріктіріп, оны қысқа 5 секундтық бөліктермен жазады. Бөліктер жасалған сайын жүктеледі, ретімен ойнатыла алады және жарыс аяқталған соң толық қайта ойнатуға құрастырылады.

Жазылған жарыстарды MP4 файл ретінде жүктеп алуға болады. Жазбаны түрлендіру керек болса, түрлендіру келушінің браузерінде FFmpeg.wasm арқылы жүреді, сондықтан файл сыртқы түрлендіру қызметіне жіберілмейді.

Платформа деректері D1-де тұрады, беттер мен API-лер Cloudflare үстінде Hono мен TypeScript арқылы жасалған, интерфейс Tailwind CSS қолданады. Тікелей жаңартулар SSE мен сұрау салу арқылы келеді.

Инженерлер үшін

Орындау ортасы: Cloudflare Pages/Workers, TypeScript үстіндегі Hono 4. Дерекқор — 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 түрлендіру үшін жұмыс істейді, MP4-үйлесімді жазбалар үшін құрылымдық remux жолы бар. Барыс пен жад шектері клиент қызметінде басқарылады.

Нақты уақыт: GET /api/sse арқылы SSE тікелей жаңартуларды тасымалдайды, сигнал алмасу HTTP сұрауын қолданады; өндірістік жол WebSocket қолданбайды.

Сапа: Vitest бірлік және UI келісімшарттарын қамтиды, Playwright браузердегі басынан соңына дейінгі ағындарды қамтиды. Markdown құжаттары marked арқылы көрсетіледі, ал PostCSS пен Autoprefixer CSS тізбегін аяқтайды.