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.