Canlı verileri paylaşılabilir videolara otomatik dönüştürme yöntemi

• Birkaç günde bir güncellenen canlı verileri, her seferinde bir insanın düzenlemesine gerek kalmadan sosyal medya videosuna dönüştürmek için web tabanlı bir iş akışı kuruldu
• Videonun kaynağı bir düzenleme dosyası değil, gizli bir web sayfası; Playwright tarayıcıyı kare kare hareket ettiriyor, ffmpeg de bunları MP4 ve GIF olarak birleştiriyor
• Kısa bir storyboard.ts ve tek bir playhead; bugünkü sayıları, fade geçişini, Aralık 2024 başlangıç noktasını ve 18 aylık büyüme bölümünü yaklaşık 14 saniyelik bir klipte kurguluyor
• Zamanlanmış GitHub Action, veri değişikliklerini algılayıp siteyi yeniden derliyor ve yeniden dağıtıyor; en-boy oranı ve dil kombinasyonlarına göre 4 kesit üretip CloudFront CDN’de yayımlıyor
• YouTube, herkese açık olmayan taslak yüklemeye izin veriyor; Instagram ise yalnızca doğrudan herkese açık paylaşımı desteklediği için, son kontrol ve açıklama metni düzenlemesi için insan onayı adımı korunuyor

---

Web sayfasını video kaynağı olarak kullanan yapı

• Video, ayrı bir kurgu projesinden değil, web sitesi içindeki gizli ve özel bir sayfadan başlıyor
• Bu sayfa, Reels, Shorts ve TikTok’ta kullanılan dikey 9:16 ekran için tasarlandı
• Ekranda canlı sitenin mevcut öğeleri yeniden kullanılıyor
  • Başlık
  • Büyük kurum sayısı
  • Animasyonlu grafik
  • Ülke haritası
  • Küçük kredi satırı
• Web tarayıcısının timeline animasyonları ve hareket efektlerinden yararlanılıyor; bilgisayar, kullanıcıya görünmeyen headless tarayıcıyı kontrol ediyor
• Normal bir web sayfası gibi tarayıcıda doğrudan açılıp ileri geri gezilerek önizleme ve debug yapılabiliyor
• Sitenin çok dilli framework’ü aynen devralındığı için desteklenen her dilde video yakalanabiliyor
• Bu projenin asset bakery’si, veri pipeline’ı ve frontend’i open source olarak yayımlanmış durumda

storyboard.ts ve playhead

• storyboard.ts dosyası, videonun zamanlamasını ve dönüşümlerini bir yönetmenin çekim listesi gibi tanımlıyor
• Yapı, adlandırılmış birkaç beat ve sürelerinden oluşuyor
  • Bugünün toplam sayısını 1,5 saniye tut
  • 0,7 saniyelik fade
  • Verinin başladığı Aralık 2024 noktasını 1,5 saniye tut
  • Ardından 18 aylık büyüme bölümünü ileri oynat
  • Yeniden bugünün ekranına yerleş
• Nihai çıktı yaklaşık 14 saniyelik bir klip
• Grafik çizimi, haritada nokta gösterimi ve sayaç artışı tek bir playhead’e bağlanarak hareket ediyor
• Playhead, belirli bir timestamp’te tüm bileşenlerin aynı durumu render etmesini sağlayarak ekrandaki öğelerin birbirinden kopmamasını sağlıyor

Kare kare “pişirme” yöntemi

• Gerçek video dosyası, web sayfası headless tarayıcıda açılıp Chromium Playwright ile kontrol edilerek oluşturuluyor
• Başta sanal olarak oynat düğmesine basıp ekran kaydıyla yakalamanın mümkün olduğu düşünüldü; ancak gerçek zamanlı kayıt kare atlama veya takılma yaratabiliyordu
• Aynı video yerelde akıcı çalışırken bulut donanımında farklı davranabiliyor; ilk denemelerde zaman zaman anormal derecede hızlı oynadığı da oldu
• Daha kararlı sonuç için gerçek zamanlı kayıt yerine, flipbook gibi kareler tek tek üretiliyor
  • Sayfaya “0,04 saniye anındaki görünümü göster” talimatı veriliyor
  • Ekran görüntüsü alınıyor
  • 0,08 saniyeye gidilip yeniden ekran görüntüsü alınıyor
  • Bu süreç yüzlerce kez tekrarlanıyor
• Donmuş bir sayfayı elle çevirir gibi ilerlediği için her görüntü tamamen render edilmiş halde yakalanıyor
• Sonuç deterministik ve test edilebilir; iki kez çalıştırıldığında doğrulanabilir şekilde aynı karelerin elde edilmesi gerekiyor
• Kare sayısı iki katına çıkarılırsa render için gereken hesaplama süresi ve depolama alanı da kabaca iki katına çıkıyor

