We increased our rendering speeds by 70x using the WebCodecs API
Revideo, a TypeScript framework, boosted rendering speeds by 70 times with WebCodecs API. Challenges overcome by browser-based video encoding. Limited audio processing and browser compatibility remain.
Read original article
Revideo, an open-source TypeScript framework for programmatic video editing, significantly improved its rendering speeds by 70 times by implementing the WebCodecs API. Initially facing challenges with slow rendering times, the team leveraged the API to enhance performance. By replacing the Ffmpeg frame extractor with a WebCodecs-based solution and encoding videos directly in the browser using WebAssembly, they achieved substantial speedups. These changes streamlined the project structure, eliminated the need for certain server-side processes, and simplified the workflow. However, full client-side rendering is not yet feasible due to audio processing still relying on Ffmpeg and limited browser compatibility of the WebCodecs API, primarily supported in Chrome. Despite these limitations, the advancements made by Revideo demonstrate a significant leap in rendering efficiency and hint at the potential for further enhancements in the future as browser support evolves.
Related
20x Faster Background Removal in the Browser Using ONNX Runtime with WebGPU
Using ONNX Runtime with WebGPU and WebAssembly in browsers achieves 20x speedup for background removal, reducing server load, enhancing scalability, and improving data security. ONNX models run efficiently with WebGPU support, offering near real-time performance. Leveraging modern technology, IMG.LY aims to enhance design tools' accessibility and efficiency.
Understanding React Compiler
React's core architecture simplifies development but can lead to performance issues. The React team introduced the React Compiler to automate performance tuning by rewriting code. Transpilers like Babel convert JSX for efficiency. Compilers, transpilers, and optimizers analyze and produce equivalent code. React Compiler enhances functionality using Abstract Syntax Trees, memoization, and hook storage for optimized performance.
How Video Works
The site explains video playback intricacies, including subtitles, adaptive streaming, HLS, DASH technologies, and player selection for optimal streaming experience. Fast delivery and adaptive bitrate enhance viewing quality.
Enhancing New York Times Web Performance with React 18
The New York Times upgraded to React 18 for better performance and new features like Concurrent Mode and server-side rendering. Challenges with "embedded interactives" were overcome, leading to improved website performance.
New Web Development: Or, why Copilots and chatbots are bad for modern web dev
The analysis critiques Copilots, chatbots, and React for web development, citing slow sites, complex code, and high costs. It advocates for a shift to browser APIs, CSS, and HTML for better performance and lower expenses. Transition challenges include finding developers skilled in vanilla JavaScript. Organizations are urged to prioritize simplicity, efficiency, and core web technology training.
1 commentsRelated
20x Faster Background Removal in the Browser Using ONNX Runtime with WebGPU
Using ONNX Runtime with WebGPU and WebAssembly in browsers achieves 20x speedup for background removal, reducing server load, enhancing scalability, and improving data security. ONNX models run efficiently with WebGPU support, offering near real-time performance. Leveraging modern technology, IMG.LY aims to enhance design tools' accessibility and efficiency.
Understanding React Compiler
React's core architecture simplifies development but can lead to performance issues. The React team introduced the React Compiler to automate performance tuning by rewriting code. Transpilers like Babel convert JSX for efficiency. Compilers, transpilers, and optimizers analyze and produce equivalent code. React Compiler enhances functionality using Abstract Syntax Trees, memoization, and hook storage for optimized performance.
How Video Works
The site explains video playback intricacies, including subtitles, adaptive streaming, HLS, DASH technologies, and player selection for optimal streaming experience. Fast delivery and adaptive bitrate enhance viewing quality.
Enhancing New York Times Web Performance with React 18
The New York Times upgraded to React 18 for better performance and new features like Concurrent Mode and server-side rendering. Challenges with "embedded interactives" were overcome, leading to improved website performance.
New Web Development: Or, why Copilots and chatbots are bad for modern web dev
The analysis critiques Copilots, chatbots, and React for web development, citing slow sites, complex code, and high costs. It advocates for a shift to browser APIs, CSS, and HTML for better performance and lower expenses. Transition challenges include finding developers skilled in vanilla JavaScript. Organizations are urged to prioritize simplicity, efficiency, and core web technology training.