MapLibre மற்றும் Puppeteer உடன் தானியங்கு உருவாக்கப்பட்ட பாதை ஃப்ளைஓவர் வீடியோக்கள்

நீங்கள் சவாரி செய்வதற்கு முன் ஒரு சைக்கிள் பாதையை முன்னோட்டமிட முடியும் என்று எப்போதாவது நினைத்திருக்கிறீர்களா? Party Onbici இல் ஒவ்வொரு பார்ட்டி பாதைக்கும் அழகான ஃப்ளைஓவர் வீடியோக்களை உருவாக்கும் தானியங்கு அமைப்பை உருவாக்கினோம், சைக்கிள் ஓட்டுபவர்களுக்கு அவர்களின் பயணத்தில் என்ன எதிர்பார்க்கலாம் என்பதை திரைப்பட பாணி முன்னோட்டமாக வழங்குகிறது.

சவால்

சைக்கிள் நிகழ்வை ஏற்பாடு செய்யும்போது அல்லது சேரும்போது, பாதையைப் புரிந்துகொள்வது முக்கியமானது. நிலையான வரைபடங்கள் உதவியாக இருக்கும், ஆனால் அவை பாதையை உண்மையில் சவாரி செய்வதின் அனுபவத்தை தெரிவிக்காது. சவாரிக்கு உறுதியளிப்பதற்கு முன் பயனர்களுக்கு பாதையை மெய்நிகராக “பறந்து செல்ல” ஒரு வழியை வழங்க விரும்பினோம்.

எங்கள் தீர்வு: Headless வீடியோ ரெண்டரிங்

Puppeteer ஐப் பயன்படுத்தி headless Chrome உலாவியை இயக்கும், ஊடாடும் MapLibre GL வரைபடத்தில் பாதையை ரெண்டர் செய்யும், மற்றும் மெய்நிகர் கேமரா பாதையில் பறக்கும்போது ஃப்ரேம்களைப் பிடிக்கும் Node.js சேவையை உருவாக்கினோம். இது எவ்வாறு செயல்படுகிறது:

1. பாதை இடைச்செருகல்

ஒரு சைக்கிள் பாதையில் ஆயிரக்கணக்கான ஒருங்கிணைப்பு புள்ளிகள் இருக்கலாம். 15 வினாடி காலத்திற்கு 30 FPS இல் மென்மையான வீடியோவை உருவாக்க, சரியாக 450 ஃப்ரேம்கள் தேவை. பாதையை சமமாக மாதிரி எடுக்க தூர-அடிப்படையிலான இடைச்செருகலைப் பயன்படுத்துகிறோம்:

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

// Haversine சூத்திரத்தைப் பயன்படுத்தி திரட்சி தூரங்களைக் கணக்கிடு
const distances = [0];
for (let i = 1; i < coordinates.length; i++) {
  const dist = haversineDistance(coordinates[i-1], coordinates[i]);
  totalDistance += dist;
  distances.push(totalDistance);
}

// சரியாக totalFrames புள்ளிகளில் மாதிரி எடு
for (let frame = 0; frame < totalFrames; frame++) {
  const targetDist = (frame / (totalFrames - 1)) * totalDistance;
  // இந்த தூரத்தில் நிலையை இடைச்செருகு...
}

2. மென்மையான தாங்கியுடன் கேமரா அனிமேஷன்

பயண திசையில் கேமராவை எளிமையாக சுட்டிக்காட்டுவது வளைந்த பாதைகளில் நடுக்கமான இயக்கத்தை உருவாக்குகிறது. 360°/0° சுற்றலுக்கான சிறப்பு கையாளுதலுடன் 12 ஃப்ரேம்களில் நகரும் சராசரியைப் பயன்படுத்தி கேமரா தாங்கியை மென்மையாக்குகிறோம்:

1
2
3
4
5
6
7

// வட்ட சராசரிக்கு sin/cos கூறுகளைப் பயன்படுத்து
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 பயன்பாடு → Celery பணி → Node.js ரெண்டரர் → S3 சேமிப்பு

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 %}

அடுத்து என்ன

பல மேம்பாடுகளை ஆராய்ந்து வருகிறோம்:

• நிகழ்நேர முன்னோட்டம் - பயனர்கள் பாதைகளை வரையும்போது நேரடி ரெண்டரிங்
• பல கேமரா கோணங்கள் - பக்க காட்சிகள், மேல்நோக்கு ஷாட்கள்
• வானிலை மேலடுக்கு - பாதையில் முன்னறிவிப்பு நிலைமைகளைக் காட்டு
• உயர சுயவிவரம் - வீடியோவில் ஏற்றங்கள் மற்றும் இறக்கங்களை காட்சிப்படுத்து

பாதை ஃப்ளைஓவர் வீடியோக்கள் எங்கள் மிகவும் பிரபலமான அம்சங்களில் ஒன்றாக மாறிவிட்டன, சைக்கிள் ஓட்டுபவர்கள் எந்த சவாரிகளில் சேர வேண்டும் என்பது குறித்து தகவலறிந்த முடிவுகளை எடுக்க உதவுகின்றன. நவீன வலை தொழில்நுட்பங்களின் கலவையானது விலையுயர்ந்த தயாரிப்பு பணியாக இருந்ததை தானியங்கி, தேவைக்கேற்ப சேவையாக மாற்றுகிறது.

இதை முயற்சிக்க விரும்புகிறீர்களா? பார்ட்டி உருவாக்குங்கள் உங்கள் பாதை வீடியோ தானாகவே உருவாக்கப்படும்!