amitanshusahu / YouTube-fullstack

QuteTube a youtube like fullstack video content plartform with "Adaptive Bitrate Streaming"

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

qute-tube-logo-ghb-removebg-preview



πŸ› οΈ Tech Stack / packages used

  • client: React, Typescript, hls.js, video.js, styled-components.
  • backend: nodejs, express, multer, mongoose, fluent-ffmpeg, cors, dotenv, jwt

πŸ’» Machine Requirements

  • nodjs 19+
  • docker
  • ffmpeg
  • mongodb

πŸ“Œ Set up project

  • clone the repo and go into it
git clone https://github.com/amitanshusahu/YouTube-fullstack & cd YouTube-fullstack
  • run rabbitmq docker image and make sure it is accessible on port 5672
docker run -p 5672:5672 rabbitmq
  • run services in different terminal instances
# auth service
cd server/src/auth-service & npm start

# server
cd server/src/server & npm start

# upload service
cd server/src/upload-service & npm start

# encoder-service
cd server/src/encoder-service & npm start
  • run the client
cd client & npm run dev

πŸ“Œ Explanation of the core feature (video upload/transcode)

Adaptive bitrate streaming HLS VOD service

  • we send the payload (video, tags, title..etc) '/upload' with a POST request, the upload service stores the original video ( disk in the case, could be any object storage which gives the url to the video)
  • the upload service then sends the video url along with title, tags..etc to a Queue (RabbitMq in this case)
  • the encoder service consumes the messages from the queue and transcodes the video into different bitrates and generates a master m3u8 playlist for Adaptive bitrate streaming ( ffmpeg does the encoding part )
  • a m3u8 playlist is generated for each bitrate, an m3u8 file is simply an index of all the video chunks url and the master m3u8 file has the absolute urls of m3u8's of different bitrates.
  • then the uls to these m3u8 files and the video metadata is stored in the database (mongodb)
  • the client can request the master m3u8 file or a m3u8 of desired bitrate by explicitly selecting from Auto, 144p, 360p etc..

NOTE: hls is native in safari but not firefox and chrome, you will need hls.js to use the m3u8 files

manifest

πŸ““ References


Star the Repo ⭐

About

QuteTube a youtube like fullstack video content plartform with "Adaptive Bitrate Streaming"


Languages

Language:TypeScript 66.9%Language:JavaScript 31.7%Language:CSS 0.9%Language:HTML 0.4%Language:Shell 0.1%