ما تعلمته من بناء شرائح الرسوم التخطيطية لخط إنتاج فيديو بنظام التكامل المستمر (CI)

لقد أضفت مؤخرًا رسومًا تخطيطية ومخططات بيانية إلى خط إنتاج فيديوهات YouTube المؤتمت الخاص بي.

الخلاصة الأساسية بسيطة: قم بإجراء المعالجة المسبقة (pre-render) لكل شيء وتحويله إلى ملف PNG أولاً.

لا تحاول إنشاء المرئيات داخل محرك الفيديو الخاص بك أو عبر ffmpeg. بدلاً من ذلك، استخدم عملية تسليم (handoff) لملفات PNG مشتركة. هذا يجعل كل جزء من خط الإنتاج الخاص بك قابلاً للاختبار وسهل الاستبدال.

إليك كيف قمت ببنائه وما تعلمته.

الهيكلية

يعتمد خط الإنتاج الخاص بي على نظام مكون من مضيفين (two-host system). يتولى أحد المضيفين معالجة المرئيات والصوت، بينما يستخدم المضيف الآخر ffmpeg لدمج كل شيء في فيديو واحد.

بما أن ffmpeg لا يمكنه تشغيل JavaScript أو استدعاء متصفح، كان عليّ سد الفجوة بين الأدوات المختلفة:

• Mermaid (للمخططات الانسيابية) يعمل عبر Puppeteer و Chromium. • Matplotlib (للمخططات البيانية) يعمل عبر Python. • Pillow (للشرائح) يرسم مباشرة على الصور.

ولأن هذه الأدوات لا يمكنها التواصل مع بعضها البعض مباشرة، فإنني أستخدم نمطًا واحدًا: المعالجة المسبقة (render) إلى ملف PNG، ثم لصق ملف PNG هذا على لوحة Pillow. مسار برمجي واحد أفضل من مسارين.

دروس تقنية رئيسية

  1. تهيئة Chromium عند التشغيل في GitHub Actions، سيفشل Chromium إذا لم تستخدم أعلامًا (flags) محددة. يجب عليك تضمين --no-sandbox و --disable-setuid-sandbox. بدون هذه الأعلام، سيقوم الحاوية (container) بحظر العملية.

  2. سمات (Theming) Mermaid إذا كنت تريد ألوانًا مخصصة، فلا تستخدم السمات المدمجة مثل dark أو forest، حيث تقوم هذه السمات بتجاوز إعداداتك. استخدم سمة "base". هذه هي الطريقة الوحيدة لضمان عمل لوحة الألوان المخصصة الخاصة بك بشكل موثوق.

  3. خلفيات Matplotlib إن جعل المخططات تتطابق مع خلفية الشريحة أمر صعب. يجب عليك القيام بثلاثة أشياء:

  • استدعاء matplotlib.use("Agg") قبل استيراد pyplot.
  • ضبط facecolor لكل من figure و axes.
  • استخدام bbox_inches="tight" عند حفظ الملف لإزالة الحدود البيضاء.
  1. الموثوقية وآليات الحماية من الفشل لا ينبغي أن يؤدي فقدان رسم تخطيطي إلى تعطيل عملية بناء الفيديو بالكامل. لقد قمت ببناء هيكل (scaffold) يلتقط الأخطاء. إذا فشلت عملية المعالجة (render)، سيقوم خط الإنتاج ببساطة بعرض عنصر نائب (placeholder) مكتوب عليه "visual unavailable". سيستمر الفيديو في الاكتمال، مما يتيح لك مراجعة المحتوى حتى لو فشل جزء واحد.

المقايضة

تضيف المعالجة المسبقة (pre-rendering) وقتًا إضافيًا. يستغرق كل رسم تخطيطي من Mermaid حوالي 2 إلى 4 ثوانٍ للمعالجة. بالنسبة لفيديو مكون من 20 مقطعًا، يضيف هذا حوالي 20 ثانية إلى إجمالي وقت البناء. بالنسبة لاحتياجاتي، تعتبر هذه مقايضة عادلة مقابل الحصول على نظام مستقر.

المصدر: https://dev.to/morinaga/what-i-learned-adding-diagram-and-chart-slides-to-a-ci-rendered-youtube-pipeline-3bnl