Discord Video Compressor

Comprime i video per mandarli su Discord, senza caricarli da nessuna parte

Cosa fa

Strumento gratuito che riduce le dimensioni di un video per rispettare i limiti di Discord. Tutto avviene nel browser: il video non lascia mai il computer dell'utente. Nello stesso sito c'è un calcolatore per Twitch.

Come guadagna

Strumento gratuito: siti come questo di solito guadagnano con la pubblicità. Il progetto è in vetrina su SideProjectors.

Rendilo tuo

• Lo stesso per i limiti di WhatsApp, email ed email certificata (PEC), che in Italia servono a tutti.
• Una serie di piccoli strumenti per chi crea contenuti: tagliare video, togliere l'audio, fare GIF.

Le frasi da scrivere all'AI

1. Base del sito e grafica

Crea un'app web in italiano chiamata "Video Leggero": riduce il peso di un video per rispettare i limiti di Discord, WhatsApp, email o moduli online, scegliendo la dimensione finale; tutto avviene nel browser, il video non lascia mai il computer. Usa React, Vite, TypeScript e Tailwind CSS.

Pagine da creare:
1. Pagina principale: trascina il video e scegli la destinazione (Discord 10 MB, WhatsApp, email 25 MB, personalizzato)
2. Avanzamento della compressione con anteprima
3. Confronto prima/dopo e download
4. Pagina "Perché è sicuro"
5. Pagina Pro

Stile: da strumento per gamer: sfondo scuro #111827, viola Discord #5865F2, verde #22C55E, carattere "Inter", barra di avanzamento grande. Nessuna immagine generica di stock.

Tutto deve funzionare perfettamente da telefono. Tutti i testi in italiano, chiari e senza parole tecniche.

2. Database, account e sicurezza

Collega il progetto a Supabase e attiva la registrazione con email e password.

Crea queste tabelle:
- nessun video viene salvato o caricato
- "profili": piano (gratis o Pro), collegato all'utente

Regole di sicurezza obbligatorie:
- i video restano nel computer dell'utente
- il piano non si modifica dal browser

Usa esattamente il codice SQL che trovi nei "Dettagli tecnici" di questa scheda: eseguilo nel SQL Editor di Supabase prima di continuare, poi collega le pagine alle tabelle.

3. Calcolare la qualità giusta per il peso voluto

L'utente sceglie la destinazione o un peso massimo. Dal peso voluto e dalla durata del video si calcola il bitrate (codice nei Dettagli tecnici): tanti bit al secondo quanti ne entrano nel peso, tolto lo spazio dell'audio e un margine di sicurezza. Se il bitrate risulta troppo basso per la risoluzione originale, si riduce anche la risoluzione (es. da 1080p a 720p).

La compressione gira nel browser con ffmpeg.wasm, con la barra di avanzamento. Il video non viene caricato su nessun server: lo si dice in grande.

Alla fine: peso prima e dopo, anteprima e download.

4. Pro e limiti

Gratis: video fino a 500 MB e 10 minuti. Pro: file più grandi, taglio dell'inizio e della fine prima di comprimere, conversione in GIF, compressione di più video in coda, e nessuna pubblicità.

Pagina "Perché è sicuro" con la spiegazione e l'invito a verificare staccando internet dopo aver aperto la pagina.

5. Pagamenti con Stripe

Aggiungi un pagamento singolo di 3,99 € una volta sola. Il pagamento sblocca file più grandi, taglio, GIF, coda di video e toglie la pubblicità.

A pagamento riuscito il webhook imposta "piano" a "pro" nella tabella "profili", sulla riga dell'utente indicata in client_reference_id.

Per la sessione di pagamento e il webhook segui la guida "Pagamenti con Stripe" di Fattibile.

6. Controlli specifici di questo progetto

Oltre ai controlli della guida "Controllo finale", verifica in particolare:
1. Peso: comprimi 5 video diversi per Discord (10 MB): tutti i risultati devono stare sotto i 10 MB.
Correggi quello che non va e scrivimi cosa hai cambiato.

Dettagli tecnici

Comprimere per stare sotto un peso

Calcola il bitrate dal peso voluto e dalla durata, sceglie la risoluzione, e lancia ffmpeg.wasm nel browser.

import { FFmpeg } from "@ffmpeg/ffmpeg";
import { fetchFile } from "@ffmpeg/util";

export function parametri(pesoMB: number, durataSecondi: number, altezzaOriginale: number) {
  const bitTotali = pesoMB * 8 * 1024 * 1024 * 0.93;          // 7% di margine per il contenitore
  const audioKbps = 96;
  const videoKbps = Math.floor(bitTotali / durataSecondi / 1000 - audioKbps);
  // Sotto certi bitrate meglio ridurre la risoluzione
  const altezza = videoKbps < 600 ? 480 : videoKbps < 1500 ? Math.min(720, altezzaOriginale) : altezzaOriginale;
  return { videoKbps: Math.max(videoKbps, 100), audioKbps, altezza };
}

export async function comprimi(file: File, pesoMB: number, durata: number, altezza: number, onAvanzamento: (p: number) => void) {
  const ffmpeg = new FFmpeg();
  ffmpeg.on("progress", ({ progress }) => onAvanzamento(Math.round(progress * 100)));
  await ffmpeg.load();
  const p = parametri(pesoMB, durata, altezza);

  await ffmpeg.writeFile("ingresso", await fetchFile(file));
  await ffmpeg.exec([
    "-i", "ingresso",
    "-c:v", "libx264", "-preset", "veryfast",
    "-b:v", p.videoKbps + "k", "-maxrate", p.videoKbps + "k", "-bufsize", p.videoKbps * 2 + "k",
    "-vf", "scale=-2:" + p.altezza,
    "-c:a", "aac", "-b:a", p.audioKbps + "k",
    "-movflags", "+faststart",
    "uscita.mp4",
  ]);
  const dati = await ffmpeg.readFile("uscita.mp4");
  return new Blob([dati], { type: "video/mp4" });
}

Pezzi comuni a tutti i progetti

• Pagamenti con Stripe
• Profili, piano e crediti
• Controllo finale prima di pubblicare

Glossario

Bitrate

Quanti dati al secondo usa un video: più è alto, più il video è bello e pesante.

ffmpeg.wasm

Il programma FFmpeg per lavorare i video, adattato per girare dentro il browser.