Skip to Content
Nextra 4.0 is released 🎉
DocumentationReal-time Gaming LeaderboardPropose High Level Design and Get Buy In

āĻĒā§āϰāĻ¸ā§āϤāĻžāĻŦāĻŋāϤ High-Level Design āĻāĻŦāĻ‚ āϏāĻŽā§āĻŽāϤāĻŋ āύ⧇āĻ“āϝāĻŧāĻž (Get Buy-in)

āφāϗ⧇ āϝ⧇āĻŽāύ āφāϞ⧋āϚāύāĻž āĻ•āϰāĻž āĻšāϝāĻŧ⧇āϛ⧇, interviewer āĻĒāϰāĻžāĻŽāĻ°ā§āĻļ āĻĻāĻŋāϝāĻŧ⧇āϛ⧇āύ āϝ⧇ āϏāĻŦāĻ•āĻŋāϛ⧁ āύāĻŋāĻœā§‡ āĻĨ⧇āϕ⧇ āϤ⧈āϰāĻŋ āύāĻž āĻ•āϰ⧇ āĻŦāĻŋāĻĻā§āϝāĻŽāĻžāύ cloud service āĻŦā§āϝāĻŦāĻšāĻžāϰ āĻ•āϰāĻž āωāϚāĻŋāϤāĨ¤ āĻāχ āĻ•ā§āώ⧇āĻ¤ā§āϰ⧇ CDN āĻāĻŦāĻ‚ blob storage āφāĻŽāϰāĻž āĻŦā§āϝāĻŦāĻšāĻžāϰ āĻ•āϰāĻŦāĨ¤

āĻ…āύ⧇āϕ⧇ āĻĒā§āϰāĻļā§āύ āĻ•āϰāϤ⧇ āĻĒāĻžāĻ°ā§‡â€”āϏāĻŦāĻ•āĻŋāϛ⧁ āύāĻŋāĻœā§‡ āϕ⧇āύ āĻŦāĻžāύāĻžāĻŦ āύāĻž?

āĻ•āĻžāϰāĻŖāϗ⧁āϞ⧋ āύāĻŋāĻšā§‡ āĻĻ⧇āĻ“āϝāĻŧāĻž āĻšāϞ⧋:

  • System design interview-āĻ āϏāĻŦāĻ•āĻŋāϛ⧁ scratch āĻĨ⧇āϕ⧇ āĻŦāĻžāύāĻžāύ⧋ āωāĻĻā§āĻĻ⧇āĻļā§āϝ āύāϝāĻŧāĨ¤ āϏ⧀āĻŽāĻŋāϤ āϏāĻŽāϝāĻŧ⧇ āϏāĻ āĻŋāĻ• technology āύāĻŋāĻ°ā§āĻŦāĻžāϚāύ āĻ•āϰāĻž āĻŦ⧇āĻļāĻŋ āϗ⧁āϰ⧁āĻ¤ā§āĻŦāĻĒā§‚āĻ°ā§āĻŖāĨ¤ āωāĻĻāĻžāĻšāϰāĻŖāĻ¸ā§āĻŦāϰ⧂āĻĒ, āĻ­āĻŋāĻĄāĻŋāĻ“ store āĻ•āϰāĻžāϰ āϜāĻ¨ā§āϝ blob storage āĻŦāϞāϞ⧇āχ āϝāĻĨ⧇āĻˇā§āϟ, āϤāĻžāϰ internal design āĻŦā§āϝāĻžāĻ–ā§āϝāĻž āĻ•āϰāĻž āĻĻāϰāĻ•āĻžāϰ āύ⧇āχāĨ¤

  • Scalable blob storage āĻŦāĻž CDN āϤ⧈āϰāĻŋ āĻ•āϰāĻž āĻ…āĻ¤ā§āϝāĻ¨ā§āϤ āϜāϟāĻŋāϞ āĻāĻŦāĻ‚ āĻŦā§āϝāϝāĻŧāĻŦāĻšā§āϞāĨ¤ āĻŦāĻĄāĻŧ āϕ⧋āĻŽā§āĻĒāĻžāύāĻŋ āϝ⧇āĻŽāύ Netflix āĻŦāĻž Facebook āϏāĻŦāĻ•āĻŋāϛ⧁ āύāĻŋāĻœā§‡āϰāĻž āϤ⧈āϰāĻŋ āĻ•āϰ⧇ āύāĻžāĨ¤ Netflix Amazon cloud āĻŦā§āϝāĻŦāĻšāĻžāϰ āĻ•āϰ⧇, Facebook Akamai CDN āĻŦā§āϝāĻŦāĻšāĻžāϰ āĻ•āϰ⧇āĨ¤


