High Performance Video Editing for the Mobile Web
Please log in to watch this conference skillscast.
At Threads, they needed to add video editing to their mobile web app, including advanced overlays and filters. They thought there would be an open source project they could use as a foundation, but it turned out that every project they tried was either far too slow or had a fraction of the feature set they needed.
By combining a canvas rendering strategy on the client side, with ffmpeg on the backend, they 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, Forbes will take you through their approach, and why they arrived at the method they chose. You'll see some of the techniques that were required to scale their canvas solution, both managing the growing complexity, and keeping a lid on their 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.
YOU MAY ALSO LIKE:
- Powering Code Reuse with Render Props, Hooks and Context in React (SkillsCast recorded in August 2019)
- Introduction to Docker Fundamentals (in London on 30th September - 1st October 2019)
- CloudNative London 2019 (in London on 25th - 27th September 2019)
- Converting Architectural Requirements into Code using CloudFormation (in London on 18th September 2019)
- Software Architecture for Developers Workshop (in London on 9th - 10th September 2019)
- React & Redux Workshop with Damjan Vujnovic (in London on 16th - 18th September 2019)
- ProgNET London 2019 (in London on 11th - 13th September 2019)
- SC London 2019 (Software Craftsmanship London) (in London on 3rd - 4th October 2019)
- A Gentle Introduction to Shaders - Materials (in London on 27th August 2019)
- Front Endgineers September Meetup (in London on 5th September 2019)
- react2019 { css-in-js: overflow } (SkillsCast recorded in August 2019)
Thanks to our sponsors
High Performance Video Editing for the Mobile Web
Forbes Lindesay
Forbes is a software developer at Threads Styling where he builds complex React and Node.js applications. In his spare time, Forbes maintains a number of open source projects, such as Pug, Promise and Cabbie.js
Please log in to watch this conference skillscast.
At Threads, they needed to add video editing to their mobile web app, including advanced overlays and filters. They thought there would be an open source project they could use as a foundation, but it turned out that every project they tried was either far too slow or had a fraction of the feature set they needed.
By combining a canvas rendering strategy on the client side, with ffmpeg on the backend, they 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, Forbes will take you through their approach, and why they arrived at the method they chose. You'll see some of the techniques that were required to scale their canvas solution, both managing the growing complexity, and keeping a lid on their 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.
YOU MAY ALSO LIKE:
- Powering Code Reuse with Render Props, Hooks and Context in React (SkillsCast recorded in August 2019)
- Introduction to Docker Fundamentals (in London on 30th September - 1st October 2019)
- CloudNative London 2019 (in London on 25th - 27th September 2019)
- Converting Architectural Requirements into Code using CloudFormation (in London on 18th September 2019)
- Software Architecture for Developers Workshop (in London on 9th - 10th September 2019)
- React & Redux Workshop with Damjan Vujnovic (in London on 16th - 18th September 2019)
- ProgNET London 2019 (in London on 11th - 13th September 2019)
- SC London 2019 (Software Craftsmanship London) (in London on 3rd - 4th October 2019)
- A Gentle Introduction to Shaders - Materials (in London on 27th August 2019)
- Front Endgineers September Meetup (in London on 5th September 2019)
- react2019 { css-in-js: overflow } (SkillsCast recorded in August 2019)
Thanks to our sponsors
High Performance Video Editing for the Mobile Web
Forbes Lindesay
Forbes is a software developer at Threads Styling where he builds complex React and Node.js applications. In his spare time, Forbes maintains a number of open source projects, such as Pug, Promise and Cabbie.js