How to get the max number videos a web page can play, in a short time

Question

I want to open 16 live stream 1080P videos at the same time, but in some customers' computers, it will cause the browser to crash.

In order to avoid this, I have to get browser performance before playing that many. Now I play one video, and record the current page refresh rate by 'requestAnimationFrame', if the refresh rate is over 24, destroy previously created video, then play two videos, continue until the refresh rate less than 24. The last result is the number of video I can play, but the method cost too much time, is there a method can control the detection time within 3 seconds?

By the way, I use the WebRTC to live stream.

Answer 1

There will not be a simple answer to this unfortunately - different streams and codecs will have different loads on different browsers, or even on the same browser on different systems.

Video playback support is tied closely to the capabilities of the platform the browser is running on, typically - if the codec is supported in HW for example, playback will usually require less CPU, battery etc. Even with HW support when you have so many videos most platforms will struggle.

One way to work around this problem is to combine all your video feeds into a single stream on the server side.

You can then display this combine video so that if someone clicks on a particular part of the video, corresponding to a particular stream, you can switch to just that stream or maybe have a separate window to show the selected stream in larger or better quality.

It puts more work on the server side but this may be a treasonable tradeoff depending on your needs.