Install

npm install vue-video-renderer

yarn add vue-video-renderer

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.

Dependencies

@ffmpeg-installer/ffmpeg: ^1.1.0 vue: ^3.2.31

Dependencies

vue-video-renderer: 0.1.5 @vitejs/plugin-vue: ^2.2.4 @vue/compiler-sfc: ^3.2.31 playwright: ^1.20.0 vite: ^2.8.6 yargs: ^17.3.0

Enhancing Vue.js Development: Harnessing the Potential of Vue-Loader

Vue.js has gained immense popularity as a JavaScript framework for building user interfaces. Its simplicity, flexibility, and performance have made it a favorite among developers. However, to...

Simplify Data Validation in Vue.js: A Step-by-Step Guide to Using Regex

Data validation is a critical aspect of web development that ensures the accuracy and integrity of user input. Whether it's validating an email address, password, or phone number, implementing robust...

Troubleshooting Made Easy: Common Issues and Solutions with vue-loader Without vue-cli

Hey there, Vue.js enthusiasts! Are you ready to dive into the world of troubleshooting? In this blog post, we'll be discussing common issues and solutions with vue-loader without using vue-cli....

Optimizing Webpack 4 with Vue CLI 3: Disabling the Cache-Loader

Welcome to another blog post on optimizing Webpack 4 with Vue CLI 3! In this article, we'll explore how to disable the Cache-Loader in Webpack and discuss the importance of optimizing build times for...

Step-by-Step Guide: How to Add a Function to Your Vuex Plugin

In today's blog post, we are going to dive into the world of Vuex plugins and explore how to add a function to your plugin. Vuex is an essential part of managing state in Vue applications, and...

Introducing a blog that delves into the exciting world of Vue.js components. Stay tuned for insightful examples and valuable insights that will elevate your Vue.js development skills.

Install

Vue Video Renderer

Usage

Features

TODO:

Dependencies

Dependencies

RELATED POST