लाइव डेटा को शेयर करने योग्य वीडियो में अपने-आप बदलने का तरीका

 (recoveredfactory.net)
2 पॉइंट द्वारा GN⁺ 5 시간 전 | अभी कोई टिप्पणी नहीं है. | WhatsApp पर शेयर करें
  • हर कुछ दिनों में अपडेट होने वाले live data को किसी व्यक्ति द्वारा हर बार edit किए बिना social video में बदलने के लिए web-based workflow बनाया गया
  • वीडियो का source कोई editing file नहीं, बल्कि एक छिपा हुआ web page है; Playwright browser को frame-by-frame चलाता है और ffmpeg उन्हें MP4 और GIF में जोड़ता है
  • छोटा storyboard.ts और एक single playhead आज के आंकड़े, fade, दिसंबर 2024 की starting point, और 18 महीने की growth range को करीब 14-second clip में बनाते हैं
  • Scheduled GitHub Action data changes detect करके site को rebuild/redeploy करता है, aspect ratio और language combination के हिसाब से 4 cuts बनाता है और CloudFront CDN पर publish करता है
  • YouTube unlisted draft upload की सुविधा देता है, लेकिन Instagram केवल direct public posting support करता है, इसलिए final review और caption editing के लिए human approval step रखा गया है

Web page को video source के रूप में इस्तेमाल करने की संरचना

  • वीडियो किसी अलग editing project से नहीं, बल्कि website के अंदर मौजूद छिपे हुए dedicated page से शुरू होता है
  • यह page Reels, Shorts, TikTok में इस्तेमाल होने वाली vertical 9:16 screen के हिसाब से design किया गया है
  • Screen पर live site के मौजूदा elements reuse किए जाते हैं
    • headline
    • बड़े detention आंकड़े
    • animated chart
    • nationwide map
    • छोटा credit line
  • Web browser की timeline animations और motion effects का उपयोग किया जाता है, और computer user को न दिखने वाले headless browser को control करता है
  • इसे normal web page की तरह browser में सीधे खोलकर आगे-पीछे करते हुए preview और debug किया जा सकता है
  • यह site के multilingual framework को वैसे ही inherit करता है, इसलिए supported languages के लिए videos capture किए जा सकते हैं
  • इस project की asset bakery, data pipeline, और frontend open source के रूप में उपलब्ध हैं

storyboard.ts और playhead

  • storyboard.ts नाम की एक file वीडियो की timing और transitions को director की shot list की तरह define करती है
  • Structure कुछ named beats और duration से बना है
    • आज के total figure को 1.5 seconds तक hold करना
    • 0.7-second fade
    • data शुरू होने वाले दिसंबर 2024 point को 1.5 seconds तक hold करना
    • उसके बाद 18 महीने की growth range को आगे play करना
    • फिर आज की screen पर settle करना
  • पूरा result करीब 14-second clip है
  • Chart drawing, map dots display, और counter increase एक ही playhead से जुड़कर चलते हैं
  • Playhead किसी specific timestamp पर सभी components से वही state render कराता है, ताकि screen elements एक-दूसरे से out of sync न हों

Frame-by-frame “bake” करने का तरीका

  • असली video file headless browser में web page खोलकर और Playwright से Chromium control करके बनाई जाती है
  • शुरू में लगा था कि virtual play button दबाकर screen recording से capture किया जा सकता है, लेकिन real-time recording में frame drops या stutter हो सकते थे
  • वही video local पर smooth चल सकता था और cloud hardware पर अलग behave कर सकता था; शुरुआती experiments में कभी-कभी यह abnormal speed से भी play हुआ
  • ज्यादा stable result के लिए real-time recording के बजाय flipbook की तरह frames एक-एक करके generate किए जाते हैं
    • page को “0.04 seconds पर कैसा दिखना चाहिए, दिखाओ” बताना
    • screenshot लेना
    • 0.08 seconds पर जाकर फिर screenshot लेना
    • यह process सैकड़ों बार repeat करना
  • जमे हुए page को हाथ से पलटने जैसा आगे बढ़ने के कारण हर image पूरी तरह rendered state में capture होती है
  • Result deterministic और testable होता है; दो बार run करने पर verification के लिहाज से वही frames मिलने चाहिए
  • Frames की संख्या दोगुनी करने पर rendering के लिए जरूरी compute time और storage भी लगभग दोगुना हो जाता है

