Athletes Eye is a Next.js web app that enables users to overlay video footage with a gpx fiel to create a sport video displaying telemtry data of their recorded activity. The web app is built using React.js and Remotion. Vercel is used for the deployment of the web app.
The whole video creation process is achieved with Remotion, a react framework for programatical video creation. The final video gets rendered with @remotion/lambda, a serverless function that runs on AWS Lambda.
The video and gpx file used for the final video are stored in an AWS S3 bucket. The user can upload the files to the bucket via the web app. Once uploaded, adjustments to the video can be made. Thereafter, the files get processed by the serverless function and the final video is stored in the S3 bucket, from where the video then can be downloaded.
Follow the steps below to install the web app locally.
-
Clone the repository
git clone https://github.com/remotion-dev/athletes-eye.git
-
Install dependencies
npm install
-
Create a
.envfile in the root directory of the project -
Set up your AWS accouunt according to the Remotion Lambda Setup guide and fill out the .env file accordingly
REMOTION_AWS_ACCESS_KEY_ID=<Acces key ID> REMOTION_AWS_SECRET_ACCESS_KEY=<Secret access key> REMOTION_AWS_REGION = <Bucket region>
-
Deploy AWS Lambda function
npx remotion lambda functions deploy
-
Run the following command to start the development server:
npm run dev
The easiest way to deploy this Next.js app is to use the Vercel Platform from the creators of Next.js.
Check out the Next.js deployment documentation for more details.
To learn more about Remotion, take a look at the following resources:
- Remotion Docs - learn about Remotion features and API.
- Remotion Showcase - example Remotion projects to get inspired.