Dlaczego Zbudowaliśmy Narzędzie do Przetwarzania Wideo Działające w Przeglądarce

Kiedy zabieraliśmy się do budowania narzędzi wideo dla sieci, konwencjonalna mądrość była jasna: przetwarzanie wideo należy do serwera. Prześlij plik, uruchom FFmpeg, zwróć wynik. Proste, sprawdzone i głęboko ograniczone przez przepustowość, koszty i prywatność.

Pomyśleliśmy, że musi być lepszy sposób. Okazuje się, że jest — i przez cały czas był w naszych przeglądarkach.

Status Quo: ffmpeg.wasm

Przez ostatnie kilka lat ffmpeg.wasm był standardowym rozwiązaniem do przetwarzania wideo w przeglądarce. Kompiluje FFmpeg do WebAssembly, dając dostęp do pełnego zestawu narzędzi FFmpeg bezpośrednio w przeglądarce. Działa, ale wiąże się ze znacznymi wadami:

• Duży rozmiar pakietu: rdzeń ffmpeg.wasm to ~25MB, a kodeki specyficzne dla formatu zwiększają go do ponad 30MB
• Wolna inicjalizacja: Ładowanie modułu WebAssembly o rozmiarze 25MB przed rozpoczęciem jakiegokolwiek przetwarzania
• Domyślnie jednowątkowy: Brak dostępu do akceleracji sprzętowej
• Ograniczenia pamięci: Limity pamięci liniowej WebAssembly (4GB) stwarzają problemy z dużymi plikami
• Brak dekodowania sprzętowego: Dekodowanie/kodowanie tylko programowe, całkowity brak akceleracji GPU

W naszych testach porównawczych kompresja wideo MP4 o rozmiarze 50MB przy 70% jakości zajęła 45-60 sekund z ffmpeg.wasm. Nieźle, ale też nie rewelacyjnie.

Podejście WebCodecs

WebCodecs API to stosunkowo nowe API przeglądarki, które zapewnia bezpośredni dostęp do natywnych kodeków multimedialnych przeglądarki — tych samych, które są używane do odtwarzania wideo na YouTube, Netflix i każdej innej platformie streamingowej. Kluczowe zalety:

• Akceleracja sprzętowa: Wykorzystuje GPU do dekodowania i kodowania, jeśli jest dostępne
• Zerowy narzut pakietu: Bez WebAssembly, bez skompilowanych binariów — to natywne API przeglądarki
• Szybka inicjalizacja: Dostępne natychmiast, bez czasu ładowania
• Pełne wsparcie formatów: H.264, H.265, VP8, VP9, AV1 — cokolwiek obsługuje Twoja przeglądarka

Haczyk? WebCodecs jest niskopoziomowe. Musisz obsługiwać demuxing, kodowanie klatka po klatce, formatowanie kontenera i wszystko pomiędzy. To dużo pracy.

Oto mediabunny

Zbudowaliśmy mediabunny — lekką bibliotekę, która otacza WebCodecs prostym, ergonomicznym API. Obsługuje złożone części:

• Automatyczny demuxing: Wykrywa format kontenera i wyodrębnia strumienie wideo/audio
• Kontrola na poziomie klatki: Dostęp do pojedynczych klatek dla precyzyjnej edycji
• Inteligentne ponowne kodowanie: Konfigurowalne predefiniowane ustawienia jakości z postępem w czasie rzeczywistym
• Strumieniowanie efektywne pamięciowo: Przetwarza klatki w kawałkach, a nie wszystkie naraz

Porównanie Wydajności

3-5 razy szybciej we wszystkich kategoriach, ze znacznie niższym zużyciem pamięci i zerowym narzutem pakietu.

Prywatność: Funkcja, która Zmienia Zasady Gry

Wydajność jest świetna, ale oto co naprawdę wyróżnia przetwarzanie w przeglądarce: prywatność w architekturze.

W przypadku narzędzi opartych na serwerze, powierzasz swoje dane komuś innemu. Nawet usługi o dobrych intencjach mają serwery, które mogą zostać naruszone, objęte wezwaniem sądowym lub źle skonfigurowane. Z VideosKit:

• Pliki nigdy nie opuszczają Twojego urządzenia — dosłownie nie ma punktu końcowego serwera do przesyłania plików
• Brak plików cookie, brak śledzenia, brak analizy zawartości plików
• Działa offline po załadowaniu — przetwarzaj filmy w samolocie, w ograniczonej sieci, wszędzie
• Przyjazne dla przedsiębiorstw w przypadku wrażliwych treści — brak obaw o rezydencję danych lub zgodność

Wyzwania Rozwojowe

Budowanie tego nie obyło się bez wyzwań:

Obsługa Dużych Plików

Przeglądarki nie zapewniają losowego dostępu do plików. Używamy File API + strumieniowania do przetwarzania wideo klatka po klatce, bez ładowania całego pliku do pamięci. Wymagało to starannego zarządzania buforami i strojenia zbierania śmieci.

Kompatybilność Między Przeglądarkami

WebCodecs jest obsługiwane w Chrome 94+, Edge 94+ i Safari 16.4+. Firefox dodał wsparcie w wersji 130. Wykrywamy możliwości i elegancko wracamy do komunikatu dla nieobsługiwanych przeglądarek.

Zarządzanie Pamięcią

Klatki wideo są duże — pojedyncza klatka 4K to ~33MB nieskompresowanego materiału. Wdrożyliśmy pulowanie klatek i potoki strumieniowe, aby utrzymać zużycie pamięci pod kontrolą, nawet w przypadku treści 4K.

Raportowanie Postępu

Użytkownicy muszą wiedzieć, jak długo czekać. Zbudowaliśmy system wywołań zwrotnych, który raportuje postęp na podstawie pozycji klatki, zapewniając dokładne aktualizacje w czasie rzeczywistym.

Open Source

VideosKit i mediabunny są dostępne jako open source. Sprawdź kod:

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

Wkłady, zgłoszenia problemów i opinie są mile widziane.

Przyszłość Wideo w Przeglądarce

WebCodecs wciąż ewoluuje. Kodowanie AV1, przetwarzanie oparte na WebGPU i ulepszone MediaSource Extensions sprawią, że wideo w przeglądarce stanie się jeszcze potężniejsze. Jesteśmy podekscytowani, że możemy przesuwać granice możliwości.

Jeśli jeszcze nie wypróbowałeś VideosKit, odwiedź videoskit.cc. Kompresuj, konwertuj, przycinaj lub sprawdzaj wideo — wszystko w Twojej przeglądarce, wszystko za darmo.