Liczba instalacji PWA edytora wideo Clipchamp odnotowuje wzrost miesięczny o 97%

Jak PWA, WebAssembly i ChromeOS pomagają 12 mln użytkowników internetowego edytora wideo zwiększyć jego wydajność i zaangażować widzów.

Sören Balko

Clipchamp to dostępny w przeglądarce edytor wideo online, który pozwala każdemu opowiedzieć historie, które warto udostępnić w formie filmu. Na całym świecie ponad 12 milionów twórców używa Clipchampa do łatwej edycji filmów. Oferujemy proste rozwiązania do tworzenia filmów: od intuicyjnych narzędzi, takich jak przycinanie i przycinanie, po praktyczne funkcje, takie jak nagrywanie ekranu czy narzędzie do tworzenia memów.

Kto używa Clipchamp?

Nasi użytkownicy (lub zwykli redaktorzy, jak ich nazywamy) są zróżnicowane. Aby korzystać z narzędzia Clipchamp, nie trzeba mieć specjalistycznej wiedzy. Obecnie zespoły ds. sprzedaży, pomocy technicznej i marketingu usług korzystają z naszej kamery internetowej i nagrywania ekranu, aby szybko wyjaśniać treści z dodanym tekstem i GIF-ami w celu zwiększenia atrakcyjności. Obserwujemy też, jak wiele małych firm edytuje i publikuje filmy w mediach społecznościowych w podróży.

Z jakimi wyzwaniami stykają się?

Zdajemy sobie sprawę, że edytowanie filmu może na początku onieśmielać. Zakłada się, że jest to trudne, prawdopodobnie ze względu na wcześniejsze irytujące doświadczenia z obsługą skomplikowanego oprogramowania do edycji. Clipchamp natomiast stawia na prostotę, oferując nakładki tekstowe, filmy z banku wideo i muzykę, szablony i wiele więcej.

Większość zwykłych redaktorów nie chce tworzyć filmów pełnometrażowych. Dużo rozmawiamy z użytkownikami i stale przypominamy im, że są oni zajęci, by jak najszybciej i jak najszybciej przekazać swoją historię użytkownikom.

Tworzenie aplikacji PWA Clipchamp

Clipchamp daje nam możliwość opowiadania swoich historii w filmach. Chcąc zrealizować tę wizję, szybko zdaliśmy sobie sprawę, że ważne jest umożliwienie użytkownikom wykorzystania własnych materiałów do nagrywania przy tworzeniu filmu.

Ta wiedza wywarła presję na zespół inżynierów Clipchamp, aby stworzył technologię umożliwiającą wydajne przetwarzanie plików multimedialnych w skali gigabajtowej w aplikacji internetowej. Biorąc pod uwagę ograniczenia przepustowości sieci, szybko wyeliminowaliśmy tradycyjne rozwiązanie działające w chmurze. Przesyłanie dużych plików multimedialnych przez sklep internetowy nie musi zawsze wiązać się z długim czasem oczekiwania na rozpoczęcie edycji, co negatywnie wpływa na wygodę użytkowników.

Dlatego przeszliśmy na rozwiązanie w pełni działające w przeglądarce, w którym wszystkie „ciężkie” przetwarzanie wideo odbywa się lokalnie przy użyciu zasobów sprzętowych dostępnych w urządzeniu użytkownika. Strategicznie obstawiamy, że przeglądarka Chrome i platforma ChromeOS pomogą nam stawić czoła nieuniknionym wyzwaniom, jakie niesie ze sobą stworzenie platformy do tworzenia filmów w przeglądarce.

Przetwarzanie filmów jest ogromnie głodne i ma wpływ na zasoby komputera i pamięci masowej. Zaczęliśmy tworzyć pierwszą wersję Clipchamp na przenośnym kliencie natywnym Google (PNaCl). Chociaż usługa PNaCl została ostatecznie wycofana, była dla naszego zespołu znakomitym potwierdzeniem, że aplikacje internetowe są szybkie i mają małe opóźnienia, a jednocześnie działają na sprzęcie użytkownika.

Po przejściu na WebAssembly cieszę się, że Chrome prześcignął się przy wprowadzaniu funkcji post-MVP, takich jak zbiorcze operacje pamięci, wątki, a ostatnio: operacje wektorów o stałej szerokości. Nasz zespół inżynierów bardzo obserwował tę drugą opcję, dając nam możliwość zoptymalizowania stosu przetwarzania wideo pod kątem wykorzystania możliwości SIMD, które są powszechne w przypadku współczesnych procesorów. Dzięki obsłudze standardu WebAssembly SIMD w Chrome mogliśmy przyspieszyć niektóre szczególnie wymagające zadania, takie jak dekodowanie i kodowanie wideo w rozdzielczości 4K.

Dzięki niewielkiemu doświadczeniu i mniej niż miesiącowi pracy jednego z naszych inżynierów udało nam się zwiększyć wydajność 2, 3 raza. Nadal ograniczamy się do okresu próbnego Chrome origin, ale już teraz wdrożyliśmy je dla większości naszych użytkowników. Nasi użytkownicy korzystają z zupełnie różnych konfiguracji sprzętu, ale udało nam się potwierdzić wzrost wydajności w środowisku produkcyjnym bez negatywnego wpływu na odsetek awarii.

Niedawno przeprowadziliśmy integrację nowego interfejsu API WebCodecs, który jest obecnie dostępny w ramach innego testowania origin Chrome. Te nowe funkcje pozwalają jeszcze bardziej zwiększyć wydajność dekodowania wideo na słabszych sprzęcie, co można znaleźć na wielu popularnych Chromebookach.

Po utworzeniu aplikacji PWA należy zachęcić do jej wdrożenia. Tak jak w przypadku wielu aplikacji internetowych, koncentrujemy się na łatwości dostępu, takich jak loginy w mediach społecznościowych, w tym na konto Google, na szybkie przeniesienie użytkownika do miejsca, w którym może edytować film, a następnie wyeksportowanie filmu. Umieściliśmy też prośby o instalację aplikacji PWA na pasku narzędzi i jako wyskakujące powiadomienia w menu nawigacyjnym.

Wyniki

Nasza aplikacja PWA Chrome z możliwością zainstalowania sprawdza się świetnie. Z przyjemnością zaobserwowaliśmy o 9% wyższy wskaźnik utrzymania wśród użytkowników PWA niż w przypadku standardowych użytkowników komputerów. Liczba instalacji PWA okazała się ogromna i od momentu jej wprowadzenia 5 miesięcy temu zwiększyła się o 97% miesięcznie. Jak już wspomnieliśmy, ulepszenia WebAssembly SIMD poprawiły wydajność 2, 3 raza.

Przyszła

Jesteśmy mile zaskoczeni zainteresowaniem naszą aplikacją PWA i jej wdrożeniem. Sądzimy, że rozwiązanie Clipchamp przyniosło poprawę utrzymania użytkowników, ponieważ PWA została zainstalowana i łatwiej dostępna. Zauważyliśmy też, że PWA lepiej działa z perspektywy edytora, dzięki czemu jest bardziej atrakcyjna i zachęca użytkowników do powrotu.

Patrząc w przyszłość, z przyjemnością obserwujemy, jak dzięki ChromeOS jeszcze więcej użytkowników może sprawniej realizować zadania z łatwością. Szczególnie cenimy sobie wygodę integracji z lokalnym systemem operacyjnym podczas pracy z plikami. Sądzimy, że przyspieszy to pracę naszych zapracowanych na co dzień redaktorów. To jeden z naszych najważniejszych priorytetów.