clappr / clappr-stats

A clappr plugin to report playback statuses (timers: session, buffering, watch and counters: play, pause, error, fps)

Huge changes in the latest version. See 0.4.0 version changelog for more information

Clappr Monorepo

Look for Clappr and related packages under the /packages directory. Applications like the clappr.io documentation site are under the /apps directory.

Documentation

Visit https://clappr.github.io to view the full documentation.

Run the Development Server

1. Run yarn install to install all dependencies
2. Run yarn dev will start the development server.
3. Visit http://localhost:8080 to view your application.

clappr-stats's Issues

Add current time / duration

It's important if the user wants to keep track of in what happened in a given time, mostly for VOD. Therefore we might deduce X %.

extra: {
   duration: 50004, // in ms
   currentTime: 4504, // in ms
   watchedPercentage: (watch / duration) * 100,// in ms
   bufferingPercentage: (buffering  / watch) * 100,// in ms
}

Should we stop the watch timer when user pauses the video?

watch metrics & PlaybackSpeedPlugin

Is there any way of updating 'watch' metrics in line with the playback speed plugin.

When a video is played at x2 speed for 10 seconds, clappr-stats still reports it as 10 seconds, but I expect it to report 20 seconds. Or when the video is played at 0.5 speed for 10 seconds, it should be logged as 5 seconds. Is this possible?
Thanks.

onReport - how to pass metrics to a callback function

Perhaps I'm dense or need more caffeine - but alas, I have yet to be able to understand how to override the default console.log(metrics) that gets called with onReport.

I honestly have never seen this form of syntax prior today:

onReport: (metrics) => { console.log(metrics) }

So perhaps I'm not well enough versed, but can I get some guidance on how I can pass the metrics that are being sent to console log to an external function?

I have tried:

clapperStats: { runEach: 5000, onReport: function(metrics) { myFunction(metrics); } },

clapperStats: { runEach: 5000, onReport: (metrics) => { myFunction(metrics) } },

with something like this outside the player,

function myFunction(metrics = null) { console.log('You rang?'); console.log(metrics); }

And nothing I have tried has worked. I see the default console.logs happening like clockwork, but "myFunction" is never touched.

Barring forking the code and replacing the default, you have successfully triggered my impostor syndrome and I beg for a light in this darkness.

All that said, great work here - I'm just a bit confused on this one aspect.

Adds dvr usage timer

Uses EMA to average bitrate

https://github.com/clappr/clappr-stats/blob/master/index.js#L191

Handle stop event

Currently, if a user stop a live stream and play it again, this plugin won't report anymore metrics. Should we restart this plugin's state (and collects new metrics) or include counters and timers of stop?

Does not work with autoPlay true

var playerElement = document.getElementById("player-wrapper");

var player = new Clappr.Player({
  source: 'http://clappr.io/highline.mp4',
  baseUrl: '/latest',
  poster: 'http://clappr.io/poster.png',
  mute: true,
  autoPlay: true,
  plugins: [ClapprStats],
  height: 360,
  width: 640
});

player.attachTo(playerElement);

Create a nerd-stats UI plugin

hi
is there any possibility to add in stats "live latency" like on youtube ?

I like the way they display stats and what they show.. maybe an idea to improve this plugin ;-) ?

thanks

nico

Won't work :-(

I initialize player this:

new Clappr.Player(
            {
                source: this.canal.streaming_url,
                poster: this.epgPoster,
                plugins: [LevelSelector, ChromecastPlugin, ClapprStats],
                levelSelectorConfig: {
                    title: 'Qualitat',
                    labels: {
                        2: 'Alta', // 500kbps
                        1: 'Mitja', // 240kbps
                        0: 'Baixa', // 120kbps
                    }
                },
                parentId: "#player",
                chromecast: {
                    appId: undefined,
                    contentType: 'video/mp4',
                    media: {
                        type: ChromecastPlugin.Movie,
                        title: this.canal.description,
                        subtitle: this.currentEpgDescription,
                    }
                },
                autoPlay: true,
                width: '100%',
                clapprStats: {
                    runEach: 1000,
                    onReport: (metrics) => {console.log(metrics)},
                    //uriToMeasureLatency: 'https://upload.wikimedia.org/wikipedia/commons/c/ce/Transparent.gif'
                }
            });

Console don't show nothing. Any way to find more?
The streaming URL is a m3u8 playlist.

Regards

Percentage event is not called

When the video has low total time, some times percentage event is not called, because event PLAYBACK_TIMEUPDATE has a very large time interval.

Example:

Source: http://v2v.cc/~j/theora_testsuite/320x240.ogg
onCompletion: [1, 2, 3, 4, 5, 6, 7]

stats on RTMP stream

Hi, would this plugin work with RTMP streams as well?
cannot get it to work with clappr RTMP plugin...

improvements

• test load (it needs to reset)
• session time (first buffering is happening first than "PLAY", waiting PLAY_REQUESTED)
• always pass a copy of metrics
• test autoPlay
• write better doc (readme)
• dropped / fps for Flash ???
• test hls and dash
• Use skip/pick events instead of relying on states
• Implements the latency meter
• Adds buffersize (latency + buffersize + encoding_segmenting === "real" latency between generated video and user)
• adds tests
• write better documentation (clearly defining what is each metric)
• discuss startup metric
• check why there is a timeupdate before play (html5, check all the other)
• double-check buffering
• discuss the reactive event programing approach
• discuss if lastbitrate couldn't be an array [].push (with history)
• avg bitrate
• hurdle about other metrics, timers and extras.
• provide the minimum about extensibility (maybe let the user define what is startup)
• pauses and play are double counting??? (hls+html5?)
• double check buffering time | startup =/ (using network throttle)

PR new stats

After talking with @lucasrodcosta he asked me to post a PR here.
I worked a bit to ouput "latency" and "current buffer"
I'm not a dev so I do my best but I'm sure there are better ways to do it

current buffer
hls.on(Hls.Events.LEVEL_LOADED,function(event,data) {
var pos = video.currentTime;
var bufferLen = video.buffered.end(0) - pos;
console.log('CURRENT BUFFER : ' + bufferLen.toFixed(2) + ' seconds');
});

=> I detected an issue about current buffer in my code but I don't know yet how to fix it : when encoder is started if I stop it then restart it, value begins to be negative because of video.buffered.end(0) which is frozen to a very small value (0.0x)

latency (it needs EXT-X-PROGRAM-DATE-TIME header)
hls.on(Hls.Events.LEVEL_LOADED,function(event,data) {
var current = video.currentTime;
var frag = data.details.fragments[0].start;
var tps = current - frag;
var now = new Date();
var unixnow = Date.parse(now)/1000;
var tunix = Date.parse(data.details.fragments[0].rawProgramDateTime)/1000;
var latence = unixnow - tunix - tps;
console.log('LATENCY : ' + latence.toFixed(2) + ' seconds');
});

I made some tests and It works rather well.

Nico