Video Terbang di Atas Rute yang Dihasilkan Secara Otomatis dengan MapLibre dan Puppeteer

Pernahkah Anda berharap bisa melihat pratinjau rute bersepeda sebelum mengendarainya? Kami membangun sistem otomatis yang menghasilkan video terbang yang indah untuk setiap rute pesta di Party Onbici, memberikan pengendara pratinjau sinematik tentang apa yang dapat diharapkan dalam perjalanan mereka.

Tantangan

Saat mengorganisir atau bergabung dengan acara bersepeda, memahami rute sangat penting. Peta statis membantu, tetapi tidak menyampaikan pengalaman sebenarnya mengendarai rute tersebut. Kami ingin memberikan pengguna cara untuk “terbang secara virtual” melalui rute sebelum berkomitmen untuk ikut.

Solusi Kami: Rendering Video Headless

Kami membangun layanan Node.js yang menjalankan browser Chrome headless menggunakan Puppeteer, merender rute pada peta MapLibre GL interaktif, dan menangkap frame saat kamera virtual terbang sepanjang jalur. Berikut cara kerjanya:

1. Interpolasi Rute

Rute bersepeda mungkin memiliki ribuan titik koordinat. Untuk membuat video mulus pada 30 FPS selama 15 detik, kita membutuhkan tepat 450 frame. Kami menggunakan interpolasi berbasis jarak untuk mengambil sampel rute secara merata:

 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. Animasi Kamera dengan Bearing yang Mulus

Hanya mengarahkan kamera ke arah perjalanan menciptakan gerakan tersentak pada rute yang berkelok. Kami menghaluskan bearing kamera menggunakan rata-rata bergerak selama 12 frame, dengan penanganan khusus untuk pembungkusan 360 derajat/0 derajat:

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

Rute dirender pada layer dasar Stadia Maps yang indah dengan:

• Garis rute yang disorot dengan garis tepi putih untuk visibilitas
• Indikator posisi kamera yang dianimasikan
• Penanda awal (hijau) dan akhir (merah)
• Ekstrusi bangunan 3D opsional untuk area perkotaan

4. Penangkapan Frame dan Encoding Video

Puppeteer menangkap setiap frame sebagai screenshot PNG, lalu kami menggunakan ffmpeg untuk mengencodenya menjadi video WebM dengan codec VP9:

1
2
3

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

Arsitektur Teknis

1

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

1. Django memicu pembuatan video saat pesta dibuat atau diperbarui
2. Celery mengantri tugas untuk pemrosesan asinkron
3. Renderer Node.js menjalankan Puppeteer dengan MapLibre GL
4. ffmpeg mengenkode frame yang ditangkap
5. Video diunggah ke S3 dan catatan pesta diperbarui

Pertimbangan Performa

Untuk produksi, kami menggunakan container Docker dengan rendering perangkat lunak (SwiftShader) untuk menghindari ketergantungan GPU:

1
2

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

Fitur yang Kami Tambahkan

• Dimensi video yang dapat disesuaikan - Format persegi untuk berbagi di media sosial
• Watermarking logo - Tandai video Anda dengan logo organisasi Anda
• Kemiringan dan zoom kamera - Sesuaikan sudut pandang dan ketinggian
• Gaya garis rute - Warna dan lebar kustom

Integrasi Django

Dari kode aplikasi, menghasilkan video semudah:

1
2

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

URL video secara otomatis diperbarui saat rendering selesai:

1
2
3
4
5

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

Langkah Selanjutnya

Kami sedang mengeksplorasi beberapa peningkatan:

• Pratinjau real-time - Rendering langsung saat pengguna menggambar rute
• Beberapa sudut kamera - Tampilan samping, bidikan dari atas
• Overlay cuaca - Tampilkan kondisi prakiraan sepanjang rute
• Profil elevasi - Visualisasikan tanjakan dan turunan dalam video

Video terbang rute telah menjadi salah satu fitur kami yang paling populer, membantu pesepeda membuat keputusan yang tepat tentang perjalanan mana yang akan diikuti. Kombinasi teknologi web modern mengubah apa yang akan menjadi tugas produksi yang mahal menjadi layanan otomatis sesuai permintaan.

Ingin mencobanya? Buat pesta dan video rute Anda akan dihasilkan secara otomatis!