High-level system āϤāĻŋāύāϟāĻŋ āĻĒā§āϰāϧāĻžāύ āĻ…āĻ‚āĻļ āύāĻŋāϝāĻŧ⧇ āĻ—āĻ āĻŋāϤ (Figure 3):

  1. Client: YouTube āĻĻ⧇āĻ–āĻž āϝāĻžāϝāĻŧ computer, mobile phone āĻāĻŦāĻ‚ smart TV āĻĨ⧇āϕ⧇āĨ¤

  2. CDN: āϏāĻŦ video CDN-āĻ store āĻĨāĻžāϕ⧇āĨ¤ Play āϚāĻžāĻĒāϞ⧇ āĻ­āĻŋāĻĄāĻŋāĻ“ CDN āĻĨ⧇āϕ⧇ stream āĻšāϝāĻŧāĨ¤

  3. API Servers: āĻ­āĻŋāĻĄāĻŋāĻ“ streaming āĻ›āĻžāĻĄāĻŧāĻž āĻŦāĻžāĻ•āĻŋ āϏāĻŦ āĻ•āĻžāϜ API servers handle āĻ•āϰ⧇āĨ¤ āϝ⧇āĻŽāύ:

  • feed recommendation
  • video upload URL āϤ⧈āϰāĻŋ āĻ•āϰāĻž
  • metadata database āĻāĻŦāĻ‚ cache update āĻ•āϰāĻž
  • user signup āχāĻ¤ā§āϝāĻžāĻĻāĻŋ

Interview-āĻ interviewer āϏāĻžāϧāĻžāϰāĻŖāϤ āĻĻ⧁āϟāĻŋ flow-āϤ⧇ āφāĻ—ā§āϰāĻš āĻĻ⧇āĻ–āĻžāϝāĻŧ:

  1. Video upload flow
  2. Video streaming flow

āĻāĻ–āύ āφāĻŽāϰāĻž āĻāϗ⧁āϞ⧋ high-level design āĻ āĻŦ⧁āĻāĻŦāĨ¤


VIDEO UPLOAD FLOW

Video uploading system āĻāϰ high-level design (Figure 4):

System components:

  • User: Computer, mobile, smart TV āĻŦā§āϝāĻŦāĻšāĻžāϰ āĻ•āϰ⧇ YouTube access āĻ•āϰ⧇āĨ¤

  • Load balancer: āϏāĻŦ request API servers-āĻ evenly distribute āĻ•āϰ⧇āĨ¤

  • API servers: Video streaming āĻ›āĻžāĻĄāĻŧāĻž āϏāĻŦ request handle āĻ•āϰ⧇āĨ¤

  • Metadata DB: Video āϏāĻŽā§āĻĒāĻ°ā§āĻ•āĻŋāϤ āϤāĻĨā§āϝ (metadata) store āĻ•āϰ⧇āĨ¤ āĻāϟāĻŋ sharded āĻāĻŦāĻ‚ replicated āϝāĻžāϤ⧇ performance āĻāĻŦāĻ‚ availability āĻ­āĻžāϞ⧋ āĻšāϝāĻŧāĨ¤

  • Metadata cache: Frequently used metadata cache-āĻ āϰāĻžāĻ–āĻž āĻšāϝāĻŧ āĻĻā§āϰ⧁āϤ access āĻāϰ āϜāĻ¨ā§āϝāĨ¤

  • Original storage: Original video store āĻ•āϰāĻžāϰ āϜāĻ¨ā§āϝ blob storage āĻŦā§āϝāĻŦāĻšāĻžāϰ āĻ•āϰāĻž āĻšāϝāĻŧāĨ¤ Blob storage āĻšāϞ⧋ binary data āĻŦāĻĄāĻŧ āφāĻ•āĻžāϰ⧇ store āĻ•āϰāĻžāϰ systemāĨ¤

  • Transcoding servers: Video format convert āĻ•āϰ⧇ (āϝ⧇āĻŽāύ MPEG, HLS āχāĻ¤ā§āϝāĻžāĻĻāĻŋ) āϝāĻžāϤ⧇ āĻŦāĻŋāĻ­āĻŋāĻ¨ā§āύ device-āĻ smoothly play āĻšāϝāĻŧāĨ¤

  • Transcoded storage: Processed video store āĻ•āϰāĻžāϰ āϜāĻ¨ā§āϝ blob storageāĨ¤

  • CDN: Transcoded video CDN-āĻ store āĻšāϝāĻŧ āĻāĻŦāĻ‚ user-āϕ⧇ fast delivery āĻĻ⧇āϝāĻŧāĨ¤

  • Completion queue: Transcoding āĻļ⧇āώ āĻšāĻ“āϝāĻŧāĻžāϰ event store āĻ•āϰ⧇āĨ¤

  • Completion handler: Queue āĻĨ⧇āϕ⧇ event āύāĻŋāϝāĻŧ⧇ metadata DB āĻāĻŦāĻ‚ cache update āĻ•āϰ⧇āĨ¤


