MapLibre ve Puppeteer ile Otomatik Oluşturulan Rota Uçuş Videoları

Bir bisiklet rotasını sürmeden önce önizleyebilmeyi hiç istediniz mi? Party Onbici’deki her rota için güzel uçuş videoları oluşturan otomatik bir sistem geliştirdik, bisikletçilere yolculuklarında ne bekleyeceklerinin sinematik bir önizlemesini sunuyoruz.

Zorluk

Bir bisiklet etkinliği düzenlerken veya katılırken rotayı anlamak çok önemli. Statik haritalar faydalıdır, ancak rotayı gerçekten sürmenin deneyimini aktaramazlar. Kullanıcılara bir sürüşe karar vermeden önce rotayı sanal olarak “uçarak geçme” imkanı vermek istedik.

Çözümümüz: Headless Video Rendering

Puppeteer kullanarak headless Chrome tarayıcısı çalıştıran, rotayı interaktif bir MapLibre GL haritasında renderlayan ve sanal bir kamera yol boyunca uçarken frame’leri yakalayan bir Node.js servisi geliştirdik. İşte nasıl çalışıyor:

1. Rota İnterpolasyonu

Bir bisiklet rotasında binlerce koordinat noktası olabilir. 15 saniyelik 30 FPS’te pürüzsüz bir video oluşturmak için tam olarak 450 frame’e ihtiyacımız var. Rotayı eşit şekilde örneklemek için mesafe tabanlı interpolasyon kullanıyoruz:

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

// Haversine formülü kullanarak kümülatif mesafeleri hesapla
const distances = [0];
for (let i = 1; i < coordinates.length; i++) {
  const dist = haversineDistance(coordinates[i-1], coordinates[i]);
  totalDistance += dist;
  distances.push(totalDistance);
}

// Tam olarak totalFrames noktasında örnekle
for (let frame = 0; frame < totalFrames; frame++) {
  const targetDist = (frame / (totalFrames - 1)) * totalDistance;
  // Bu mesafede konumu interpole et...
}

2. Pürüzsüz Yön ile Kamera Animasyonu

Kamerayı basitçe seyahat yönüne yönlendirmek, virajlı rotalarda sarsıntılı hareket oluşturur. 360°/0° geçişi için özel işleme ile 12 frame üzerinden hareketli ortalama kullanarak kamera yönünü pürüzsüzleştiriyoruz:

1
2
3
4
5
6
7

// Dairesel ortalama için sin/cos bileşenlerini kullan
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. MapLibre GL Rendering

Rota, güzel bir Stadia Maps temel katmanı üzerinde şunlarla render ediliyor:

• Görünürlük için beyaz kenarlıklı vurgulanan rota çizgisi
• Animasyonlu kamera konum göstergesi
• Başlangıç (yeşil) ve bitiş (kırmızı) işaretçileri
• Kentsel alanlar için isteğe bağlı 3D bina ekstrüzyonları

4. Frame Yakalama ve Video Kodlama

Puppeteer her frame’i PNG ekran görüntüsü olarak yakalar, ardından bunları VP9 codec ile WebM videoya kodlamak için ffmpeg kullanıyoruz:

1
2
3

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

Teknik Mimari

1

Django Uygulaması → Celery Görevi → Node.js Renderer → S3 Depolama

1. Django video oluşturmayı tetikler party oluşturulduğunda veya güncellendiğinde
2. Celery görevi kuyruğa alır asenkron işleme için
3. Node.js renderer MapLibre GL ile Puppeteer’ı çalıştırır
4. ffmpeg kodlar yakalanan frame’leri
5. Video yüklenir S3’e ve party kaydı güncellenir

Performans Hususları

Üretimde, GPU bağımlılıklarından kaçınmak için yazılım rendering (SwiftShader) ile Docker container’ları kullanıyoruz:

1
2

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

Eklediğimiz Özellikler

• Özelleştirilebilir video boyutları - Sosyal medya paylaşımı için kare format
• Logo filigranı - Videolarınızı organizasyonunuzun logosuyla markalaştırın
• Kamera eğimi ve zoom - Görüş açısını ve yüksekliği ayarlayın
• Rota çizgisi stili - Özel renkler ve genişlikler

Django Entegrasyonu

Uygulama kodundan video oluşturmak şu kadar basit:

1
2

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

Rendering tamamlandığında video URL’si otomatik olarak güncellenir:

1
2
3
4
5

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

Sırada Ne Var

Birkaç geliştirme araştırıyoruz:

• Gerçek zamanlı önizleme - Kullanıcılar rota çizerken canlı rendering
• Birden fazla kamera açısı - Yan görünümler, tepeden çekimler
• Hava durumu kaplaması - Rota boyunca tahmin koşullarını göster
• Yükseklik profili - Videoda tırmanışları ve inişleri görselleştir

Rota uçuş videoları en popüler özelliklerimizden biri haline geldi, bisikletçilerin hangi sürüşlere katılacakları hakkında bilinçli kararlar vermelerine yardımcı oluyor. Modern web teknolojilerinin kombinasyonu, pahalı bir prodüksiyon görevi olacak şeyi otomatik, isteğe bağlı bir servise dönüştürüyor.

Denemek ister misiniz? Bir party oluşturun ve rota videonuz otomatik olarak oluşturulsun!