آنچه در ساخت اسلایدهای نموداری برای یک خط لوله ویدیویی CI آموختم
اخیراً نمودارها و چارتها را به خط لوله خودکار تولید ویدیو در یوتیوب اضافه کردهام.
نکته اصلی ساده است: ابتدا همه چیز را به صورت یک فایل PNG پیشرندر (pre-render) کنید.
سعی نکنید جلوههای بصری را داخل موتور ویدیو یا از طریق ffmpeg تولید کنید. در عوض، از یک انتقال (handoff) مشترک PNG استفاده کنید. این کار باعث میشود هر بخش از خط لوله شما قابل تست و به راحتی قابل جایگزینی باشد.
در اینجا نحوه ساخت آن و آنچه آموختم را آوردهام.
معماری
خط لوله من از یک سیستم دو-میزبان (two-host) استفاده میکند. یک میزبان بخشهای بصری و صوتی را مدیریت میکند و میزبان دیگر از ffmpeg برای ترکیب همه چیز در یک ویدیو استفاده میکند.
از آنجایی که ffmpeg نمیتواند JavaScript اجرا کند یا یک مرورگر را فراخوانی کند، مجبور شدم شکاف بین ابزارهای مختلف را پر کنم:
• Mermaid (برای فلوچارتها) از طریق Puppeteer و Chromium اجرا میشود. • Matplotlib (برای چارتها) از طریق Python اجرا میشود. • Pillow (برای اسلایدها) مستقیماً روی تصاویر ترسیم میکند.
از آنجایی که این ابزارها نمیتوانند مستقیماً با هم ارتباط برقرار کنند، از یک الگوی واحد استفاده میکنم: رندر کردن به یک فایل PNG، و سپس چسباندن آن PNG روی یک بوم (canvas) در Pillow. داشتن یک مسیر کد بهتر از دو مسیر است.
درسهای فنی کلیدی
پیکربندی Chromium هنگام اجرا در GitHub Actions، اگر از پرچمهای (flags) خاصی استفاده نکنید، Chromium با خطا مواجه خواهد شد. شما باید
--no-sandboxو--disable-setuid-sandboxرا اضافه کنید. بدون اینها، کانتینر فرآیند را مسدود خواهد کرد.تمبندی Mermaid اگر رنگهای سفارشی میخواهید، از تمهای داخلی dark یا forest استفاده نکنید. آن تمها تنظیمات شما را بازنویسی (override) میکنند. از تم "base" استفاده کنید. این تنها راه برای اطمینان از عملکرد قابل اعتماد پالت رنگی سفارشی شماست.
پسزمینههای Matplotlib هماهنگ کردن چارتها با پسزمینه اسلاید کار دشواری است. باید سه کار انجام دهید:
- قبل از
importکردنpyplot، دستورmatplotlib.use("Agg")را فراخوانی کنید. - مقدار
facecolorرا هم برایfigureو هم برایaxesتنظیم کنید. - هنگام ذخیره فایل، از
bbox_inches="tight"استفاده کنید تا حاشیههای سفید حذف شوند.
- قابلیت اطمینان و مکانیزمهای مقابله با خطا نبود یک نمودار نباید کل فرآیند ساخت ویدیو را مختل کند. من یک ساختار (scaffold) ایجاد کردم که خطاها را مدیریت میکند. اگر رندر با شکست مواجه شود، خط لوله صرفاً یک جایگزین (placeholder) با متن "visual unavailable" نشان میدهد. ویدیو همچنان ساخته میشود. این کار به شما اجازه میدهد حتی اگر بخشی از کار با شکست مواجه شد، محتوا را بازبینی کنید.
موازنه
پیشرندر کردن باعث افزایش زمان میشود. رندر شدن هر نمودار Mermaid حدود ۲ تا ۴ ثانیه طول میکشد. برای یک ویدیوی ۲۰ بخشی، این کار حدود ۲۰ ثانیه به زمان کل ساخت اضافه میکند. برای نیازهای من، این یک موازنه منصفانه برای داشتن یک سیستم پایدار است.