WebCodecs ve WebGPU rehberi, bulut GPU'lara ihtiyaç duymadan gerçek zamanlı video düzenlemeyi gösteriyor

dev.to'da yayımlanan bir eğitim, tamamen tarayıcıda çalışan gerçek zamanlı bir video editörünün nasıl kurulacağını ortaya koyuyor; WebCodecs API'sini WebGPU ve Canvas ile eşleştirerek demuxing, kod çözme, işleme ve kodlamanın tamamının kullanıcının kendi donanımında gerçekleşmesini sağlıyor. Yazar bunu, video düzenleme ürünlerine uzun süredir dayatılan bir verginin sonu olarak tanımlıyor; bu modelde her renk düzenlemesi, kırpma veya klip birleştirme, görüntüyü GPU destekli sunucu kümelerine göndermeyi, FFmpeg ile transkodlamayı ve sonucu geri akıtmayı — beraberinde getirdiği gecikme ve altyapı faturalarıyla birlikte — gerektiriyordu.

Eski yaklaşımın sorunu neydi

Makaleye göre bu API'lerden önce, web'de kare bazında video manipülasyonu, gizli bir video elementi oluşturmayı, onu bir 2D canvas'a çizmeyi ve getImageData() ile pikselleri geri çekmeyi gerektiriyordu. Son adım asıl sorun: GPU belleğinden sistem RAM'ine bir kopyalama zorunlu kılıyor ve her kare için JavaScript yığınında büyük bir typed array ayrılıyordu. Bunu 1080p görüntüde 60fps hızında çalıştırdığınızda çöp toplayıcı, kısa ömürlü bellek ayırmalarında boğuluyor ve takılmalarla birlikte takılmalar yaşanıyor.

Yazara göre standart video elementi aynı zamanda şeffaf değil. Sıkıştırılmış bitstream'i kod çözülmeden önce yakalayamıyor, üstelik kod çözme işlemi kendi WebAssembly veya worker kodunuzun erişemediği tarayıcı içi thread'lerde gerçekleşiyor.

Bir kare yeni hattan nasıl geçiyor

Rehber, bir karenin tüm yaşam döngüsünü adım adım izliyor. Öncelikle MP4 veya WebM gibi bir container dosyasının demux edilmesi gerekiyor; çünkü tarayıcılar her format için evrensel yerel bir demuxer sunmuyor. Geliştiriciler, EncodedVideoChunk nesnelerini çıkarmak için WebCodecs'i MP4box.js gibi JavaScript veya WebAssembly demuxer'larla eşleştiriyor.

Bu chunk'lar hiçbir şekilde JavaScript'te kod çözmeyen bir VideoDecoder'a aktarılıyor. Makaleye göre decoder, işletim sisteminin donanım kod çözme motorlarına — NVIDIA NVDEC, AMD VCE, Intel QuickSync veya Apple'ın VideoToolbox'ına — çağrı yapıyor ve işi özel silikona devrediyor. Yazar, 4K 60fps bir AV1 veya H.264 akışını JavaScript'te yazılımla kod çözmenin tüm CPU çekirdeklerini kilitleyeceğini ve bir dizüstü bilgisayarın pilini dakikalar içinde tüketeceğini belirtiyor.

Decoder daha sonra bir VideoFrame yayıyor; yazar bunu GPU belleğinde yaşayan bir texture üzerinde akıllı bir işaretçi olarak tanımlıyor. Bu kare, JavaScript yığınından bayt kopyalamasına gerek kalmadan WebGPU'ya external texture olarak içe aktarılabiliyor, her pikseli paralel işleyen WGSL compute shader'larıyla işlenebilir ve WebGPU bağlamıyla yapılandırılmış bir canvas'a doğrudan render edilebiliyor. Çok geçişli renk düzenleme, alan derinliği bulanıklığı ve gerçek zamanlı yeşil perde kaldırma, kare hızında birlikte çalışabiliyor; yazar bunu CPU'a bağımlı bir hatte hesapsal olarak imkânsız olarak savunuyor.

Ses ile görüntüyü kilitleli tutmak

Bir düzenleme motorunun senkronizasyonu da çözmesi gerekiyor. Her animasyon geri çağrısında bir kare oynatan basit bir render döngüsü, ses-görüntü kayması biriktiriyor; yazar, yaklaşık 45 milisaniyelik bir senkron kaymasının izleyiciler tarafından zaten fark edilebilir olduğunu belirtiyor. Önerilen çözüm bir master clock mimarisi: saat performance.now()'dan ya da tercihen bir audio context'in çıkış zamanından türetiliyor; çünkü ses donanımı tarayıcıdaki en kararlı zamanlamayı sağlıyor. Render döngüsü bu saati her kod çözülmüş karenin sunum zaman damgasıyla karşılaştırıyor ve deterministik bir seçim yapıyor: geride kalan bir kareyi düşürmek, sonraki kare erken geldiyse önceki kareyi tutmak ya da ağır çekim oynatma için compute shader'larla sentetik kareler arasında ara değer hesaplamak.

Elle bellek yönetimi

Makale, JavaScript geliştiricilerine bir uyarıyla sona eriyor: VideoFrame, AudioData ve EncodedVideoChunk gibi WebCodecs nesneleri alışıldık anlamda çöp toplanmıyor. Her VideoFrame, render, işleme veya kodlama tamamlandıktan sonra açıkça kapatılmalı; aksi halde hat, sekme çökene kadar GPU ve sistem belleği sızdırıyor. Yazar ayrıca, çöp toplama duraklamalarını tetikleyen bellek ayırma karmaşasından kaçınmak için nesne havuzlamasını öneriyor; çünkü 15 milisaniyelik bir duraklama bile düşen bir kare anlamına geliyor.

Neden önemli

Bu, tarayıcı platformunun artık daha önce koca bir sunucu filosunu haklı çıkaran türde donanım hızlandırmalı bir medya hattını barındırabileceğinin pratik bir kanıtı. Düzenleme araçları için kod çözme ve efekt işlerini kullanıcıların kendi GPU'larına taşımak, render başına bulut maliyetlerini ve ağ gecikmesini ortadan kaldırıyor; ölçeklendirme artık sağlayıcı harcamasıyla değil, müşteri kitlesiyle birlikte büyüyor. Uyarılar gerçek — geliştiriciler kendi demuxing'lerini sağlamalı, kare yaşam döngülerini elle yönetmeli ve modern tarayıcı desteğine güvenmeli — ama bir yön kanıtı olarak bu yazı, videoyu bir veri merkezinden geçirmek için kalan nedenlerin hızla küçüldüğünü gösteriyor.