---

🔴 watch demo on youtube

---

🛠️ 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)

🔴 watch this system design video

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

📓 References

• Articles
  • How HLS URLs work with adaptive streaming short overview
  • Hls vod service in node js
  • ffmpeg docs
• videos
  • youtube system design
  • All about Digital Video - format , codecs & containers
  • ffmpeg in 100sec
• Othes
  • Hls player to test your backend
  • Hls demo source code

---

Star the Repo ⭐