Project Planning | Milestones | Issues

Stack

• Amazon Web Services CDK
  • Lambda
  • S3, S3 Event Triggers
  • Media Converter Elements
  • Kenises Streaming
  • DynamoDB
• Reactjs - Web client
• Tanstack Router Advanced react router (built for dashboards and complex SPAs)
• React Query (with jotai integration)
• Jotai Atomic state management
• Tailwind shared UI library
• NX.dev monorepo workspace
• Cypress Visual testing framework
• Framer Motion Animation library for react
• CloudCraft Visualise your AWS cloud environment
• Dashjs Media playing client
• Google Shaka Player MPEG-DASH player by Google
• Shaka Player React

AWS Architecture

Breif

A requirement has been issued from the product team to improve the quality of the on demand video playback service from our cloud platform on low bandwidth links. It has been proposed that we can use MPEG Dash.

Reqs

Design a simple web application that plays a video delivered by MPEG-Dash. It should store metadata about the video in the backend which is exposed by an API. Support your design with sample code and documentation.

Tasks

Platform

• Provision dynamodb table to store video metadata
• Provision POST Lambda to store video metadata and mpd reference url in dynamodb table
• Use mediainfo.js to extract mp4 metadata
• Provision GET lambda to get all videos
• Provision GET lambda to get single video ref
• Provision S3 storage bucket for video and asset storage (AWS VideoTranscoder solution)
  • S3 input bucket (new uploads, mp4)
  • S3 ouput bucket (after transcoding into mp4 dash)
  • S3 thumnail bucket
• Setup AWS env accounts (prod account, dev account, temp test account)

Frontend

• Scaffold Nextjs app (ATT changed for Vite powered React App)
• Setup tailwind
• Setup routing and navigation pages
• Screens/Pages
  • Home
  • Player
  • Upload
  • About (3d render of archicture and flow diagrams, iframe)
• Components
  • Dash video player client
  • RootLayout component
  • limit file upload size (300mb)

Libs

• shared
  • config (constants etc..)
  • mocks
  • types
  • hooks/dal
  • loading spinner component
  • card component
  • upload box component

QA Testing

• SonarCloud code quality
• Test API Gatway and lambda
• Cypress
• Jest

CICD

• Github Actions deployemnt
  • Deploy CDK
  • Deploy React App (Vercel Git integration)
    • dev domain: https://onvu-stream-dev.vercel.app/
    • test domain: https://onvu-stream-test.vercel.app/
    • prod domain: https://onvu-stream.vercel.app/
• NX Cloud build caching

Documentation

• Readme
• Upload flow diagram
• Full Architecture diagram

Stretch Goals

• Platform
  • Provision S3 storage bucket for thumbnails
  • AWS Media Converter Elements job creation DASH-ISO
  • Step functions sequential flow/job
  • Provision cognito userpool using CDK
  • AWS transcription service (extract keywords automatically and ability to see video transcription next to streaming client)
  • Create lambda to returned signed url for for video upload
  • Video upload using aws presigned url
• Frontend
  • Search box for video listings filtering
  • Authentication using Cognito NextAuth

Data (Dynamodb)

PK (videoId)	SK	length	type	inputBucket	outputBucketMpd	coverImg	transcription
208439	userId#createdAt	4:20	mpeg	http://...	http://...	http//...	fjlkajdjljfl

Research, docs and resources

• AWS Kinesis streaming mpeg-dash
• Streaming video from S3, CloudFront and React
• KVS ingestion from RTSP cameras a Kinesis Video Streams tutorial
• Build a Real Time Data Streaming System with AWS Kinesis, Lambda Functions and a S3 Bucket
• How to Build a File Upload System on AWS with React and a Serverless API | Lambda, S3, API Gateway

Development server

Run nx serve my-app for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

Code scaffolding

Run nx g @nrwl/react:component my-component --project=my-app to generate a new component.

Build

Run nx build my-app to build the project. The build artifacts will be stored in the dist/ directory. Use the --prod flag for a production build.

Running unit tests

Run nx test my-app to execute the unit tests via Jest.

Run nx affected:test to execute the unit tests affected by a change.

Running end-to-end tests

Run nx e2e my-app to execute the end-to-end tests via Cypress.

Run nx affected:e2e to execute the end-to-end tests affected by a change.

Understand your workspace

Run nx graph to see a diagram of the dependencies of your projects.

Further help

Visit the Nx Documentation to learn more.

☁ Nx Cloud

Distributed Computation Caching & Distributed Task Execution

Nx Cloud pairs with Nx in order to enable you to build and test code more rapidly, by up to 10 times. Even teams that are new to Nx can connect to Nx Cloud and start saving time instantly.

Teams using Nx gain the advantage of building full-stack applications with their preferred framework alongside Nx’s advanced code generation and project dependency graph, plus a unified experience for both frontend and backend developers.

Visit Nx Cloud to learn more.