Personalised Video Message Generator

Cloud Under developed several modules for integration into campaign website “Finde deinen Vulkan” (“find your volcano”). The main part was an interactive video generator. Visitors of the website could use the tool to create personalised video messages to surprise and motivate friends.

Watch this video for a demo:

Screen recording of the video generator in a desktop browser

For each of the hundreds of options available for users to pick from, short video clips had been prepared by our client agency, in which German TV presenter Jan Köppen reads and acts every single one. Once a user made their choices and hits the submit button, the image is rendered and presented almost instantly. If the video is not already rendered it may take a few seconds and will be presented as soon as it is ready.

Both video and image files can be downloaded directly or custom links can be shared via Facebook, Twitter, email and on smartphones also via WhatsApp.

We developed the front-end of the interactive web application with React, which had to be integrated into a WordPress site (not our choice). Whilst we were limited in the choice of platform, we implemented some API endpoints in PHP, which, for example, generates the personalised image and triggers the video rendering. We implemented the video rendering service itself as Node microservice as it is much better suited for high-performance tasks and parallel execution.

Meme image

Example of a generated meme image

WordPress vs Node.js

Because we wanted fast and real server-rendered HTML landing pages for personalised shareable links (each generated video and image had their own URL with generated meta data and the embedded media), we also engineered a system in which those pages were generated and served by a Node application (Express).

It requested the website’s theme, navigation and footer with an internal HTTP request, cached it as template and injected its own meta data and body HTML content as required. We then re-routed the HTTP requests of video und image URLs to our Express server. Although our pages look like all the other WordPress pages, they are actually not and on average they load more than 4 times faster.

Although the main video generator page is loaded via WordPress, we came up with a system to integrate our React web application and all the Webpack-packaged assets without touching WordPress too much by creating a custom WP theme page, which simply includes our dynamically generated PHP page containing all the stuff emitted by Webpack.

Limitations

Due to given limitations in server infrastructure (everything had to run on a single machine), we had to come up with a queueing system for video rendering as it is a very CPU consuming process and only allowed very few renders in parallel. Although the rendering of a single video only takes a few seconds, campaign sites are often heavily advertised at certain times resulting in peak usage rates and it would be irresponsible to allow an infinite amount of simultaneous video renderings on the server. In theory it is possible that at times of very high demand some users may see longer delays until their video is ready, but realistically this would be quite rare. Ideally one would calculate the estimated waiting time based on the current length of the queue and present the user a countdown, but as it didn't add much value in this case and due to limited time and budget, we just created a pulsing circle animation until the video is ready.

Raffle

We also implemented an online raffle module in which the users could enter a code that came on a card with their purchase of water bottles. Each valid ticket was a win and the particular prize was displayed together with a shareable video message instantly. Users could claim their prize by filling out a form.

Tech stack

The key technologies used in this project included React, Node, Express, FFmpeg, Apache, PHP and MySQL.