Как получить хорошую частоту кадров с помощью javascript?

-1

Я пытаюсь применить фильтры к full-hd видео в javascript, используя манипуляции с пикселями.Как получить хорошую частоту кадров с помощью javascript?

Я создал демо с помощью скрытых холсты, веб-рабочих и transferables:

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

Результатом является то, что с помощью Web Workers вкладок происходит сбой браузера в течение короткого времени, а видео имеет очень низкие характеристики (~ 5к).

Если вы выберете «Веб-рабочие: 0», ww не будут использоваться, производительность будет лучше (~ 15 кадров в секунду), и вкладка не сработает.

Что я могу сделать? Цель состоит в том, чтобы получить хорошую частоту кадров (~ 30 кадров в секунду), избегая фильтров SVG или CSS.

Спасибо.

источник

2016-10-04 Killy

ли манипуляции пиксела на небольших изображений, или использовать при максимальном globalCompositeOperation вместо манипуляций пикселей. Не зная, какие эффекты вы хотите, вам гораздо труднее помочь. – Kaiido

Демонстрация использует оттенки серого, но «фильтры» должны быть любыми, например. размытие, цветной ключ, регулирование канала rgb, водяной знак и все, что вы можете делать с манипуляциями с пикселями. – Killy

@ Killy Вам нужно сузить проблему. Вы не можете рассчитывать на то, что кто-то прорвет ваш проект и сравним ваши результаты. Но в любом случае я настоятельно рекомендую использовать WebGL. Рамка PixiJS имеет приятные демонстрации, показывающие фильтры с высоким FPS: http://www.goodboydigital.com/pixijs/examples/15/indexAll.html –

Проникновение через все пиксели и преобразование их в ЦП не является хорошей идеей. Для этого нужны графические процессоры. В прошлом это означало бы, что вы должны использовать что-то противное, как Flash.

К счастью, появляются новые технологии, а в большинстве популярных браузеров доступно графическое ускорение. Он называется WebGL, и он позволяет использовать графическую карту для этих вещей.

Если вы не хотите изучать все внутренние секреты WebGL (это довольно сложно), я советую вам использовать инфраструктуру PixiJS, предназначенную для 2D-анимации.

Вы можете увидеть их фильтрации демо здесь: http://www.goodboydigital.com/pixijs/examples/15/indexAll.html

Другие демки и примеры здесь: https://pixijs.github.io/examples/#/basics/basic.js

источник

2016-10-04 13:46:10

Благодарю вас всех, я отмечаю это как решение, но ваши комментарии полезны :) – Killy

API Canvas2d также переносит на GPU. Единственное, чего следует избегать, это getImageData/putImageData – Kaiido

@ Kaiido Ну, совершенно неважно, как обрабатывается статическое изображение (GPU/CPU). Здесь нам нужна какая-то анимация. –

Как получить хорошую частоту кадров с помощью javascript?

ответ

Смежные вопросы