Как PWA, WebAssembly и ChromeOS помогают веб-редактору видео повысить производительность и сделать его более привлекательным для 12 миллионов пользователей.
97 %
Ежемесячный рост количества установок PWA
2,3 х
Улучшение производительности
9 %
Более высокий уровень удержания пользователей PWA
Clipchamp — это онлайн- видеоредактор, встроенный в браузер, который позволяет каждому рассказывать истории, которыми стоит поделиться, с помощью видео. Более 12 миллионов авторов по всему миру используют Clipchamp для легкого редактирования видео. Мы предлагаем простые решения для создания видео: от интуитивно понятных инструментов, таких как обрезка и обрезка, до практических функций, таких как запись экрана и даже создатель мемов .
Кто использует Clipchamp?
Наши пользователи (или обычные редакторы, как мы их называем) разнообразны. Чтобы работать видеоредактором в Clipchamp, не требуется никаких знаний. В частности, в настоящее время мы замечаем, что команды по продажам, обучению поддержке и маркетингу продуктов используют нашу веб-камеру и устройство записи экрана для быстрого пояснения контента с добавлением текста и GIF-файлов, чтобы сделать его интересным. Мы также наблюдаем, как многие малые предприятия редактируют и публикуют видеоролики для социальных сетей, находясь в пути.
С какими проблемами они сталкиваются?
Мы понимаем, что редактирование видео поначалу может быть пугающим. Предполагается, что это сложно, вероятно, из-за предыдущего разочаровывающего опыта работы со сложным программным обеспечением для редактирования. Clipchamp, напротив, фокусируется на простоте и простоте, обеспечивая поддержку наложений текста, стокового видео и музыки, шаблонов и многого другого.
Мы видим, что большинство обычных монтажеров не хотят создавать шедевры кино. Мы много разговариваем с нашими пользователями, и нам постоянно напоминают, что они заняты и просто хотят рассказать свою историю миру как можно быстрее и проще, поэтому это наша основная задача.
Разработка Clipchamp PWA
В Clipchamp мы стремимся дать людям возможность рассказывать свои истории с помощью видео. Чтобы реализовать это видение, мы вскоре поняли, что важно разрешить нашим пользователям использовать свои собственные материалы при создании видеопроекта.
Это понимание заставило команду инженеров Clipchamp разработать технологию, которая могла бы эффективно обрабатывать медиафайлы гигабайтного масштаба в веб-приложении. Учитывая ограничения пропускной способности сети, мы быстро исключили традиционное облачное решение. Загрузка больших медиафайлов через розничное подключение к Интернету неизбежно приводила к значительному времени ожидания, прежде чем редактирование могло даже начаться, что фактически приводило к ухудшению пользовательского опыта.
Это заставило нас переключиться на полностью браузерное решение, в котором вся «тяжелая работа» по обработке видео выполняется локально с использованием аппаратных ресурсов, доступных на устройстве конечного пользователя. Мы стратегически делаем ставку на браузер Chrome и, как следствие, на платформу ChromeOS, чтобы помочь нам преодолеть неизбежные проблемы, связанные с созданием платформы для создания видео в браузере.
Обработка видео требует огромных ресурсов, затрагивая как компьютер, так и ресурсы хранения. Мы начали с создания первой версии Clipchamp на основе (портативного) собственного клиента Google (PNaCl). Несмотря на то, что в конечном итоге PNaCl был прекращен, он стал для нашей команды отличным подтверждением того, что веб-приложения могут работать быстро и с низкой задержкой, при этом работая на оборудовании конечного пользователя.
Когда позже мы перешли на WebAssembly, мы были рады видеть, что Chrome взял на себя инициативу по внедрению пост-MVP-функций, таких как операции с объемной памятью, многопоточность и, совсем недавно, векторные операции с фиксированной шириной. Наша команда инженеров с нетерпением ожидала последнего, поскольку оно дает нам возможность оптимизировать наш стек обработки видео, чтобы воспользоваться преимуществами операций SIMD , широко распространенных в современных процессорах. Воспользовавшись поддержкой SIMD WebAssembly в Chrome, мы смогли ускорить некоторые особенно требовательные рабочие нагрузки, такие как декодирование и кодирование видео 4K.
Имея небольшой опыт и менее чем за месяц усилий одного из наших инженеров, нам удалось повысить производительность в 2,3 раза. Хотя мы все еще ограничены пробной версией Chrome, мы уже смогли внедрить эти улучшения SIMD для большинства наших пользователей. Несмотря на то, что наши пользователи используют совершенно разные аппаратные настройки, мы смогли подтвердить соответствующий прирост производительности в производственной среде, не увидев каких-либо негативных последствий для частоты отказов.
Совсем недавно мы интегрировали новый API WebCodecs, который в настоящее время доступен в рамках другой пробной версии Chrome. Используя эту новую возможность, мы сможем еще больше повысить производительность декодирования видео на оборудовании с низкими характеристиками, которое имеется во многих популярных Chromebook.
После создания PWA важно поощрять его принятие. Как и во многих веб-приложениях, мы сосредоточились на простоте доступа, которая включает в себя такие вещи, как вход в систему через социальные сети, включая Google, что позволяет пользователю быстро попасть в место, где он может редактировать видео, а затем упростить его экспорт. Кроме того, мы разместили подсказки по установке PWA на панели инструментов и во всплывающих окнах в меню навигации.
Полученные результаты
Наш устанавливаемый Chrome PWA работает очень хорошо. Мы были очень рады видеть, что у пользователей PWA удержание на 9 % выше, чем у обычных пользователей настольных компьютеров. Установка PWA была массовой, ее рост составлял 97% в месяц с момента нашего запуска пять месяцев назад. И, как упоминалось ранее, улучшения SIMD в WebAssembly повысили производительность в 2,3 раза.
Будущее
Мы приятно удивлены вовлеченностью и популярностью нашего PWA. Мы считаем, что удержание пользователей Clipchamp выиграло, поскольку PWA установлено и к нему проще получить доступ. Мы также отметили, что PWA лучше работает для редактора, что делает его более привлекательным и заставляет людей возвращаться.
Заглядывая в будущее, мы с нетерпением ждем возможности, которую ChromeOS предоставит еще большему количеству пользователей, чтобы они могли делать больше с меньшими усилиями. В частности, нас радует удобство интеграции с локальной ОС при работе с файлами. Мы думаем, что это поможет ускорить рабочие процессы для наших занятых повседневных редакторов, и это один из наших главных приоритетов.