How to calculate actual FPS for HTML Video?

Question

I'm building a web app that is able to stream 9 live video from our server and I would like to dive deeper and improve the web performance by inspecting the FPS rate for each video. By that I mean I'm trying to get number of frames that graphic hardware trying to render in one second.

This is the FPS meter provided by Chrome. Is there a way to build my own FPS meter that corresponds to the videos? Each video should have its own meter running.

Update 1

I have tried using this Library and the result is kinda peculiar.

var stats1 = new Stats(); stats1.setMode( 0 );
var vSource = 'trailer.mp4';

var myVideo1 = document.createElement( 'video' );
  myVideo1.width = 512;
  myVideo1.src = vSource;
  myVideo1.controls = 'true';

var myTable = document.getElementById('myTable');
  var row1 = document.getElementById('row1');

row1.appendChild( stats1.domElement );
  row1.appendChild(myVideo1);

setInterval( function () {
    stats1.begin();
    myVideo1.play();
    stats1.end();
}, 1000 / 24 );

This is the library snippet that I'm using Link

    begin: function () {

        startTime = Date.now();

    },

    end: function () {

        var time = Date.now();

        ms = time - startTime;
        msMin = Math.min( msMin, ms );
        msMax = Math.max( msMax, ms );

        msText.textContent = ms + ' MS (' + msMin + '-' + msMax + ')';
        updateGraph( msGraph, Math.min( 30, 30 - ( ms / 200 ) * 30 ) );

        frames ++;

        if ( time > prevTime + 1000 ) {

            fps = Math.round( ( frames * 1000 ) / ( time - prevTime ) );
            fpsMin = Math.min( fpsMin, fps );
            fpsMax = Math.max( fpsMax, fps );

            fpsText.textContent = fps + ' FPS (' + fpsMin + '-' + fpsMax + ')';
            updateGraph( fpsGraph, Math.min( 30, 30 - ( fps / 100 ) * 30 ) );

            prevTime = time;
            frames = 0;

        }

        return time;

    },

    update: function () {

        startTime = this.end();

    }

My concern is, the algorithm seems to be wrong and the result I'm getting is not 'right'.....

The original intent of the library is to measure Javascript Performance, can I use it to measure specific video FPS?

Possible duplicate of [Check FPS in JS?](http://stackoverflow.com/questions/4787431/check-fps-in-js) — David R, Jul 29 '16 at 06:28
see http://stackoverflow.com/questions/28420724/how-to-determine-the-intended-frame-rate-on-an-html-video-element for some more info, its not an answer though. — Sumit Maingi, Jul 29 '16 at 06:33

score 0 · Answer 1 · answered Jul 29 '16 at 06:36

0

The framerate of a video isn't calculated, it's stored as part of the video's metadata. There's just a field in the video's header that says how many frames per second (or possibly the amount of time each frame is shown). It's the same way the browser knows the video's resolution.

answered Jul 29 '16 at 06:36

fasy

9
2

6

Welcome to Stack Overflow! This does not provide an answer to the question. To critique or request clarification from an author, leave a comment below their post - you can always comment on your own posts, and once you [earn](http://meta.stackoverflow.com/q/146472/169503) sufficient [reputation](http://stackoverflow.com/help/whats-reputation) you will be able to [comment](http://stackoverflow.com/help/privileges/comment) on any post. If you have a related but different question, [ask a new question](http://stackoverflow.com/questions/ask) referencing this one if it will help provide context. – ddb Jul 29 '16 at 06:47
1

I know but what I'm trying to achieve here is to profile my video and to obtain better performance by fixing the frame drop. To do that, first I need to know when is frame drop going to happen..... – J.Doe Jul 29 '16 at 08:03
2

yeah please specify where to find the information exactly!! – MartianMartian Feb 01 '17 at 10:53

How to calculate actual FPS for HTML Video?

1 Answers1