Bir CI Video Hattı İçin Diyagram Slaytları Oluştururken Öğrendiklerim
Yakın zamanda otomatik YouTube video hattıma diyagramlar ve grafikler ekledim.
Temel çıkarım basit: her şeyi önce bir PNG dosyası olarak önceden işleyin (pre-render).
Görselleri video motorunuzun içinde veya ffmpeg aracılığıyla oluşturmaya çalışmayın. Bunun yerine ortak bir PNG aktarımı (handoff) kullanın. Bu, hattınızın her parçasını test edilebilir ve değiştirilmesi kolay hale getirir.
İşte bunu nasıl kurduğum ve neler öğrendiğim.
Mimari
Hattım iki sunuculu (two-host) bir sistem kullanıyor. Bir sunucu görselleri ve sesi yönetiyor. Diğer sunucu ise her şeyi bir videoda birleştirmek için ffmpeg kullanıyor.
ffmpeg JavaScript çalıştıramadığı veya bir tarayıcıyı çağıramadığı için farklı araçlar arasındaki boşluğu çözmem gerekiyordu:
• Mermaid (akış şemaları için) Puppeteer ve Chromium aracılığıyla çalışır. • Matplotlib (grafikler için) Python aracılığıyla çalışır. • Pillow (slaytlar için) doğrudan görseller üzerine çizim yapar.
Bu araçlar birbirleriyle doğrudan iletişim kuramadığı için tek bir desen (pattern) kullanıyorum: bir PNG olarak işleyin, ardından bu PNG'yi bir Pillow tuvaline (canvas) yapıştırın. Tek bir kod yolu, iki yoldan daha iyidir.
Temel Teknik Dersler
Chromium Yapılandırması GitHub Actions üzerinde çalıştırırken, belirli bayrakları (flags) kullanmazsanız Chromium hata verecektir. --no-sandbox ve --disable-setuid-sandbox seçeneklerini dahil etmelisiniz. Bunlar olmadan konteyner işlemi engelleyecektir.
Mermaid Temalandırma Özel renkler istiyorsanız, yerleşik "dark" veya "forest" temalarını kullanmayın. Bu temalar ayarlarınızın üzerine yazar. "base" temasını kullanın. Özel paletinizin güvenilir bir şekilde çalışmasını sağlamanın tek yolu budur.
Matplotlib Arka Planları Grafikleri slayt arka planınızla eşleştirmek zordur. Üç şey yapmalısınız:
- pyplot'u içe aktarmadan önce matplotlib.use("Agg") çağırın.
- Hem figure hem de axes için facecolor değerini ayarlayın.
- Beyaz kenarlıkları kaldırmak için dosyayı kaydederken bbox_inches="tight" kullanın.
- Güvenilirlik ve Hata Önleme Mekanizmaları Eksik bir diyagram tüm video oluşturma sürecinizi bozmamalıdır. Hataları yakalayan bir iskelet (scaffold) yapısı kurdum. Eğer bir işleme (render) başarısız olursa, hat sadece bir "visual unavailable" yer tutucusu gösterir. Video yine de tamamlanır. Bu, bir parça başarısız olsa bile içeriği incelemenize olanak tanır.
Ödünleşim (Trade-off)
Önceden işleme (pre-rendering) zaman ekler. Her bir Mermaid diyagramının işlenmesi yaklaşık 2 ila 4 saniye sürer. 20 segmentli bir video için bu, toplam oluşturma süresine yaklaşık 20 saniye ekler. Benim ihtiyaçlarım için bu, istikrarlı bir sistem adına makul bir takastır.