Vue Video Renderer

I wanted to create a nice recording from automated tests and scenarios written in code. I could not find any nice solution for rendering and editing movies in JavaScript.

I found html5-animation-video-renderer but it was not suitable for composing a movie from several recordings due html5 media element seek latency. I took a few lines from it to use image2pipe from ffmpeg.

Usage

Check out the examples.

Run examples with npm run dev, and render with npm run render

Features

• Real-time video preview and editing with Vite
• Rendering with playwright, firefox and screenshots piped to ffmpeg.
• Components for embedding input video and images.
• Time and playback rate control with console.

TODO:

• Offline audio mixer for audio track rendering.