Neden Tarayıcı Tabanlı Bir Video İşleme Aracı Geliştirdik?

Web için video araçları geliştirmeye başladığımızda, geleneksel görüş açıktı: video işleme sunucuda olmalıydı. Dosyayı yükle, FFmpeg'i çalıştır, sonucu döndür. Basit, kanıtlanmış ve bant genişliği, maliyet ve gizlilikle derinden sınırlı.

Daha iyi bir yol olması gerektiğini düşündük. Meğerse varmış — ve her zaman tarayıcılarımızda duruyormuş.

Mevcut Durum: ffmpeg.wasm

Son birkaç yıldır, ffmpeg.wasm tarayıcı içi video işleme için başvurulan çözüm olmuştur. FFmpeg'i WebAssembly'ye derleyerek, FFmpeg araç setinin tamamına doğrudan tarayıcıda erişmenizi sağlar. Çalışır, ancak önemli dezavantajları vardır:

• Büyük paket boyutu: ffmpeg.wasm çekirdeği ~25MB'tır, formata özgü codec'ler bunu 30MB+'a çıkarır
• Yavaş başlatma: Herhangi bir işlem başlamadan önce 25MB'lık bir WebAssembly modülünü yüklemek
• Varsayılan olarak tek iş parçacıklı: Donanım hızlandırmaya erişim yok
• Bellek kısıtlamaları: WebAssembly doğrusal bellek limitleri (4GB) büyük dosyalarla sorun yaratır
• Donanım kod çözme yok: Yalnızca yazılım kod çözme/kodlama, GPU hızlandırmasını tamamen kaçırır

Kıyaslamalarımızda, %70 kalitede 50MB'lık bir MP4 video sıkıştırması ffmpeg.wasm ile 45-60 saniye sürdü. Fena değil, ama harika da değil.

WebCodecs Yaklaşımı

WebCodecs API, tarayıcının yerel medya codec'lerine doğrudan erişim sağlayan nispeten yeni bir tarayıcı API'sidir — YouTube, Netflix ve diğer tüm akış platformlarında video oynatma için kullanılan aynı codec'ler. Temel avantajları:

• Donanım hızlandırma: Mümkün olduğunda kod çözme ve kodlama için GPU kullanır
• Sıfır paket yükü: WebAssembly yok, derlenmiş ikili dosyalar yok — bu yerel bir tarayıcı API'sidir
• Hızlı başlatma: Anında kullanılabilir, yükleme süresi yok
• Tam format desteği: H.264, H.265, VP8, VP9, AV1 — tarayıcınızın desteklediği her şey

Peki ya dezavantajı? WebCodecs düşük seviyelidir. Demuxing, kare kare kodlama, konteyner formatlama ve aradaki her şeyi halletmeniz gerekir. Bu çok fazla altyapı işi demektir.

mediabunny Devreye Giriyor

WebCodecs'i basit, ergonomik bir API ile saran hafif bir kütüphane olan mediabunny'yi geliştirdik. Karmaşık kısımları o halleder:

• Otomatik demuxing: Konteyner formatını algılar ve video/ses akışlarını çıkarır
• Kare seviyesi kontrolü: Hassas düzenleme için tek tek karelere erişim
• Akıllı yeniden kodlama: Gerçek zamanlı ilerleme ile yapılandırılabilir kalite ön ayarları
• Bellek açısından verimli akış: Kareleri tek seferde değil, parçalar halinde işler

Performans Karşılaştırması

Genel olarak 3-5 kat daha hızlı, önemli ölçüde daha düşük bellek kullanımı ve sıfır paket yükü ile.

Gizlilik: Katil Özellik

Performans harika, ancak tarayıcı tabanlı işlemeyi gerçekten ayıran şey: mimari gereği gizlilik.

Sunucu tabanlı araçlarla, verilerinizi başkasına emanet ediyorsunuz. İyi niyetli hizmetlerin bile ihlal edilebilecek, mahkeme celbi gönderilebilecek veya yanlış yapılandırılabilecek sunucuları vardır. VideosKit ile:

• Dosyalar cihazınızdan asla ayrılmaz — dosya yüklemeleri için kelimenin tam anlamıyla bir sunucu uç noktası yoktur
• Dosya içeriği üzerinde çerez yok, izleme yok, analiz yok
• Yüklendikten sonra çevrimdışı çalışır — bir uçakta, kısıtlı bir ağda, her yerde videoları işleyin
• Hassas içerik için kurumsal dostu — veri ikametgahı veya uyumluluk endişesi yok

Geliştirme Zorlukları

Bunu inşa etmek zorluklar olmadan değildi:

Büyük Dosya İşleme

Tarayıcılar size rastgele dosya erişimi sağlamaz. Tüm dosyayı belleğe yüklemeden videoları kare kare işlemek için File API + akış kullanıyoruz. Bu, dikkatli arabellek yönetimi ve çöp toplama ayarı gerektirdi.

Tarayıcılar Arası Uyumluluk

WebCodecs, Chrome 94+, Edge 94+ ve Safari 16.4+'ta desteklenir. Firefox sürüm 130'da destek ekledi. Yeteneği algılıyor ve desteklenmeyen tarayıcılar için zarifçe bir mesaja geri dönüyoruz.

Bellek Yönetimi

Video kareleri büyüktür — tek bir 4K kare sıkıştırılmamış halde ~33MB'tır. 4K içerikle bile bellek kullanımını kontrol altında tutmak için kare havuzlama ve akış boru hatları uyguladık.

İlerleme Raporlama

Kullanıcıların ne kadar beklemesi gerektiğini bilmesi gerekir. Kare konumuna göre ilerlemeyi raporlayan, doğru gerçek zamanlı güncellemeler sağlayan bir geri arama sistemi oluşturduk.

Açık Kaynak

VideosKit ve mediabunny'nin her ikisi de açık kaynaktır. Kodu inceleyin:

• VideosKit: github.com/nicely-gg/video-tools
• mediabunny: github.com/nicely-gg/mediabunny

Katkılar, sorunlar ve geri bildirimler memnuniyetle karşılanır.

Tarayıcı Tabanlı Videonun Geleceği

WebCodecs hala gelişiyor. AV1 kodlama, WebGPU destekli işleme ve geliştirilmiş MediaSource Extensions, tarayıcı tabanlı videoyu daha da güçlü hale getirecek. Nelerin mümkün olduğunun sınırlarını zorlamaktan heyecan duyuyoruz.

VideosKit'i henüz denemediyseniz, videoskit.cc adresini ziyaret edin. Bir videoyu sıkıştırın, dönüştürün, kırpın veya inceleyin — hepsi tarayıcınızda, hepsi ücretsiz.