Videos de Sobrevoo de Rota Gerados Automaticamente com MapLibre e Puppeteer

Ja desejou poder visualizar uma rota de ciclismo antes de pedalar? Construimos um sistema automatizado que gera lindos videos de sobrevoo para cada rota de festa no Party Onbici, oferecendo aos ciclistas uma visualizacao cinematografica do que esperar em sua jornada.

O Desafio

Ao organizar ou participar de um evento de ciclismo, entender a rota e crucial. Mapas estaticos sao uteis, mas nao transmitem a experiencia de realmente percorrer a rota. Queriamos dar aos usuarios uma forma de “sobrevoar virtualmente” a rota antes de se comprometerem com um passeio.

Nossa Solucao: Renderizacao de Video Headless

Construimos um servico Node.js que executa um navegador Chrome headless usando Puppeteer, renderiza a rota em um mapa interativo MapLibre GL e captura quadros enquanto uma camera virtual voa ao longo do percurso. Veja como funciona:

1. Interpolacao da Rota

Uma rota de ciclismo pode ter milhares de pontos de coordenadas. Para criar um video suave a 30 FPS durante 15 segundos, precisamos de exatamente 450 quadros. Usamos interpolacao baseada em distancia para amostrar a rota 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. Animacao da Camera com Orientacao Suave

Simplesmente apontar a camera na direcao de viagem cria movimentos bruscos em rotas sinuosas. Suavizamos a orientacao da camera usando uma media movel de 12 quadros, com tratamento especial para a transicao de 360 graus/0 graus:

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. Renderizacao MapLibre GL

A rota e renderizada sobre uma bela camada base Stadia Maps com:

• Uma linha de rota destacada com contorno branco para visibilidade
• Indicador animado de posicao da camera
• Marcadores de inicio (verde) e fim (vermelho)
• Extrusoes opcionais de predios 3D para areas urbanas

4. Captura de Quadros e Codificacao de Video

O Puppeteer captura cada quadro como captura de tela PNG, depois usamos ffmpeg para codifica-los em um video WebM com codec VP9:

1
2
3

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

Arquitetura Tecnica

1

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

1. Django aciona a geracao de video quando uma festa e criada ou atualizada
2. Celery coloca a tarefa na fila para processamento assincrono
3. O renderizador Node.js executa Puppeteer com MapLibre GL
4. ffmpeg codifica os quadros capturados
5. O video e enviado para S3 e o registro da festa e atualizado

Consideracoes de Performance

Para producao, usamos containers Docker com renderizacao por software (SwiftShader) para evitar dependencias de GPU:

1
2

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

Funcionalidades que Adicionamos

• Dimensoes de video personalizaveis - Formato quadrado para compartilhamento em redes sociais
• Marca d’agua com logo - Personalize seus videos com o logo da sua organizacao
• Inclinacao e zoom da camera - Ajuste o angulo de visao e a altitude
• Estilo da linha de rota - Cores e larguras personalizadas

Integracao com Django

A partir do codigo da aplicacao, gerar um video e tao simples como:

1
2

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

A URL do video e atualizada automaticamente quando a renderizacao termina:

1
2
3
4
5

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

Proximos Passos

Estamos explorando varias melhorias:

• Visualizacao em tempo real - Renderizacao ao vivo enquanto os usuarios desenham rotas
• Multiplos angulos de camera - Vistas laterais, tomadas aereas
• Sobreposicao de clima - Mostrar condicoes previstas ao longo da rota
• Perfil de elevacao - Visualizar subidas e descidas no video

Os videos de sobrevoo de rota se tornaram uma de nossas funcionalidades mais populares, ajudando os ciclistas a tomar decisoes informadas sobre quais passeios participar. A combinacao de tecnologias web modernas transforma o que teria sido uma tarefa de producao cara em um servico automatizado sob demanda.

Quer experimentar? Crie uma festa e seu video de rota sera gerado automaticamente!