Framerate and resolution

[pquarme]

How do i cap the framerate and change the resolution? I'm currently using css to change the canvas width and height(which works).

[mbebenita]

The code is probably using requestAnimationFrame (rAF) to play back video frames as quickly as possible. You should be able to use setInterval or rAF with manual frame rate throttling.

[pquarme]

Thank you for quick response. To be honest, i think i'm using the wrong approach. I'm following the example in "broadway/player/" folder. I've included all the js files in my project as well. What is a better approach, I've never worked with canvas before.

[soliton4]

Player will give you the ability to decode h264 nal units and have a function called when ever a frame is being decoded.

have a look at https://github.com/mbebenita/Broadway/blob/master/Player/Player.js#L103

you see that you can pass render to false and use your own implementation of rendering to canvas. you can simply copy paste the code in player and modify it to your needs.

i recommend buffering decoded frames and for long video streams maybe pause decoding when a certain amount of decoded frames exist.

the decoded frames you can then display at the frame rate of your choice

[pquarme]

Thank you, I'll spend sometime using your approach and see how it works out.

[pquarme]

var p = new Player({
          useWorker: true,
          workerFile: "js/libs/broadway/Decoder.js", // give path to Decoder.js
          webgl: "auto" // defaults to "auto"
        });

p.decode();

p.canvas;

What do i pass into p.decode() ? Also how do I attach p.canvas to the dom and when does onPictureDecoded() come into play?

[pquarme]

Any idea on how to optimize framerate on mobile devices?

[soliton4]

it completely depends on the asm.js implementation of your browser. if you try running the demo on internet explorer for example you can actually crush it ;)

[pquarme]

Haha thats good to know. Is there any chance this could be production viable?

[krillr]

For what it's worth, I've tested this on several versions of Android and iOS with great success. Now, I just need to get audio working...

[pquarme]

That's great. How did you set it up? I was also thinking about how to integrate audio but wanted to at least get video working first.

[krillr]

I modified the Broadway object to convert all

[pquarme]

Does the resolution of the video impact performance and what resolution did you use for your tests?

[krillr]

It does, but not /hugely/. I'm using 300x250 videos, so nothing big. I'm seeing 60-70fps max on most hardware I've tested with.

[pquarme]

Nice, that's really good. Thank you.

[pquarme]

@krillr Have you made any progress on implementing audio?

[zhubinsheng]

Only use the decoder function, then render yourself on canvas at the speed you want, and add buffer to play with the same timestamp