De opdracht
The Broken Phone Project is een moderne dansfilm en online platform, ook wel het movement archive, waarop mensen een video van hun eigen interpertatie van een dansroutine kunnen uploaden. Iedere nieuw geüploade video wordt vervolgens automatisch aan de reeds geuploade videos geplakt om zo een eindeloze video op te bouwen. Studio Terabyte heeft samen met Lockhorst Software Solutions een full stack oplossing gebouwd voor The Broken Phone Project, bestaande uit een data pipeline die de videodata kan verwerken, een server die de communicatie tussen de frontend- en video-pipeline regelt en een frontend die past bij de moderne stijl van het project.
Video data pipeline
De eerste grote uitdaging was het bouwen van de videodata pipeline. In de kern moest deze een aantal functies vervullen:
- Het omzetten van de geuploade video's naar een standaard bestandsformaat, bestandsgrootte en kwaliteit;
- Het achter elkaar monteren van de video's;
- Het op een centrale plek opslaan van alle individuele video's en nieuwe hoofdvideo;
- En het updaten van de status per video in de SQL database.
Naast voldoen aan bovenstaande voorwaarden moest elke geuploade video ook eerste door een administrator worden goedgekeurd. Dit om het uploaden van willekeurige video's te voorkomen. Dit leverde de volgende flow op:
Voor het bewerken en renderen van de video's is er gekozen voor FFmpeg, een van de meest gebruikte multimedia frameworks voor het programmatisch werken met video en audio. Het biedt niet alleen alle benodigde opties, zoals het dynamisch aanpassen van de dimensies van de video's, maar is ook betrouwbaar en snel.
Video's worden opgeslagen met behulp van Amazon s3: Amazon's cloud oplossing voor het opslaan van grote bestanden zoals foto's en video's. Amazon s3 past wegens zijn kosteneffectiviteit en gebruiksvriendelijkheid goed bij dit project.
Studio Terabyte en Lockhorst Software Solutions gebruikten vervolgens Python om FFmpeg en Amazon s3 samen te brengen tot een volledig geautomatiseerde pipeline.
Server architectuur
Na het uitwerken van de video data pipeline diende de volgende stap zich aan: het bouwen van een server waarmee de pipeline kon worden geïntegreerd. Er is opnieuw gekozen voor Python, specifiek het webframework Flask. Flask, een van de meest gebruikte webframeworks wegens het minimalistisch design en de flexibiliteit om zelf de nodige functionaliteiten uit te bouwen, is perfect voor een oplossing op maat.
Een andere door The Broken Phone Project opgestelde wens was het opslaan van informatie betreffende de geuploade video's, bijvoorbeeld over de goedkeuring van de video's door de administrator of informatie over of een video al onderdeel is van de hoofdvideo. Sqlite3 is gebruikt om deze informatie op te slaan: een lichtgewicht SQL database welke ideaal is voor applicaties die niet constant naar een database moeten schrijven of lezen.
Het laatste onderdeel van de serverarchitectuur was de integratie van de videodata pipeline zelf. Voor deze integratie is gebruik gemaakt van Redis, een "key-value" database die de data direct in het werkgeheugen (RAM) van de server opslaat in plaats van op een harde schijf. Wanneer er vanuit de server een opdracht naar de video pipeline moet, bijvoorbeeld om het formaat van een geuploade video aan te passen, wordt de benodigde informatie in Redis opgeslagen en automatisch door de video pipeline gedetecteerd. Dit gebeurt asynchroon, zodat de gebruiker niet hoeft te wachten totdat de server klaar is met het uploaden van de video.
Frontend
Studio Terabyte en Lockhorst Software Solutions ontwierpen ook de frontend van The Broken Phone Project. De website is uitgebouwd tot een platform waarop de steeds aan te vullen dansfilm te zien is, informatie over het project te vinden is en bezoekers een video van hun eigen interperatie van de dansroutine kunnen uploaden. Het design is minimaal, modern en legt de focus op de content. Verschillende elementen van de website zijn dynamisch en worden automatisch geupdatet, bijvoorbeeld wanneer er een nieuwe video wordt geupload.
Voor het bouwen van de frontend is gebruik gemaakt van de Flask templating engine Jinja2. Dit template maakt het mogelijk om dynamische pagina's te bouwen die direct met de server geintegreerd zijn. Voor de styling is gebruik gemaakt van het populaire CSS framework Boostrap, wat het gemakkelijk maakt om responsive mobile-friendly websites te maken die er op elk schermformaat goed uitzien.
Deployment
Nadat alle onderdelen voor The Broken Phone Project gebouwd en getest waren was het tijd om alles te deployen. Studio Terabyte en Lockhorst Software Solutions kozen voor een DigitalOcean server met extra CPU-kracht om het bewerken van de video's zo efficient mogelijk te maken en er daarnaast voor te zorgen dat het bewerken geen impact heeft op de andere delen van het project, zoals de website zelf.
Resultaat
- Een efficiënte volledig geautomatiseerde video edit pipeline.
- Een betrouwbare en snelle server.
- Een dynamische frontend met een modern design.
- 86 video's geupload sinds de lancering.
- Bezoekers uit meer dan 25 landen.