—KOKO BEATS Filters

Grille 3×3 rythmée avec filtres vidéo en temps réel et enregistrement instantané.

Lancer l’outil

Fonctionnalités

  • Grille 3×3 animée
  • 8 filtres vidéo
  • Switch caméra avant/arrière
  • Enregistrement en .webm
  • 100% local, aucune donnée envoyée

Comment ça marche

  • 1. Autorisez la caméra
  • 2. Choisissez un filtre
  • 3. Enregistrez votre vidéo

Confidentialité

Tout se passe localement dans votre navigateur. Aucune vidéo n’est envoyée sur internet.

Détail de l’application en ligne gratuite

« KOKO BEATS Filters » est une application de filtres vidéo en temps réel pour navigateur web. Voici ce qu’il fait :

🎯 Fonctionnalité principale

L’application crée une interface interactive qui capture le flux de votre caméra et applique des effets visuels en temps réel, avec une grille animée de 3×3 cellules.

🔧 Caractéristiques techniques

Interface utilisateur

  • Grille de 9 cellules vidéo (3×3) qui affichent toutes le même flux caméra
  • Animation rythmée : une cellule aléatoire s’illumine avec une bordure dorée toutes les 0,5 secondes
  • Design responsive optimisé pour mobile (max 450px)

🎨 8 filtres vidéo disponibles

  1. NORMAL – Pas d’effet
  2. N&B – Noir et blanc contrasté (grayscale + contrast)
  3. NEON – Effet néon coloré (hue-rotate + saturate)
  4. RETRO – Style sépia vintage
  5. X-RAY – Inversion des couleurs
  6. GHOST – Transparence fantomatique avec ombre bleue
  7. HOT – Saturation chaude rouge/orange
  8. CYBER – Teinte futuriste violet/bleu

🎮 Contrôles principaux

↻ CAM : Bascule entre caméra avant (selfie) et arrière

  • Utile sur mobile/tablette
  • Change le facingMode entre 'user' et 'environment'

🔴 REC : Enregistrement vidéo

  • Démarre/arrête l’enregistrement
  • Capture le canvas à 25 FPS (450×450 pixels)
  • Télécharge automatiquement en format .webm
  • Nom du fichier : koko-beats-[timestamp].webm

📱 Panneau d’aide intégré

  • Bouton ? en haut à droite
  • Mode d’emploi complet en overlay
  • Instructions détaillées sur les filtres, contrôles et confidentialité

🔒 Confidentialité

« Tout se passe localement dans votre navigateur. Aucune vidéo n’est envoyée sur internet. »

Tout le traitement est côté client via l’API WebRTC et Canvas.

⚙️ Aspects techniques

  • Rendu : Canvas 2D à ~30 FPS (limiteur à 33ms)
  • Capture caméra : MediaDevices API avec résolution idéale 480×480
  • Enregistrement : MediaRecorder API
  • Filtres CSS : Appliqués via propriété filter CSS native
  • Optimisations mobile : -webkit-tap-highlight-color, playsinline, zones tactiles 44px minimum

Prérequis : navigateur moderne avec support WebRTC

C’est essentiellement un studio vidéo créatif dans le navigateur pour créer du contenu avec des effets visuels stylisés ! 🎥✨