# AWS Serverless Project: Video Upload and Playback Application

## Overview

This project showcases a fully serverless video upload and playback application built using AWS services. The application enables users to upload videos, store them in Amazon S3, and manage metadata in DynamoDB. Videos can then be fetched and played seamlessly through a modern web interface. The architecture is scalable, secure, and cost-effective.

👉 **Follow Project on GitHub Repo Link**: [https://github.com/prafulpatel16/video-app-aws-serverless/blob/master/README.md](https://github.com/prafulpatel16/video-app-aws-serverless/blob/master/README.md) [🚀✨](https://github.com/prafulpatel16/video-app-aws-serverless/blob/master/README.md)

---

## [Architecture Diagram](https://github.com/prafulpatel16/video-app-aws-serverless/blob/master/README.md)

---

## [Key Features](https://github.com/prafulpatel16/video-app-aws-serverless/blob/master/README.md)

1. [Scalable serverless architecture.](https://github.com/prafulpatel16/video-app-aws-serverless/blob/master/README.md)
    
2. Upload videos directly from the frontend to S3.
    
3. Store video metadata in DynamoDB.
    
4. Fetch and play videos via a modern web interface.
    

---

## Tech Stack

* **Frontend**: HTML, CSS, JavaScript
    
* **Backend**: AWS Lambda, API Gateway
    
* **Database**: DynamoDB
    
* **Storage**: S3
    
* **Monitoring**: CloudWatch
    

---

## Step-by-Step Implementation

### 1\. Setting Up Amazon S3 for Video Storage

1. **Create an S3 Bucket**:
    
    ```bash
    aws s3 mb s3://video-upload-bucket
    ```
    

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1735677371189/9b88a24f-b29c-403a-9d5e-400719a94f2a.png align="center")

1. **Configure CORS**:
    
    ```json
    [
        {
            "AllowedHeaders": ["*"],
            "AllowedMethods": ["GET", "PUT", "POST"],
            "AllowedOrigins": ["*"]
        }
    ]
    ```
    
2. **Enable Static Website Hosting**:
    
    * Go to the **Properties** tab in the S3 console.
        
    * Set **Index Document** to `index.html`.
        

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1735677394849/4e475772-8850-4bfc-ba93-d3b02ed809ef.png align="center")

1. **Sync Frontend Files**:
    
    ```bash
    aws s3 sync static-web/ s3://video-upload-bucket
    ```
    

---

### 2\. Setting Up DynamoDB for Metadata Storage

1. **Create a DynamoDB Table**:
    
    ```bash
    aws dynamodb create-table \
        --table-name video-metadata \
        --attribute-definitions AttributeName=videoId,AttributeType=S \
        --key-schema AttributeName=videoId,KeyType=HASH \
        --billing-mode PAY_PER_REQUEST
    ```
    
    ---
    

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1735677423780/3ad61461-8e54-4ab5-a7d2-dc7dec9d69f2.png align="center")

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1735677432723/596036a8-fe7c-4cd8-ba30-b44b2174e6fe.png align="center")

3\. Creating Lambda Functions

#### Upload Handler

This function uploads videos to S3 and saves metadata in DynamoDB.

```python
import boto3
import json
import os
import uuid

s3 = boto3.client('s3')
dynamodb = boto3.resource('dynamodb')

BUCKET_NAME = os.environ['BUCKET_NAME']
TABLE_NAME = os.environ['TABLE_NAME']

def lambda_handler(event, context):
    try:
        file_content = event['body']
        file_name = f"{uuid.uuid4()}.mp4"

        # Upload video to S3
        s3.put_object(Bucket=BUCKET_NAME, Key=file_name, Body=file_content)

        # Save metadata to DynamoDB
        table = dynamodb.Table(TABLE_NAME)
        table.put_item(
            Item={
                'videoId': file_name,
                'url': f"https://{BUCKET_NAME}.s3.amazonaws.com/{file_name}"
            }
        )

        return {
            "statusCode": 200,
            "headers": {"Access-Control-Allow-Origin": "*"},
            "body": json.dumps({"message": "File uploaded successfully"})
        }
    except Exception as e:
        return {
            "statusCode": 500,
            "headers": {"Access-Control-Allow-Origin": "*"},
            "body": json.dumps({"error": str(e)})
        }
```

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1735677451775/cf2c9a39-8aa3-4306-a13e-6fa997dd81fc.png align="center")

#### Fetch Handler

This function retrieves video metadata from DynamoDB.

```python
import boto3
import json
import os

dynamodb = boto3.resource('dynamodb')
TABLE_NAME = os.environ['TABLE_NAME']

def lambda_handler(event, context):
    try:
        table = dynamodb.Table(TABLE_NAME)
        response = table.scan()

        return {
            "statusCode": 200,
            "headers": {"Access-Control-Allow-Origin": "*"},
            "body": json.dumps(response['Items'])
        }
    except Exception as e:
        return {
            "statusCode": 500,
            "headers": {"Access-Control-Allow-Origin": "*"},
            "body": json.dumps({"error": str(e)})
        }
```

---

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1735677486956/e9780dd6-9db1-48c6-85ae-8f7d96d571b9.png align="center")

### 4\. Configuring API Gateway

1. **Create an API**:
    
    * Go to **API Gateway** > **Create API**.
        
    * Choose **HTTP API** and name it `video-app-api`.
        
2. **Add Routes**:
    
    * POST `/upload` → `video-upload-handler`.
        
    * GET `/fetch` → `video-fetch-handler`.
        
3. **Enable CORS**:
    
    * Add headers:
        
        * `Access-Control-Allow-Origin: *`
            
        * `Access-Control-Allow-Methods: GET, POST, OPTIONS`
            

---

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1735677517509/b40316ab-f126-4896-81c6-f27c8f9fb404.png align="center")

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1735677524745/7b26c63e-1ec7-47f8-ba9a-53b5cdb43026.png align="center")

### 5\. Hosting Frontend on S3

1. Sync the frontend files:
    
    ```bash
    aws s3 sync static-web/ s3://video-upload-bucket
    ```
    

---

### 6\. Testing the Application

1. Open the static website URL in your browser.
    
2. Upload videos and fetch metadata to test the functionality.
    

---

## Monitoring and Optimization

1. **Enable CloudWatch Logs** for Lambda functions to monitor errors and performance.
    
2. Use **CloudFront** to distribute video content globally for faster playback.
    

---

## Challenges and Solutions

1. **CORS Issues**:
    
    * Ensure proper headers are configured in API Gateway and Lambda responses.
        
2. **Large File Uploads**:
    
    * Use multipart uploads for better performance with large files.
        

---

## Conclusion

This AWS serverless project demonstrates the power of building scalable, cost-efficient, and secure video upload and playback systems. By leveraging AWS services like S3, DynamoDB, Lambda, and API Gateway, developers can deliver high-quality user experiences without managing server infrastructure. This architecture is ideal for real-time video applications.