Las instalaciones de la AWP del editor de video de Clipchamp registran un crecimiento mensual del 97%

Cómo las AWP, WebAssembly y ChromeOS ayudan a un editor de video basado en la Web a mejorar el rendimiento y ofrecer una experiencia más atractiva a 12 millones de usuarios.

Sören Balko
Sören Balko

El 97%

Crecimiento mensual de las instalaciones de AWP

2.3x

Mejoras en rendimiento

9%

Mayor retención de usuarios de AWP

Clipchamp es el editor de video en línea integrado en el navegador que empodera a cualquier persona para contar historias que vale la pena compartir en video. En todo el mundo, más de 12 millones de creadores usan Clipchamp para editar videos fácilmente. Ofrecemos soluciones sencillas para crear videos, desde herramientas intuitivas como recortar y cortar, hasta funciones prácticas como nuestra grabadora de pantalla o incluso un creador de memes.

¿Quién usa Clipchamp?

Nuestros usuarios (o editores cotidianos, como los llamamos) son diversos. No se necesita experiencia para ser un editor de video con Clipchamp. Más precisamente, actualmente notamos que los equipos de ventas, capacitación de asistencia y marketing de productos usan nuestra cámara web y nuestra grabadora de pantalla para ofrecer contenido explicativo rápido con texto y GIF adicionales que lo hagan más atractivo. También observamos que muchas pequeñas empresas editan y publican videos de redes sociales sobre la marcha.

¿A qué desafíos se enfrentan?

Sabemos que editar videos puede ser intimidante al principio. Se supone que es difícil, probablemente debido a experiencias frustrantes previas con software de edición complejo. Por el contrario, Clipchamp se centra en la facilidad y la simplicidad, y brinda compatibilidad con superposiciones de texto, música y videos de archivo, plantillas y mucho más.

Descubrimos que la mayoría de los editores cotidianos no quieren crear obras maestras de películas. Hablamos mucho con nuestros usuarios y se les recuerda continuamente que están ocupados y solo quieren que su historia se divulgue al mundo lo más rápido y fácil posible, por lo que este es un enfoque para nosotros.

Cómo desarrollar una AWP de Clipchamp

En Clipchamp, nuestro objetivo es empoderar a las personas para que cuenten sus historias a través de videos. Para estar a la altura de esta visión, pronto nos dimos cuenta de que es importante permitir que nuestros usuarios utilicen sus propias imágenes a la hora de armar un proyecto de video.

Esa estadística impulsó al equipo de ingeniería de Clipchamp a crear una tecnología que pueda procesar de manera eficiente archivos multimedia a escala de gigabytes en una aplicación web. Teniendo en cuenta las restricciones de ancho de banda de red, pudimos descartar rápidamente una solución tradicional basada en la nube. Subir archivos multimedia grandes desde una conexión a Internet de venta minorista generaría invariablemente tiempos de espera masivos antes de que comenzara la edición, lo que efectivamente haría que la experiencia del usuario fuera deficiente.

Eso nos llevó a cambiar a una solución completamente integrada en el navegador, en la que todo el trabajo pesado del procesamiento de video se realiza de forma local con los recursos de hardware disponibles en el dispositivo del usuario final. Apostamos estratégicamente en el navegador Chrome y, por extensión, en la plataforma ChromeOS para ayudarnos a superar los desafíos inevitables de la compilación de una plataforma de creación de videos en el navegador.

El procesamiento de videos consume muchos recursos, lo que afecta tanto a los recursos informáticos como de almacenamiento. Comenzamos compilando la primera versión de Clipchamp sobre el Native Client (PNaCl) (portátil) de Google. Si bien finalmente se eliminó gradualmente, PNaCl fue una gran confirmación para nuestro equipo de que las aplicaciones web pueden ser rápidas y de baja latencia, a la vez que se ejecutan en el hardware del usuario final.

