Forbes Lindesay at React Alicante 2019

At Threads we needed to add video editing to our mobile web app, including advanced overlays and filters. We thought there would be an open source project we could use as a foundation, but it turned out that every project we tried was either far too slow, or had a fraction of the feature set we needed. By combining a canvas rendering strategy with invisible React UI for manipulating video overlays on the client side, and ffmpeg on the backend, we were able to build a video editing experience in a matter of weeks that supports near pixel perfect previews that can be edited in real time, and highly optimised mp4 output for the fully rendered videos. In this talk, I'll take you through our approach, and why we arrived at the method we chose. You'll see some of the techniques that were required to scale our canvas solution, both managing the growing complexity, and keeping a lid on our memory usage. This talk will be especially useful to anyone considering building high performance graphics for the browser, but it will also give any developer some new ideas about how to approach technical challenges.Show more