Cara otomatis mengubah data live menjadi video yang bisa dibagikan

 (recoveredfactory.net)
2 poin oleh GN⁺ 5 jam lalu | Belum ada komentar. | Bagikan ke WhatsApp
  • Membangun workflow berbasis web untuk mengubah data live yang diperbarui setiap beberapa hari menjadi video sosial tanpa perlu diedit manual setiap kali
  • Sumber asli video bukan file editing, melainkan halaman web tersembunyi; Playwright menggerakkan browser per frame dan ffmpeg menggabungkannya menjadi MP4 dan GIF
  • Sebuah storyboard.ts singkat dan satu playhead menyusun angka hari ini, fade, titik awal Desember 2024, dan rentang pertumbuhan 18 bulan menjadi klip sekitar 14 detik
  • GitHub Action terjadwal mendeteksi perubahan data, membangun ulang dan men-deploy ulang situs, lalu membuat 4 versi berdasarkan rasio dan kombinasi bahasa untuk dipublikasikan ke CloudFront CDN
  • YouTube memungkinkan upload draf tidak publik, tetapi Instagram hanya mendukung publikasi langsung, sehingga tahap persetujuan manusia tetap dipertahankan untuk review akhir dan pengeditan caption

Struktur yang memakai halaman web sebagai sumber video

  • Video dimulai bukan dari proyek editing terpisah, melainkan dari halaman khusus tersembunyi di dalam situs web
  • Halaman ini dirancang untuk format layar vertikal 9:16 yang digunakan di Reels, Shorts, dan TikTok
  • Layar memanfaatkan kembali elemen yang sudah ada di situs live
    • Headline
    • Angka institusi berukuran besar
    • Grafik animasi
    • Peta nasional
    • Baris kredit kecil
  • Animasi timeline dan efek gerak di browser web dimanfaatkan, lalu komputer mengendalikan browser headless yang tidak terlihat oleh pengguna
  • Seperti halaman web biasa, halaman ini bisa dibuka langsung di browser untuk preview dan debugging dengan maju-mundur
  • Halaman ini juga mewarisi framework multibahasa situs sehingga video untuk tiap bahasa yang didukung bisa ditangkap
  • Asset bakery, pipeline data, dan frontend proyek ini tersedia sebagai open source

storyboard.ts dan playhead

  • Satu file storyboard.ts mendefinisikan timing dan transisi video seperti daftar shot milik sutradara
  • Susunannya terdiri dari beberapa beat bernama dan durasinya
    • Menahan angka total hari ini selama 1,5 detik
    • Fade 0,7 detik
    • Menahan titik Desember 2024 saat data dimulai selama 1,5 detik
    • Lalu memutar maju rentang pertumbuhan 18 bulan
    • Kemudian kembali menetap pada layar hari ini
  • Hasil akhirnya berupa klip sekitar 14 detik
  • Penggambaran grafik, penandaan titik pada peta, dan kenaikan counter semuanya bergerak terikat pada satu playhead
  • Playhead memastikan semua komponen merender status yang sama pada timestamp tertentu sehingga elemen di layar tidak saling meleset

Metode “memanggang” per frame

  • File video sebenarnya dibuat dengan membuka halaman web di browser headless dan mengendalikan Chromium melalui Playwright
  • Awalnya diasumsikan bahwa menekan tombol play secara virtual lalu menangkapnya dengan screen recording sudah cukup, tetapi perekaman real-time bisa menimbulkan frame drop atau patah-patah
  • Video yang sama bisa berjalan mulus secara lokal namun bertingkah berbeda di hardware cloud, dan dalam eksperimen awal kadang bahkan diputar terlalu cepat secara tidak normal
  • Untuk hasil yang lebih stabil, alih-alih perekaman real-time, frame dibuat satu per satu seperti flipbook
    • Meminta halaman menampilkan “seperti apa tampilannya pada waktu 0,04 detik”
    • Mengambil screenshot
    • Berpindah ke 0,08 detik lalu mengambil screenshot lagi
    • Mengulangi proses ini ratusan kali
  • Karena prosesnya seperti membalik halaman beku secara manual, setiap gambar ditangkap dalam kondisi yang sudah dirender sepenuhnya
  • Hasilnya deterministik dan bisa diuji; dua kali menjalankan proses seharusnya menghasilkan frame yang sama dan dapat diverifikasi
  • Jika jumlah frame dilipatgandakan, waktu komputasi dan ruang penyimpanan yang dibutuhkan untuk rendering juga kira-kira ikut dua kali lipat