Cuando más tarde cambiamos a WebAssembly, nos alegramos de ver a Chrome tomar la iniciativa en la incorporación de funciones posteriores al MVP, como operaciones de memoria masivas, subprocesos y, más recientemente, operaciones vectoriales de ancho fijo. Nuestro equipo de ingenieros anticipó lo último y nos ofreció la capacidad de optimizar nuestra pila de procesamiento de videos para aprovechar las operaciones de SIMD, que son comunes en las CPU modernas. Aprovechando la compatibilidad con SIMD de WebAssembly de Chrome, pudimos acelerar algunas cargas de trabajo particularmente exigentes, como la decodificación y codificación de video en 4K.

Rendimiento del codificador (1080p, 8.33 s a 30 FPS). Predeterminado predeterminado sin SIMD: 25 segundos. Ajuste predeterminado con SIMD: 13 segundos aprox. Ajuste predeterminado de compresión sin SIMD: ~83 segundos Ajuste predeterminado de compresión con SIMD: ~33 segundos Ajuste predeterminado de calidad (nuevo) sin SIMD: ~75 segundos. Ajuste predeterminado de calidad con SIMD: 30 segundos aprox.

Con poca experiencia previa y en menos de un mes de esfuerzo para uno de nuestros ingenieros, logramos mejorar el rendimiento 2.3 veces. Si bien todavía nos limitamos a una prueba de origen de Chrome, ya pudimos lanzar estas mejoras de SIMD para la mayoría de nuestros usuarios. Si bien nuestros usuarios ejecutan configuraciones de hardware muy diferentes, pudimos confirmar un aumento del rendimiento coincidente en la producción sin ver efectos perjudiciales en las tasas de fallas.

Recientemente, integramos la API emergente de WebCodecs, que actualmente está disponible en otra prueba de origen de Chrome. Con esta nueva función, podremos mejorar aún más el rendimiento de la decodificación de videos en hardware de baja especificación, como se encuentra en muchas Chromebooks populares.

Cuando se crea una AWP, es importante fomentar su adopción. Al igual que con muchas apps web, nos enfocamos en la facilidad de acceso, lo que incluye funciones como accesos sociales (como Google), llevar al usuario rápidamente a un lugar donde pueda editar videos y, luego, facilitar su exportación. Además, promocionamos nuestros mensajes de instalación de AWP en la barra de herramientas y como aviso emergente en la navegación del menú.

Resultados

Nuestra AWP instalable de Chrome está funcionando muy bien. Estamos muy contentos de ver un aumento del 9% en la retención con los usuarios de AWP que con los usuarios estándar de computadoras de escritorio. La instalación de la AWP fue masiva y aumentó a una tasa del 97% mensual desde su lanzamiento hace cinco meses. Además, como se mencionó antes, las mejoras de WebAssembly SIMD lograron un rendimiento 2.3 veces mejor.

Junio de 2020: alrededor de 1,000 instalaciones. Julio de 2020: ~5,000 instalaciones. Agosto de 2020: ~12,000 instalaciones. Septiembre de 2020: ~20,000 instalaciones. Octubre de 2020: ~30,000 instalaciones.
Instalaciones de la AWP de Clipchamp durante los últimos 6 meses.

Perfil

Estamos gratamente sorprendidos por la participación y aceptación de nuestra AWP. Creemos que la retención de usuarios de Clipchamp se benefició porque la AWP está instalada y es más fácil de acceder. También notamos que la AWP funciona mejor para el editor, lo que la hace más atractiva y hace que las personas regresen.

De cara al futuro, nos entusiasma la oportunidad que ofrece ChromeOS para que aún más usuarios sean más productivos y con menos complicaciones. En particular, nos entusiasman algunas de las integraciones prácticas con el SO local cuando se trabaja con archivos. Creemos que esto ayudará a acelerar los flujos de trabajo de nuestros editores cotidianos atareados, y esa es una de nuestras prioridades más importantes.