← ProjetsSC.03 / 09
VideoKit
Éditeur vidéo dans le navigateur
- Rôle
- Développeur Frontend
- Contexte
- Tekab.dev
- Période
- 2023
- En ligne
- Produit privé
01 — Vue d'ensemble
Un éditeur vidéo qui fonctionne dans le navigateur, construit autour d'une timeline multipiste en glisser-déposer.
Le défi
Le traitement média est lourd, et une timeline doit rester parfaitement fluide pendant que l'utilisateur déplace des clips et garde l'audio et la vidéo alignés.
Stack
- React
- Vue 3
- TypeScript
- Web Workers
02 — Architecture
Ce que j'ai construit, couche par couche.
- ■ Interface
- □ API & logique
- □ Données
- □ Cloud & livraison
- ■ Qualité & sécurité
- InterfaceTimeline UIInterfaceEditor state
- InterfaceEditor stateInterfaceWeb Workers
- InterfaceWeb WorkersQualité & sécurité60 FPS main thread
- Interface
- Timeline multipiste en glisser-déposer avec alignement audio/vidéo.
- Qualité & sécurité
- Traitement média hors du thread principal : rendu tenu à 60 FPS.
03 — Ce que j'ai fait
- 01
Timeline multipiste en glisser-déposer en React et Vue 3, avec alignement audio/vidéo.
- 02
Traitements média déportés dans des Web Workers pour libérer le thread principal et garder un rendu à 60 FPS.
- 03
Conception d'un parcours utilisateur complexe en plusieurs étapes, piloté par l'état.
04 — Résultats
Rendu à 60 FPS pendant le traitement média