Çözmek istediğim problem

Basit bir ses veya video kesme işlemi için büyük bir dosyayı önce sunucuya yüklemek, işlenmesini beklemek ve tekrar indirmek gereksiz bir dolaşım oluşturuyor. Ayrıca kişisel videoların üçüncü bir sunucuya gönderilmesi gizlilik açısından rahatsız edici. Kes Birleştir'i bu iki sorunu ortadan kaldırmak için hazırladım.

MP3 MP4 Kes Birleştir dosya seçme ve zaman aralığı ekranı
Başlangıç ekranında kesme ve birleştirme modlarını ayırdım. Dosya seçimi, zaman aralığı ve çıktı formatı tek bir doğrusal işlem sırasını takip ediyor.

Neden FFmpeg.wasm?

FFmpeg medya işleme konusunda olgun ve güvenilir bir araç. WebAssembly sürümü olan FFmpeg.wasm, aynı işleme motorunu tarayıcının izole ortamında çalıştırıyor. Node.js sunucusu yalnızca statik HTML, CSS ve JavaScript dosyalarını servis ediyor; seçilen medya dosyası sunucuya gönderilmiyor.

FFmpeg çekirdeğini ilk ihtiyaç anında yüklüyorum. ffmpeg-core.js ve ffmpeg-core.wasm dosyaları Blob URL'lerine çevriliyor. Yükleme tamamlandıktan sonra aynı FFmpeg örneği sonraki işlemlerde tekrar kullanılıyor.

Kesme akışı

  1. Kullanıcı MP3 veya MP4 dosyasını seçiyor.
  2. Başlangıç ve bitiş zamanı doğrulanıyor.
  3. Dosya FFmpeg'in sanal dosya sistemine yazılıyor.
  4. Format için uygun FFmpeg komutu çalıştırılıyor.
  5. Çıktı okunup Blob olarak indirme bağlantısına dönüştürülüyor.

İşlem sırasında FFmpeg'in progress olayını dinleyerek yüzde bilgisini ekrana yansıtıyorum. Büyük dosyalarda kullanıcıya yalnızca dönen bir simge göstermek yeterli değil; işlemin gerçekten ilerlediğini bilmesi gerekiyor.

Video önizlemesi, başlangıç ve bitiş saniyesi seçilmiş kesme ekranı
Dosya seçildiğinde video tarayıcı içinde önizleniyor. Kullanıcı başlangıç ve bitiş saniyesini görüntüyü izleyerek belirleyip çıktıyı aynı formatta indirebiliyor.

Birleştirme ve format farkları

Birden fazla dosya seçildiğinde her dosyayı sanal dosya sistemine yazıp bir files.txt listesi oluşturuyorum. FFmpeg'in concat demuxer'ı bu listeyi sırayla okuyor. Uyumlu dosyalarda -c copy kullanmak yeniden kodlama yapmadığı için hızlı ve kalite kayıpsız. Codec veya çözünürlük farklarında ise yeniden kodlama gerekebiliyor.

Temel avantaj

Dosya cihazdan çıkmadığı için sunucu depolama maliyeti, yükleme süresi ve geçici dosya temizleme problemi oluşmuyor.

Sınırlar ve öğrendiklerim

WebAssembly güçlü olsa da tarayıcının bellek sınırlarına bağlı. Çok büyük videolarda düşük özellikli cihazlar zorlanabilir. Bu yüzden dosya boyutunu, bekleme durumunu ve hata mesajlarını açık göstermek gerekiyor. Bu proje bana, doğru mimari seçimin bazen backend'i büyütmek değil tamamen devreden çıkarmak olduğunu gösterdi.

Mülakatta sorulabilecek bir soru

WebAssembly burada ne sağlıyor?

FFmpeg gibi normalde yerel çalışan bir medya motorunun tarayıcıda çalışabilmesini sağlıyor. Böylece sunucuya video gönderme adımını kaldırabiliyorum.

Kısa Özet

Ses ve video dosyalarını tarayıcı içinde kesip birleştiren bir uygulama geliştirdim. Ekranı HTML, CSS ve JavaScript ile, medya işleme kısmını FFmpeg.wasm ile hazırladım. Kullanıcının dosyası sunucuya yüklenmeden kendi cihazında işleniyor. Zaman aralığı kontrolünü, işlem ilerlemesini ve çıktı indirmeyi aynı akışa bağladım. Bu projede tarayıcıda ağır işlem yapmanın avantajlarını ve bellek sınırlarını öğrendim.