Shaka-player: Add stats for nerds to UI (in the same way as youtube)

[avelad]

Is it possible add stats for nerds to UI?

Example of Youtube:

Right click:

Panel with stats:

[MilosRasic]

This would be great, especially if it could be independent of the UI component but still manageable from the UI.

We made a poor man's version for our CE device app so the info and the ability to observe it is definitely there:

Would also probably be a good contribution for someone looking to get into it but not in the nitty gritty of web playback and parsing the manifests.

[avelad]

In my app I have this:

[MilosRasic]

You win the stats measuring contest and I hope you won't mind if we copy shamelessly 😃

[ismena]

Ok, let's make sure we are talking about the same thing: you want your users to be able to see all that stuff? :)
We have a player.getStats() method that returns these stats.

We can create a UI element to show this if you'd like. It probably won't win the stat measuring contest against @avelad's app but it does have a lot of info ;)

@MilosRasic when you mention it being independent from the UI component, do you mean Shaka's UI build or something else? Our UI lib is the only way we can manipulate the player's UI, without it all the UI is done by the browser, and we don't really control that.

[avelad]

@ismena My panel is too much, I prefer something YouTube style for end users.

[MilosRasic]

Personally I don't want it for end users but others may have different ideas. Looks like something a lot of dev teams would need and everyone ends up re-implementing on their own. A common solution wouldn't hurt.

I'd like it to be independent of Shaka UI because someone may not be using it but may still want to trigger the stats panel some other way. For example, we have our own UI but trigger the stats panel using a query string parameter or a remote config feature flag.

[joeyparrish]

The only DOM manipulation is in the UI. We have tried to avoid messing with the DOM in the non-UI library. We can enhance the stats in getStats() and you can render them however you like if you want to use your own UI. It seems like it would just be a few rows of text.

I don't think it makes sense for us to do just the stats panel and not the rest, potentially conflicting with your UI in some way.

We can offer a UI element that just formats and displays data from getStats(), and apps can configure the UI to have it or not, depending on context. Want it for your end-users? Configure it to be on all the time. Only want it for dev? The turn it on in your debug builds or staging environment only.

Does that make sense?

[MarlonEngFront]

Se for possível adicionar algo parecido com a montagem que fiz, vai ficar muito bom, estou trabalhando com customização da UI do shaka-player e me deparei com esta necessidade para os developers, com relação ao método player.getStats(), gostaria de saber como ver ele em ação atravez de uma demo simples com html, carregando os arquivos necessarios, ex: player.js, shaka-player.ui.js,?
@ismena @joeyparrish

[ismena]

Hi @MarlonEngFront
I trusted the Google translator to translate your post from Portuguese, I hope I got it right :)

Yes, we can try to do something like that! Let me schedule it for the next release. We will also be happy to accept a PR for this if you're (or anybody) up for it.

[Marlon-Agile]

Seria de grande ajuda e disponibilizar algo parecido, e sua tradução do google esta perfeita.
com relação ao método player.getStats (), como posso ver ele retornando as stats no console do navegador ? quais arquivos preciso carregar no documento html ?
@ismena

[ismena]

On our demo page, run shakaDemoMain.player_.getStats(); in the debugger console.
Then expand the object.
You'll see something like this:

{
width: 720, height: 576, streamBandwidth: 944898, decodedFrames: 51, droppedFrames: 0, …}
bufferingTime: 0.6160001754760742
corruptedFrames: 0
decodedFrames: 51
drmTimeSeconds: NaN
droppedFrames: 0
estimatedBandwidth: 3827966.609388212
height: 576
licenseTime: NaN
liveLatency: NaN
loadLatency: 0.7950000762939453
manifestTimeSeconds: 0.24300003051757812
maxSegmentDuration: 4
pauseTime: 19.32200002670288
playTime: 1.940999984741211
stateHistory: (4) [{…}, {…}, {…}, {…}]
streamBandwidth: 944898
switchHistory: (2) [{…}, {…}]
width: 720
}

[MarlonEngFront]

@ismena quais arquivos devo carregar na <head></head> para poder retornar método player_.getStats(); em um exemple básico ? depois quero pegas as informnações deste objeto e mostrar um uma <div></div>
https://codepen.io/MarlonEngFront/pen/JjGbJzq

[theodab]

With Shaka Player set up automatically in that way, you can get the player from the video element. For your codepen, you could do something like:

const video = document.getElementById('video');
if (video && video.ui) { // Check if the UI has been set up, first.
  const player = video.ui.getControls().getPlayer();
  const stats = player.getStats();
  console.log(stats); // Or format this into DOM, etc.
}

This will only be accessible after Shaka Player is set up, so if you want to do this automatically you might want to listen for the shaka-ui-loaded event on document first.

[Marlon-Agile]

@theodab fiz como esta acima, mas retorna o objeto vazio no console, mesmo depois de executado o video, alguma sugestão de como trazer os valores;

https://codepen.io/MarlonEngFront/pen/JjGbJzq

[ismena]

@Marlon-Agile
Try running player.load() first and then requesting stats.
Your stats object is being created first and although it's logged after a few seconds, it's still the same object.

const stats = player.getStats(); // This is where you requested the stats
    console.log(
      setTimeout(function(){
          console.log(stats); // This is where you logged them, but it's still the same stats from where you created "const stats," NOT the stats after 5 seconds.
      },5500));

Try something like this (pseudocode):

const player = video.ui.getControls().getPlayer();
// now wait!
waitFiveSeconds(); // <-- this is not a real function
// Now log
console.log(player.getStats());

Does it make sense?

[MarlonEngFront]

@ismena fez sentido sim, funcionou. agora o proximo passo é mostrar essas informações no html em uma <div></div> e escutar o video e ficar mostrando as alterações das informações. thanks!!!