Tarayıcıda video analitiği: timeupdate yerine rVFC kullanın
CourseSpeed geliştiricisi, timeupdate olayının neden video analitiği için güvenilmez olduğunu ve requestVideoFrameCallback ile batarya dostu bir alternatif sunduğunu anlatıyor.
Bir geliştirici, e-öğrenme platformlarındaki hatalı ilerleme takibinden rahatsız olunca CourseSpeed adlı tarayıcı eklentisini geliştirmeye başlıyor. Süreçte, HTML5 video elemanlarıyla etkileşime giren birçok uygulamanın dayandığı timeupdate olayının aslında ciddi bir tuzak olduğunu keşfediyor: tarayıcılar bu olayı saniyede 4 ila 60 kez rastgele aralıklarla tetikleyebiliyor, bu da yoğun analitik hesaplamalarını ana thread'de öngörülemez şekilde çalıştırmaya, video oynatmada mikro takılmalara ve mobilde batarya tüketiminin artmasına yol açıyor.
Çözüm olarak Chrome 83 ile gelen ve artık tüm Chromium tabanlı tarayıcılarla Safari'de desteklenen requestVideoFrameCallback (rVFC) API'sine geçiş öneriliyor. Bu API, zamana dayalı bir olay yerine doğrudan tarayıcının render pipeline'ına bağlanarak her render edilen video karesi için tam olarak bir kez tetikleniyor; ayrıca mediaTime ve presentedFrames gibi metadata bilgileri sunarak kare düşmelerini ve buffering sorunlarını teşhis etmeyi kolaylaştırıyor. Yazar, CourseSpeed'in analitik döngüsünü bu yönteme taşıdıktan sonra 2 saatlik bir kursta M1 MacBook üzerinde CPU kullanımının yaklaşık %14 azaldığını belirtiyor.
Yazı ayrıca gerçek dünya zorluklarına da değiniyor: Udemy'nin iç içe iframe'leri, Coursera'nın karmaşık React ağaçları ve Skillshare'in shadow DOM kullanımı nedeniyle video elemanını bulmak başlı başına bir problem. Bunun için same-origin iframe'leri ve açık shadow root'ları özyinelemeli olarak dolaşan bir fonksiyon paylaşılıyor. Firefox henüz rVFC'yi desteklemediğinden, requestAnimationFrame ile currentTime kontrolünü birleştiren bir fallback yaklaşımı öneriliyor; bu da timeupdate'e kıyasla yine de daha öngörülebilir bir çözüm sunuyor.
Bu deneyim, tarayıcı uzantısı veya özel video oynatıcı geliştiren mühendisler için önemli bir ders içeriyor: yüksek seviyeli DOM olaylarına güvenmek yerine düşük seviyeli render API'lerine dayanmak, hem performans hem de doğruluk açısından daha sağlam sonuçlar veriyor.