DEV Community

Adam
Adam

Posted on • Edited on

Stop Wasting Storage! The Truth About Video FPS, Bitrate & File Size

When streaming video to multiple clients simultaneously, understanding the relationship between FPS, bitrate, and file size becomes crucial. Here's what I learned while optimizing a video streaming system.

The Target: 3-5 Mbps at 24fps

Our goal was to ensure smooth playback for multiple concurrent streams. Why these numbers?

  • 24fps is the film standard and provides smooth motion
  • 3-5 Mbps delivers excellent quality at this frame rate
  • Lower bitrates enable more concurrent streams
  • Higher isn't always better!

The Math Behind Video Streaming

The relationship is straightforward but often misunderstood:

  1. File size ≈ (bitrate × duration)
  2. Higher FPS requires proportionally more bandwidth
    • 60fps needs 2.5x more data than 24fps
    • 30fps needs 1.25x more data than 24fps

Real-World Examples

For a 5-minute video:

  • At 24fps, 4 Mbps = ~150MB file
  • At 60fps, same quality needs 10 Mbps = ~375MB file
  • At 30fps, same quality needs 5 Mbps = ~188MB file

Implementation Tips

  1. Measuring Video Quality:

    • Calculate adjusted bitrate based on FPS
    • Consider file size relative to duration
    • Check for unnecessarily high FPS
  2. Browser-Side Analysis:

    • Using requestVideoFrameCallback for FPS detection
    • Getting file size from content-length headers
    • Calculating real-world bitrate
  3. Quality Indicators:

    • Warning thresholds for bitrate
    • Adjusting expectations for FPS
    • Balancing quality vs bandwidth

Lessons Learned

  1. Higher isn't always better
  2. FPS dramatically affects bandwidth needs
  3. Consistent quality matters more than raw numbers
  4. Browser APIs can help analyze video metrics

Conclusion

Understanding these relationships helps build better video streaming systems. It's not about maximum quality, but optimal quality for your use case.

Reinvent your career. Join DEV.

It takes one minute and is worth it for your career.

Get started

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Dive into an ocean of knowledge with this thought-provoking post, revered deeply within the supportive DEV Community. Developers of all levels are welcome to join and enhance our collective intelligence.

Saying a simple "thank you" can brighten someone's day. Share your gratitude in the comments below!

On DEV, sharing ideas eases our path and fortifies our community connections. Found this helpful? Sending a quick thanks to the author can be profoundly valued.

Okay