Various methods for creating custom videos
Basic Hype based customization
Work:
I used the trial version of Hype to generate an HTML5 page with an animated .PNG and a text DIV overlaying a video.
Then hacked the "name.hyperesources/name_hype_generated_script.js" file to make the PNG path and the text variables adjustable in the URL.
I manually provided two images one for the name Ben and one for the Kate.
The result is an instantly rendered customized video, but lots of work remains to make this a scalable product.
Here's the direct link to the demo, but it's not responsively designed: /hype/?name=Ben
You can change the name to anything, but only "Kate" and "Ben" will resolve with image overlays.
Next Steps
- Compare off-the-shelf options
- Determine how much effort to invest in self-built MVP
Feedback
Research
Work:
First, we looked into off-the-shelf solutions and found the following options:
Off-The-Shelf
20-60¢ per rendered minute of video
• Clinch
Then I researched how we might build the system ourselves. The goal was to be able to show a cartoon-ized face of a user within the video. In order to do that, we'd need to: Recieve and store the image of the user's face, crop the image from a square to at least an oval shape around the face, apply filters to stylize the image, and either render it into a video or use JS and CSS to map it to the video.
Self Built
Store the image - Cloudinary has face detection and Facebook plugins
Crop the image - ImageMagick, Perhaps with facial identification using dlib
Apply filters - ImageMagick here's a pre-baked filter process for cartoon styling. Maybe Photoshop on a server?
Render - Maybe FFMpeg? That's going to be a lot of work to do manually. Maybe AfterEffects on a server?
CSS to Map - Use Tumult Hype to build a template