Video upload flow āĻĻ⧁āχ āĻ­āĻžāϗ⧇ parallelāĻ­āĻžāĻŦ⧇ āĻ•āĻžāϜ āĻ•āϰ⧇:

A) Actual video upload
B) Metadata update


FLOW A: ACTUAL VIDEO UPLOAD

  1. Video āĻĒā§āϰāĻĨāĻŽā§‡ original storage-āĻ upload āĻšāϝāĻŧ

  2. Transcoding server video fetch āĻ•āϰ⧇ processing āĻļ⧁āϰ⧁ āĻ•āϰ⧇

  3. Transcoding āĻļ⧇āώ āĻšāϞ⧇ parallel āĻĻ⧁āχāϟāĻŋ āĻ•āĻžāϜ āĻšāϝāĻŧ:

    3a. Transcoded video storage-āĻ save āĻšāϝāĻŧ
    3b. Completion event queue-āϤ⧇ āϝāĻžāϝāĻŧ

  4. Transcoded video CDN-āĻ distribute āĻšāϝāĻŧ

  5. Completion handler queue āĻĨ⧇āϕ⧇ event āύāĻŋāϝāĻŧ⧇ DB āĻāĻŦāĻ‚ cache update āĻ•āϰ⧇

  6. API server client-āϕ⧇ āϜāĻžāύāĻžāϝāĻŧ video ready


FLOW B: METADATA UPDATE

Video upload āϚāϞāĻžāĻ•āĻžāϞ⧀āύ parallelāĻ­āĻžāĻŦ⧇ client metadata āĻĒāĻžāĻ āĻžāϝāĻŧ:

  • file name
  • size
  • format
  • etc.

API server āĻāχ metadata:

  • cache-āĻ update āĻ•āϰ⧇
  • database-āĻ store āĻ•āϰ⧇

VIDEO STREAMING FLOW

YouTube-āĻ video āĻĻ⧇āĻ–āĻžāϰ āϏāĻŽāϝāĻŧ āĻĒ⧁āϰ⧋ video download āĻšāϝāĻŧ āύāĻžāĨ¤ āĻŦāϰāĻ‚ streaming āĻšāϝāĻŧāĨ¤

Streaming āĻŽāĻžāύ⧇: āĻ­āĻŋāĻĄāĻŋāĻ“ āϛ⧋āϟ āϛ⧋āϟ āĻ…āĻ‚āĻļ⧇ āĻ­āĻžāĻ— āĻšāϝāĻŧ⧇ continuously āĻĒāĻžāĻ āĻžāύ⧋ āĻšāϝāĻŧāĨ¤


Streaming Protocols:

  • MPEG-DASH
  • Apple HLS
  • Microsoft Smooth Streaming
  • Adobe HDS

👉 āĻāϗ⧁āϞ⧋ low-level details, interview-āĻ āĻļ⧁āϧ⧁ concept āĻŦā§‹āĻāĻž āϗ⧁āϰ⧁āĻ¤ā§āĻŦāĻĒā§‚āĻ°ā§āĻŖāĨ¤


VIDEO STREAMING PROCESS

  • Video āϏāϰāĻžāϏāϰāĻŋ CDN āĻĨ⧇āϕ⧇ stream āĻšāϝāĻŧ
  • User-āĻāϰ āĻ•āĻžāϛ⧇āϰ edge server āĻĨ⧇āϕ⧇ video āφāϏ⧇
  • āϤāĻžāχ latency āϖ⧁āĻŦ āĻ•āĻŽ āĻšāϝāĻŧ

FLOW (Figure 7):

  1. Client (mobile, web, smart TV) request āĻĒāĻžāĻ āĻžāϝāĻŧ
  2. CDN āϏ⧇āχ request receive āĻ•āϰ⧇
  3. Video CDN āĻĨ⧇āϕ⧇ directly stream āĻšāϝāĻŧ

SUMMARY:

  • Video upload system āĻ…āύ⧇āĻ• component āύāĻŋāϝāĻŧ⧇ āĻ•āĻžāϜ āĻ•āϰ⧇
  • Metadata + video processing parallelāĻ­āĻžāĻŦ⧇ āϚāϞ⧇
  • CDN streaming system āϖ⧁āĻŦ fast āĻāĻŦāĻ‚ scalable
  • API server āĻļ⧁āϧ⧁ control āĻāĻŦāĻ‚ metadata handle āĻ•āϰ⧇
  • Video directly CDN āĻĨ⧇āϕ⧇ stream āĻšāϝāĻŧ, server āĻĨ⧇āϕ⧇ āύāĻž