Server rendering को stable बनाने की details

  • Nationwide map MapLibre GL JS का उपयोग करता है, और आम तौर पर GPU की उम्मीद करने वाले WebGL code से render होता है
  • Server में GPU नहीं होता, इसलिए Chromium को software rendering use करने के लिए configure किया गया है
    • असली graphics hardware से धीमा
    • लगभग सभी platforms पर समान quality में चलने योग्य
  • हर frame PNG के बजाय JPEG के रूप में save किया जाता है
    • Screenshot में PNG encoding धीमा हिस्सा है
    • Final video वैसा ही दिखता है, इसलिए सैकड़ों frames पर speed gain मिलता है
  • Headless browser को container के अंदर bare server पर reliably चलाने के लिए कुछ flags चाहिए, और पूरी details public repository में हैं
  • Generate हुई सैकड़ों images को ffmpeg से MP4 और looping GIF में जोड़ दिया जाता है

GitHub Action आधारित automation

  • पूरा process scheduled GitHub Action से चलने वाली automated data pipeline से जुड़ा है
  • दिन में कुछ बार check किया जाता है कि data बदला है या नहीं
  • नया data आने पर job ये काम करता है
    • site rebuild
    • site redeploy
    • square/vertical ratio और English/Spanish combination के 4 cuts generate करना
    • CloudFront CDN पर publish करना
  • Public download page supported languages के हिसाब से latest cuts उपलब्ध कराता है
  • Last step में YouTube draft upload और Instagram posting notification शामिल है

Automation और editorial control की सीमा

  • यह project full automation को खारिज नहीं करता, लेकिन हर video बाहर जाने से पहले human review बनाए रखता है
  • Headlines और captions पर editorial control, final review, और publishing method का फैसला इंसान करता है
  • Input data खराब हो सकता है या system गलत result बना सकता है, इसलिए blind automated posting से बचा जाता है
  • YouTube official API से unlisted draft video बनाता है
  • Instagram API केवल direct public posting support करता है, इसलिए जब भी नया data होता है, YouTube draft बनाया जाता है और Instagram post manually बनाने के लिए email notification भेजा जाता है

Web design पर खत्म होने वाला social video production

  • इस तरीके का फायदा यह है कि video design असल में web design बन जाता है
  • After Effects, manual re-export, पुराने आंकड़ों, या busy web producer पर निर्भरता नहीं रहती
  • Color या label बदलना एक line edit में हो जाता है और अगले render में reflect होता है
  • पूरा system existing tools के आसपास लिखे कुछ सौ lines के glue code से बना है
    • data pipeline
    • headless browser
    • site में पहले से इस्तेमाल हो रहे maps और charts
    • ffmpeg
  • Running cost महीने के कुछ dollars के स्तर पर है
  • Comparison के तौर पर दिए गए Missouri Vehicle Stops MCP की cost फिलहाल करीब 50 dollars per month दिखती है
  • Asset bakery की per-user cost MCP से कम है, और MCP ज्यादा deep data engagement देने वाले tool के करीब है

Strategy और “shortcut” की भूमिका

  • Strategy यह है कि mainstream platforms के लिए high-quality shareable auto-generated assets बनाए जाएं, और deeply engaged users के लिए MCP जैसे modern data tools भी साथ में support किए जाएं
  • Goal viral circus या अस्पष्ट general public के लिए सबको suit करने वाला single product नहीं है
  • Shortcut कोई trick नहीं, बल्कि पहले से मौजूद resources का इस्तेमाल करके ज्यादा दूर जाने और कम burnout होने का तरीका है
  • GitHub Action से existing resources को जोड़ने पर, videos के बारे में तभी सोचना पड़ता है जब सच में video बनाना चाहें या situation उसकी मांग करे

संबंधित पढ़ाई

अभी कोई टिप्पणी नहीं है.

अभी कोई टिप्पणी नहीं है.