Sunucu render’ını kararlı hale getiren ayrıntılar

• Ülke haritası MapLibre GL JS kullanıyor ve genellikle GPU bekleyen WebGL koduyla render ediliyor
• Sunucuda GPU olmadığı için Chromium’un software rendering kullanması sağlanıyor
  • Gerçek grafik donanımından daha yavaş
  • Neredeyse tüm platformlarda aynı kaliteyle çalışabiliyor
• Her kare PNG değil JPEG olarak kaydediliyor
  • Ekran görüntüsünde PNG kodlama yavaş kalan kısım
  • Nihai video aynı göründüğü için yüzlerce karenin tamamında hız avantajı sağlanıyor
• Headless tarayıcının container içindeki bare server’da kararlı çalışması için bazı flag’ler gerekiyor; tüm ayrıntılar açık depoda yer alıyor
• Üretilen yüzlerce görüntü ffmpeg ile MP4 ve döngülü GIF olarak birleştiriliyor

GitHub Action tabanlı otomasyon

• Tüm süreç, zamanlanmış GitHub Action ile çalışan otomatik veri pipeline’ına bağlanıyor
• Günde birkaç kez verinin değişip değişmediği kontrol ediliyor
• Yeni veri geldiğinde iş şunları yapıyor
  • Siteyi yeniden derleme
  • Siteyi yeniden dağıtma
  • Kare/dikey oranlar ile İngilizce/İspanyolca kombinasyonlarından oluşan 4 kesit üretme
  • CloudFront CDN’de yayımlama
• Herkese açık indirme sayfası, desteklenen dillere göre en güncel kesitleri sunuyor
• Son adımda YouTube taslak yüklemesi ve Instagram paylaşım bildirimi yer alıyor
  • YouTube script’i: publish-social-youtube.mjs
  • Instagram paylaşım hazırlık bildirimi: notify-social-ready.mjs
  • TikTok entegrasyonu da planlanıyor

Otomasyon ile editoryal kontrolün sınırı

• Bu proje tam otomasyonu dışlamıyor, ancak her video yayımlanmadan önce insan incelemesini koruyor
• Başlıklar ve açıklama metinleri üzerindeki editoryal kontrol, son inceleme ve paylaşım yöntemine karar verme insana ait
• Girdi verisi kötü olabileceği veya sistem hatalı sonuç üretebileceği için körlemesine otomatik paylaşım yapılmıyor
• YouTube, resmi API ile herkese açık olmayan taslak video oluşturuyor
• Instagram API yalnızca doğrudan herkese açık paylaşımı desteklediğinden, yeni veri olduğunda YouTube taslağı oluşturuluyor ve Instagram paylaşımını manuel hazırlamayı isteyen bir e-posta bildirimi gönderiliyor

Web tasarımıyla biten sosyal video üretimi

• Bu yöntemin avantajı, video tasarımının aynı zamanda web tasarımı haline gelmesi
• After Effects’e, manuel yeniden dışa aktarmaya, eski sayılara veya yoğun web prodüktörlerine bağlı kalınmıyor
• Renk ya da etiket değişikliği tek satırlık düzenlemeyle bitiyor ve sonraki render’a yansıyor
• Tüm sistem, mevcut araçların etrafındaki birkaç yüz satırlık glue code’dan oluşuyor
  • Veri pipeline’ı
  • Headless tarayıcı
  • Sitede zaten kullanılan harita ve grafikler
  • ffmpeg
• Çalıştırma maliyeti ayda birkaç dolar düzeyinde
• Karşılaştırma için verilen Missouri Vehicle Stops MCP’nin şu anda ayda yaklaşık 50 dolar maliyeti olduğu görülüyor
• Asset bakery, MCP’ye göre kullanıcı başına daha düşük maliyetli; MCP ise daha derin veri katılımı sağlayan bir araca daha yakın

Strateji ve “shortcut”ın rolü

• Strateji, ana akım platformlara yüksek kaliteli, paylaşılabilir otomatik üretilen varlıklarla yanıt verirken, daha derin etkileşime giren kullanıcılar için MCP gibi modern veri araçlarını da desteklemek
• Hedef, viral sirk ya da belirsiz genel kitle için herkese uyan tek bir ürün değil
• Shortcut bir hile değil; daha uzağa gitmek ve daha az tükenmek için mevcut kaynaklardan yararlanma yöntemi
• GitHub Action ile mevcut kaynaklar bir araya getirildiğinde, videoyu yalnızca video yapmak istendiğinde veya durum gerçekten gerektirdiğinde düşünmek yeterli oluyor