I am currently working on a web project where I need to create a video from a set of images and overlay it with background music, all on the client-side using JavaScript.
I have explored various libraries and techniques, but I’m struggling to find a reliable and efficient solution.
Is there any JavaScript library or method that allows creating a video from a group of images and a music file entirely on the client-side? I have considered using the HTML5 <canvas> element for rendering images, but I am not sure how to merge them into a video format. Additionally, I need to synchronize these images with a background music track to create a coherent video.
I would appreciate any guidance, library recommendations, or examples of how I can achieve this task using JavaScript. If there are any best practices or known limitations, please do share those as well. Thank you in advance for your help!
I have attempted the following approaches to create a video from images and music on the client-side:
1.
Using video.js and Media Recorder API:
I utilized video.js to create the video object, added images and music, and attempted to record the video using the Media Recorder API. However, this method did not yield the desired results. The video recording did not work as expected, and I encountered issues in this process.
2.
Creating Video from Canvas and Whammy.js:
I also tried creating a <canvas> element, drawing images onto it, and then converting this canvas content into a video using Whammy.js. Unfortunately, this approach also failed to produce the intended outcome. The conversion from canvas to video did not generate the expected video file.
Despite my efforts, I have been unable to find a suitable solution. I have been actively searching for alternatives, but I have not yet come across a method that successfully meets my requirements. If you have any insights or solutions related to creating a video from images and music using JavaScript on the client-side, your assistance would be immensely valuable. Your help in resolving this challenge will greatly contribute to the successful completion of my project. Thank you in advance for your support.