CODEWITHSUNDEEP
javascripthtml5-videoweb-worker
Killy
Killy

Reputation: 330

How to obtain good framerate using javascript?

I'm trying to apply filters to full-hd videos in javascript using pixel manipulation.

I created a demo using hidden canvases, web workers and transferables:

http://lab.jure.it/ww/ww.html

The result is that using web workers the browser's tab crashes in a short time, and the video has very low performances (~5fps).

If you select "Web workers: 0" ww are not used, the performance is better (~15fps) and the tab doesn't crash.

What can i do about it? The goal is to obtain a good framerate (~30fps) avoiding SVG or CSS filters.

Thanks.

Upvotes: 1

Views: 77

Answers (1)

Tomáš Zato
Tomáš Zato

Reputation: 53255

Looping through all pixels and converting them on CPU is not a good idea. That's what GPUs are for. In past, that would mean you have to use something nasty, like Flash.

Fortunately, new technologies are emerging and graphic acceleration is available in most popular browsers. It's called WebGL and it allows you to make use of graphic card for these things.

Unless you want to learn all the internal secrets of WebGL (it's quite complicated), I advise you to use PixiJS framework, which is designed for 2D animation.

You can see their filtering demo here: http://www.goodboydigital.com/pixijs/examples/15/indexAll.html

More demos and examples are here: https://pixijs.github.io/examples/#/basics/basic.js

Upvotes: 2

Related Questions