MapLibre और Puppeteer के साथ स्वचालित रूप से जनरेट किए गए रूट फ्लाईओवर वीडियो

क्या आपने कभी चाहा है कि साइकिलिंग रूट को राइड करने से पहले उसका प्रीव्यू देख सकें? हमने एक स्वचालित सिस्टम बनाया है जो Party Onbici पर हर पार्टी रूट के लिए सुंदर फ्लाईओवर वीडियो जनरेट करता है, राइडर्स को उनकी यात्रा में क्या उम्मीद करनी है इसका सिनेमाई प्रीव्यू देता है।

चुनौती

साइकिलिंग इवेंट आयोजित करते या उसमें शामिल होते समय, रूट को समझना महत्वपूर्ण है। स्टैटिक मैप्स उपयोगी हैं, लेकिन वे वास्तव में रूट राइड करने के अनुभव को व्यक्त नहीं करते। हम उपयोगकर्ताओं को राइड के लिए प्रतिबद्ध होने से पहले रूट को वर्चुअली “फ्लाई थ्रू” करने का एक तरीका देना चाहते थे।

हमारा समाधान: हेडलेस वीडियो रेंडरिंग

हमने एक Node.js सर्विस बनाई जो Puppeteer का उपयोग करके हेडलेस Chrome ब्राउज़र चलाती है, इंटरैक्टिव MapLibre GL मैप पर रूट रेंडर करती है, और एक वर्चुअल कैमरा पथ के साथ उड़ते हुए फ्रेम कैप्चर करती है। यह ऐसे काम करता है:

1. रूट इंटरपोलेशन

एक साइकिलिंग रूट में हजारों कोऑर्डिनेट पॉइंट्स हो सकते हैं। 15 सेकंड की अवधि के लिए 30 FPS पर एक स्मूद वीडियो बनाने के लिए, हमें बिल्कुल 450 फ्रेम चाहिए। हम रूट को समान रूप से सैंपल करने के लिए दूरी-आधारित इंटरपोलेशन का उपयोग करते हैं:

 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. स्मूद बेयरिंग के साथ कैमरा एनिमेशन

बस यात्रा की दिशा में कैमरा पॉइंट करने से घुमावदार रूट पर झटकेदार मोशन बनता है। हम 12 फ्रेम पर मूविंग एवरेज का उपयोग करके कैमरा बेयरिंग को स्मूद करते हैं, 360°/0° रैपअराउंड के लिए विशेष हैंडलिंग के साथ:

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. MapLibre GL रेंडरिंग

रूट को एक सुंदर Stadia Maps बेस लेयर पर रेंडर किया जाता है:

• दृश्यता के लिए सफेद आउटलाइन के साथ हाइलाइटेड रूट लाइन
• एनिमेटेड कैमरा पोजीशन इंडिकेटर
• स्टार्ट (हरा) और एंड (लाल) मार्कर
• शहरी क्षेत्रों के लिए वैकल्पिक 3D बिल्डिंग एक्सट्रूशन

4. फ्रेम कैप्चर और वीडियो एन्कोडिंग

Puppeteer प्रत्येक फ्रेम को PNG स्क्रीनशॉट के रूप में कैप्चर करता है, फिर हम उन्हें VP9 कोडेक के साथ WebM वीडियो में एन्कोड करने के लिए ffmpeg का उपयोग करते हैं:

1
2
3

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

तकनीकी आर्किटेक्चर

1

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

1. Django वीडियो जनरेशन ट्रिगर करता है जब पार्टी बनाई या अपडेट की जाती है
2. Celery टास्क को क्यू करता है एसिंक प्रोसेसिंग के लिए
3. Node.js रेंडरर MapLibre GL के साथ Puppeteer चलाता है
4. ffmpeg एन्कोड करता है कैप्चर किए गए फ्रेम को
5. वीडियो अपलोड होता है S3 पर और पार्टी रिकॉर्ड अपडेट होता है

प्रदर्शन विचार

प्रोडक्शन के लिए, हम GPU डिपेंडेंसी से बचने के लिए सॉफ्टवेयर रेंडरिंग (SwiftShader) के साथ Docker कंटेनर्स का उपयोग करते हैं:

1
2

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

हमने जो सुविधाएं जोड़ीं

• कस्टमाइज़ेबल वीडियो डाइमेंशन्स - सोशल मीडिया शेयरिंग के लिए स्क्वायर फॉर्मेट
• लोगो वॉटरमार्किंग - अपने संगठन के लोगो के साथ अपने वीडियो को ब्रांड करें
• कैमरा पिच और ज़ूम - व्यूइंग एंगल और ऊंचाई एडजस्ट करें
• रूट लाइन स्टाइलिंग - कस्टम कलर्स और विड्थ्स

Django इंटीग्रेशन

एप्लिकेशन कोड से, वीडियो जनरेट करना इतना आसान है:

1
2

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

रेंडरिंग पूरी होने पर वीडियो URL स्वचालित रूप से अपडेट हो जाता है:

1
2
3
4
5

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

आगे क्या है

हम कई सुधारों की खोज कर रहे हैं:

• रियल-टाइम प्रीव्यू - जब उपयोगकर्ता रूट ड्रॉ करते हैं तब लाइव रेंडरिंग
• मल्टीपल कैमरा एंगल्स - साइड व्यूज़, ओवरहेड शॉट्स
• वेदर ओवरले - रूट के साथ पूर्वानुमान स्थितियां दिखाएं
• एलिवेशन प्रोफाइल - वीडियो में चढ़ाई और उतराई को विज़ुअलाइज़ करें

रूट फ्लाईओवर वीडियो हमारी सबसे लोकप्रिय सुविधाओं में से एक बन गए हैं, साइक्लिस्ट्स को यह तय करने में मदद करते हैं कि कौन सी राइड्स में शामिल होना है। आधुनिक वेब तकनीकों का संयोजन एक महंगे प्रोडक्शन टास्क को एक स्वचालित, ऑन-डिमांड सर्विस में बदल देता है।

इसे आज़माना चाहते हैं? एक पार्टी बनाएं और आपका रूट वीडियो स्वचालित रूप से जनरेट हो जाएगा!