Penanganan detail untuk menstabilkan rendering server

  • Peta nasional menggunakan MapLibre GL JS dan biasanya dirender dengan kode WebGL yang mengandalkan GPU
  • Karena server tidak memiliki GPU, Chromium diatur agar memakai software rendering
    • Lebih lambat daripada hardware grafis sungguhan
    • Tetapi bisa berjalan dengan kualitas yang sama di hampir semua platform
  • Setiap frame disimpan sebagai JPEG, bukan PNG
    • Pada screenshot, encoding PNG adalah bagian yang lambat
    • Karena video hasil akhirnya terlihat sama, ini memberi keuntungan kecepatan di seluruh ratusan frame
  • Agar browser headless berjalan stabil pada bare server di dalam container, diperlukan beberapa flag, dan detail lengkapnya ada di repositori publik
  • Ratusan gambar yang dihasilkan lalu digabung menjadi MP4 dan GIF loop dengan ffmpeg

Otomatisasi berbasis GitHub Action

  • Seluruh proses terhubung ke pipeline data otomatis yang dijalankan oleh GitHub Action terjadwal
  • Sistem memeriksa beberapa kali sehari apakah data berubah
  • Jika ada data baru, job akan melakukan hal berikut
    • Membangun ulang situs
    • Men-deploy ulang situs
    • Membuat 4 versi dari kombinasi rasio persegi/vertikal dan bahasa Inggris/Spanyol
    • Mempublikasikannya ke CloudFront CDN
  • Halaman unduhan publik menyediakan versi terbaru untuk tiap bahasa yang didukung
  • Tahap terakhir mencakup upload draf YouTube dan notifikasi untuk posting Instagram

Batas antara otomatisasi dan kontrol editorial

  • Proyek ini tidak menolak otomatisasi penuh, tetapi tetap mempertahankan review manusia sebelum setiap video dipublikasikan
  • Kontrol editorial atas headline dan caption, review akhir, dan keputusan cara publikasi tetap ditangani manusia
  • Publikasi otomatis membabi buta dihindari karena data masukan bisa buruk atau sistem bisa menghasilkan keluaran yang salah
  • YouTube membuat video draf tidak publik melalui API resminya
  • API Instagram hanya mendukung publikasi langsung, sehingga setiap kali ada data baru sistem membuat draf YouTube dan mengirim email agar posting Instagram dibuat secara manual

Produksi video sosial yang berakhir sebagai desain web

  • Kelebihan pendekatan ini adalah desain video pada dasarnya menjadi desain web
  • Tidak bergantung pada After Effects, ekspor ulang manual, angka yang kedaluwarsa, atau web producer yang sibuk
  • Mengubah warna atau label cukup dengan satu baris edit, lalu perubahan itu tercermin pada rendering berikutnya
  • Seluruh sistem tersusun dari beberapa ratus baris glue code di sekitar tool yang sudah ada
    • Pipeline data
    • Browser headless
    • Peta dan grafik yang sudah dipakai situs
    • ffmpeg
  • Biaya operasionalnya hanya beberapa dolar per bulan
  • Sebagai pembanding, Missouri Vehicle Stops MCP saat ini tampaknya memerlukan biaya sekitar US$50 per bulan
  • Asset bakery memiliki biaya per pengguna yang lebih rendah daripada MCP, sementara MCP lebih mirip tool untuk keterlibatan data yang lebih dalam

Strategi dan peran “shortcut”

  • Strateginya adalah merespons platform arus utama dengan aset otomatis berkualitas tinggi yang siap dibagikan, sambil tetap mendukung tool data modern seperti MCP bagi pengguna yang ingin terlibat lebih dalam
  • Tujuannya bukan sirkus viral, bukan pula publik umum yang kabur, dan bukan satu produk tunggal untuk semua orang
  • Shortcut bukan tipu daya, melainkan cara memanfaatkan sumber daya yang sudah ada agar bisa melangkah lebih jauh dan tidak cepat kehabisan tenaga
  • Dengan mengikat sumber daya yang ada lewat GitHub Action, video hanya perlu dipikirkan saat benar-benar ingin membuatnya atau ketika situasinya memang menuntut

Bacaan terkait

Belum ada komentar.

Belum ada komentar.