Today I’m proud to publish the first version of the ABeamer website. Wow! It has been nearly five months since ABeamer project started, initially called PreciseJS, and after many redesigns it was finally published at the end of May.
Since that moment, many features were added, lots of bugs were fixed, and many inconsistencies between different designs were corrected.
But there is still along way to archive the proposed goals: provide a tool to individual users, designers, video hosting services, ad network, e-commerce companies that allows them by just using the web browser without installing any extra software to transform a collection of static images into an animated story with transitions, overlays and all sort of special effects.
Video Sync Development Stage
Another major goal of ABeamer is also to be an online video editor, it will require the implementation of the animation editor, and currently is just the engine and command-line utility.
It won’t replace professional video editors, but in many cases, the users just want to create transitions between video clips, and at most add animated overlays. The modern browsers rendering engines, already provide a powerful set of functionalities that allows rendering high-quality professional grade overlays.
But, it’s this goal that I’m still struggling, due the current Chrome auto-play policy, which disables in many “not-well-defined” cases video sync because it deactivates the
HTMLMediaElement seek method.
I know the reason of this policy is too prevent pesky videos from auto starting and eat up the network data, which is nowadays in many cases pay-per-use mobile data, but it prevents to use Chrome as video editor, which is what this goal is all about.
Chrome is used as the preferred server render, since PhantomJS development is stagnated, and even with the “auto-play policy” flags disabled when is executed using
puppeteer, it still doesn’t allows to sync video.
The current solution is to use Firefox as the client, and disable video-sync during the server render phase, and merge the video frames with png file sequence using
ffmpeg, but this is far from a good solution since it provides a very limited functionality, doesn’t supports remote videos and is a manual process.
In a future version, ABeamer
video-sync task can also pass information about video-sync to the teleported story and this information can be used by
abeamer movie command, passing this information to the
This way, the process will be less manual, but still very limited, and since
ffmpeg can access files in the local file system, the url has to be properly sanitized due security reasons. As I find solutions to this obstacle, I will write a post with updates regarding this major issue.
Raising ABeamer to Production Level
It pass more than 1 month since ABeamer first public release. After many inconsistencies fixes, and many examples up and running and tested in several browsers and OSes, ABeamer is almost ready to be bumped into version 1.
I still want to add more tests, and make sure the teleportation API is fully consistent before raising ABeamer to production level.
The documentation still has bugs, and although, it is already extensively documented is still difficult to find the information regarding any specific functionality.
When I started, I tried first several documentation generators, both from JSDocs and TypeScript information, but none provided the details and structure that I needed. To solve this, I implemented from scratch a documentation generator to deal with all ABeamer idiosyncracies. The result was awesome since it allowed me to extract and parse many fundamental details but still has bugs. This is a fundamental area that needs to be improved, therefore is a top-priority task.
As stated before, allowing to sync video so ABeamer can be used to create animated video overlays is a top priority. The implementation of the charts opened many possibilities but there are still a lot of missing parts that need to be implemented. ABeamer is designed to allow to be rendered in the cloud. Setting up a render cloud server is already quite simple, but I want to add more information and create a complete example how the whole system works. The other areas that need to be improved are:
- Allow to define the gifs optimization level.
- Allow to pass parameters to
convertto fine tune settings.
- Allow to pass setup parameters from the
abeamer renderto the library.
- Allow to filter and remap urls.
- Allow to delay the teleportation initial snapshot.
- Improve the power of the expressions. Implement
- Improve the wait manager.
- Add more functions: statistical, color, time and formatters.
- Add more special effects tasks.
- Add more paths.
- Make the shapes support animations by using virtual selectors.
- Improve the typewriter to allow add and remove text.
- Implement SVG animators.