Video di Sorvolo del Percorso Generati Automaticamente con MapLibre e Puppeteer

Hai mai desiderato poter visualizzare in anteprima un percorso ciclabile prima di percorrerlo? Abbiamo costruito un sistema automatizzato che genera bellissimi video di sorvolo per ogni percorso di festa su Party Onbici, offrendo ai ciclisti un’anteprima cinematografica di cosa aspettarsi durante il loro viaggio.

La Sfida

Quando si organizza o si partecipa a un evento ciclistico, capire il percorso e fondamentale. Le mappe statiche sono utili, ma non trasmettono l’esperienza di percorrere effettivamente il tragitto. Volevamo dare agli utenti un modo per “sorvolare virtualmente” il percorso prima di impegnarsi in una pedalata.

La Nostra Soluzione: Rendering Video Headless

Abbiamo costruito un servizio Node.js che esegue un browser Chrome headless usando Puppeteer, renderizza il percorso su una mappa interattiva MapLibre GL e cattura i fotogrammi mentre una telecamera virtuale sorvola il percorso. Ecco come funziona:

1. Interpolazione del Percorso

Un percorso ciclabile potrebbe avere migliaia di punti di coordinate. Per creare un video fluido a 30 FPS per una durata di 15 secondi, abbiamo bisogno di esattamente 450 fotogrammi. Usiamo l’interpolazione basata sulla distanza per campionare il percorso uniformemente:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

// Calculate cumulative distances using Haversine formula
const distances = [0];
for (let i = 1; i < coordinates.length; i++) {
  const dist = haversineDistance(coordinates[i-1], coordinates[i]);
  totalDistance += dist;
  distances.push(totalDistance);
}

// Sample at exactly totalFrames points
for (let frame = 0; frame < totalFrames; frame++) {
  const targetDist = (frame / (totalFrames - 1)) * totalDistance;
  // Interpolate position at this distance...
}

2. Animazione della Telecamera con Orientamento Fluido

Semplicemente puntare la telecamera nella direzione di viaggio crea movimenti bruschi su percorsi tortuosi. Lisciamo l’orientamento della telecamera usando una media mobile su 12 fotogrammi, con gestione speciale per il passaggio 360 gradi/0 gradi:

1
2
3
4
5
6
7

// Use sin/cos components for circular averaging
for (let j = i - smoothWindow; j <= i + smoothWindow; j++) {
  const rad = rawBearings[j] * Math.PI / 180;
  sinSum += Math.sin(rad);
  cosSum += Math.cos(rad);
}
const avgBearing = Math.atan2(sinSum/count, cosSum/count) * 180 / Math.PI;

3. Rendering MapLibre GL

Il percorso viene renderizzato su un bellissimo livello base Stadia Maps con:

• Una linea del percorso evidenziata con contorno bianco per visibilita
• Indicatore animato della posizione della telecamera
• Marcatori di partenza (verde) e arrivo (rosso)
• Estrusioni opzionali di edifici 3D per aree urbane

4. Cattura dei Fotogrammi e Codifica Video

Puppeteer cattura ogni fotogramma come screenshot PNG, poi usiamo ffmpeg per codificarli in un video WebM con codec VP9:

1
2
3

ffmpeg -framerate 30 -i frame_%05d.png \
  -c:v libvpx-vp9 -crf 20 -b:v 0 \
  route.webm

Architettura Tecnica

1

Django App → Celery Task → Node.js Renderer → S3 Storage

1. Django attiva la generazione video quando viene creata o aggiornata una festa
2. Celery mette in coda il task per elaborazione asincrona
3. Il renderer Node.js esegue Puppeteer con MapLibre GL
4. ffmpeg codifica i fotogrammi catturati
5. Il video viene caricato su S3 e il record della festa viene aggiornato

Considerazioni sulle Prestazioni

Per la produzione, usiamo container Docker con rendering software (SwiftShader) per evitare dipendenze GPU:

1
2

--use-angle=swiftshader
--enable-unsafe-swiftshader

Funzionalita Aggiunte

• Dimensioni video personalizzabili - Formato quadrato per condivisione sui social media
• Filigrana con logo - Personalizza i tuoi video con il logo della tua organizzazione
• Inclinazione e zoom della telecamera - Regola l’angolo di visione e l’altitudine
• Stile della linea del percorso - Colori e larghezze personalizzati

Integrazione Django

Dal codice dell’applicazione, generare un video e semplice come:

1
2

party = Party.objects.get(uid="...")
party.generate_video(width=1080, height=1080, duration=10)

L’URL del video viene aggiornato automaticamente quando il rendering e completato:

1
2
3
4
5

{% if party.video_url %}
<video controls>
  <source src="{{ party.video_full_url }}" type="video/webm">
</video>
{% endif %}

Prossimi Passi

Stiamo esplorando diversi miglioramenti:

• Anteprima in tempo reale - Rendering dal vivo mentre gli utenti disegnano percorsi
• Angolazioni multiple della telecamera - Viste laterali, riprese dall’alto
• Overlay meteo - Mostra le condizioni previste lungo il percorso
• Profilo altimetrico - Visualizza salite e discese nel video

I video di sorvolo del percorso sono diventati una delle nostre funzionalita piu popolari, aiutando i ciclisti a prendere decisioni informate su quali pedalate partecipare. La combinazione delle moderne tecnologie web trasforma quella che sarebbe stata una costosa attivita di produzione in un servizio automatizzato su richiesta.

Vuoi provarlo? Crea una festa e il tuo video del percorso verra generato automaticamente!