Blog

SilverStripe, After Effects, YouTube: Online video generation

Posted on January 23, 2017by Nivanka Fonseka‐ Tagged:Work, SilverStripe, Technology

To mark the end of 2016 we launched a new website project, which we've been working for a few months. This is not a conventional website, but an online video generator. This post is about the tech recipes, and how we engineered the systems.

Requirements in a nutshell: 

Our client organise events on different locations (Busan, Tokyo, Hawaii) where the event participants would take photographs and compile them in to a video to share with others. The system has templates which are used to compile videos, and has placeholder where a user can upload photos or write text in to for a video. The videos once compiled get uploaded to Youtube, and the users gets an email notification with the video link. 

Technical solution: 

We used a few technologies to come up with a solution. The stack we used is the following.

We made extensive use of the AEPX files. These are XML versions of the adobe after effects files. Being XML we could open these files in a text editor. However there were super complicated hash codes, elements etc. We wrote a parser in PHP to read through an AEPX file and fine patterns of strings which denotes codes for placeholder texts and images. (a text placeholder would be PH_TEXT_001, and an image placeholder would be PH_IMAGE_001). Once these XML elements are read out of the the system saves them in a sequence, and in to data objects (records) in SilverStripe. 

Slice

We made objects with respect to these objects to save the user submitted data. We had a Video Compilation class, Image Upload class, and Text Upload class. These keeps a submissions on a session and collects data from users. The JourneyStep object was used to make a user journey, and a step by step form. So when a user starts making a video it gives them fields to upload images, texts in combination, and to provide them with a multi-step form. On the last step the submission is saved in to a state called, Completed which a cron job is picking up, and using the AEPX file and the actual submitted data the cron job renders the video. 

Servers:

Selecting servers was a tricky one for us. We had several requirements which we needed to meet, also because of After Effects a few compromises had to be made. 

After a lot of discussions, brainstorm sessions, we came up with a server set up like the following. 

 amway higher level server spec v 2 1

The trick was to use one single RDS and have different servers contacting that RDS for data. Each cron instance would read data from the RDS and perform cron actions. Like compiling videos, uploading videos to Youtube, sending out emails to users. We had to face a several issues with

The combination of the servers ran without issues with properly synced cron jobs which ran periodically. The final system generated videos for a user and uploads the videos between 22 - 30 minutes, and email the users. Which was fairly a good response time when we consider the time it takes to compile a video. 

CMS & Final Product:

Here are some screenshots of the final CMS product. 

cms video page 

cms main amway 

video forms 

This is an example video generated by the system. 

 

Share this article