How to Set Up BYOS (Bring Your Own Storage) with VIZZ using AWS S3 & CloudFront

Introduction

This guide will walk you through the step-by-step process of setting up AWS S3 and CloudFront for your video uploads in VIZZ. By the end, you'll be able to record videos in your application, upload them to S3, and stream them securely via CloudFront — all through your VIZZ dashboard.

Even if you've never used AWS before, don't worry. This guide is beginner-friendly, fully updated, and idiot-proof. Let's dive in!

---

Step 1: Create an S3 Bucket

S3 (Simple Storage Service) is where your video files will be stored.

Go to AWS S3 Console

https://s3.console.aws.amazon.com/s3

Create a Bucket

1. Click Create bucket.
2. Enter a unique bucket name (e.g., vizz-video-bucket-xyz123).
3. Select your preferred AWS region (e.g., US East (N. Virginia)).
4. Click Create bucket.

---

Step 2: Set Up a CloudFront Distribution (Origin: S3)

CloudFront is a CDN that will let you stream videos from S3 efficiently and securely.

Open CloudFront Console

https://console.aws.amazon.com/cloudfront

Create Origin Access Control (OAC)

1. From the left menu, scroll to Security > Origin access.
2. Click Create control setting.
3. Fill in the name (e.g., OAC-for-vizz) and choose:
   • Signing behavior: Always
   • Enable bucket policy update: ✅ Yes
4. Click Create.

Create a Distribution

1. Click Distributions > Create distribution.
2. Under Origin, click Browse S3 and select the bucket you just created.
3. Choose the OAC you created above as the access control mechanism.
4. (Optional) Enable Web Application Firewall (WAF) if needed.
5. Leave default settings or adjust as per your needs.
6. Click Create distribution.

Wait for the distribution to be deployed

This may take a few minutes. Once deployed, open the distribution and copy the Domain Name (e.g., d1234abc.cloudfront.net). This is your CLOUD_FRONT_STREAM_URL.

---

Step 3: Set S3 Bucket Permissions

You need to make sure CloudFront can access your bucket and your frontend can upload files.

Confirm Bucket Policy

1. Go to S3 > your bucket > Permissions > Bucket policy.
2. Ensure a CloudFront-origin policy exists. It should look like this:

{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Effect": "Allow",
      "Principal": {
        "Service": "cloudfront.amazonaws.com"
      },
      "Action": "s3:GetObject",
      "Resource": "arn:aws:s3:::your-bucket-name/*",
      "Condition": {
        "StringEquals": {
          "AWS:SourceArn": "arn:aws:cloudfront::YOUR_ACCOUNT_ID:distribution/YOUR_DISTRIBUTION_ID"
        }
      }
    }
  ]
}

If it's missing, follow this AWS guide to set it up manually.

Add CORS Policy

To allow Vizz to upload files directly to your S3:

1. Go to Permissions > CORS configuration.
2. Paste the following JSON:

[
  {
    "AllowedHeaders": ["*"],
    "AllowedMethods": ["PUT", "POST", "GET"],
    "AllowedOrigins": ["https://vizz.oxlac.com"],
    "ExposeHeaders": ["ETag"],
    "MaxAgeSeconds": 3000
  }
]

This allows secure cross-origin uploads from your VIZZ frontend.

---

Step 4: Create an IAM User for Your App

This user will let your backend securely interact with S3.

Go to IAM Console

https://console.aws.amazon.com/iam

Add a New User

1. In the left menu, click Users > Add users.
2. Enter a username (e.g., video-uploader).
3. Select Access key - Programmatic access.
4. Click Next: Permissions.

Attach Permissions

1. Choose Attach policies directly.
2. Search for and check AmazonS3FullAccess.
3. Click Next > Create user.

---

Step 5: Generate Access Key and Secret

You now need credentials for your backend.

1. Click on your new user from the Users list.
2. Go to Security credentials > Access keys.
3. Click Create access key.
4. Choose Application running outside AWS.
5. Click Next and Create access key.

Important:

• Access key ID = AWS_ACCESS_KEY_ID
• Secret access key = AWS_SECRET_ACCESS_KEY

⚠️ Make sure to copy and store the secret access key now. You won’t be able to view it again.

---

You're All Set!

You now have the 5 essential values to connect AWS with VIZZ:

Name	Value Example
AWS ACCESS KEY ID	AKIAIOSFODNN7EXAMPLE
AWS SECRET ACCESS KEY	wJalrXUtnFEMI/K7MDENG/bPxRfiCYEXAMPLEKEY
BUCKET_NAME	vizz-video-bucket-xyz123
BUCKET_REGION	us-east-1
CLOUD FRONT STREAM URL	https://d1234abc.cloudfront.net

Paste these into the BYOS Configuration page in your VIZZ Dashboard, and start uploading and streaming videos instantly!

Images Guide - click here

---

Need Help?

If you run into issues or have questions, reach out to our team at
contact@oxlac.com — we're happy to help!

---