#javascript #html5-video #web-worker
#javascript #html5-видео #веб-работник
Вопрос:
Я пытаюсь применить фильтры к видео Full-hd в javascript, используя манипуляции с пикселями.
Я создал демонстрацию, используя скрытые холсты, веб-рабочие и переносимые:
В результате при использовании web workers вкладка браузера вылетает за короткое время, а видео имеет очень низкую производительность (~ 5 кадров в секунду).
Если вы выберете «Веб-работники: 0», ww не используются, производительность выше (~ 15 кадров в секунду), и вкладка не вылетает.
Что я могу с этим поделать? Цель состоит в том, чтобы получить хорошую частоту кадров (~ 30 кадров в секунду), избегая фильтров SVG или CSS.
Спасибо.
Комментарии:
1. Выполняйте пиксельные манипуляции с изображениями меньшего размера или используйте максимальную глобальную композитную операцию вместо пиксельных манипуляций. Не зная, какие эффекты вы хотите, трудно помочь вам намного больше.
2. В демонстрации используются оттенки серого, но «фильтры» должны быть любыми, например, размытие, цветность, регулировка канала rgb, водяные знаки и все, что вы можете сделать, манипулируя пикселями.
3. @Killy Вам нужно сузить проблему. Вы не можете ожидать, что кто-то будет копаться в вашем проекте и оценивать вашу производительность. Но в любом случае, я настоятельно рекомендую вам использовать WebGL. Фреймворк PixiJS имеет хорошие демонстрации, показывающие фильтры с высоким FPS: goodboydigital.com/pixijs/examples/15/indexAll.html
4. Оттенки серого можно выполнить с помощью gCO, размытие можно выполнить с помощью drawImage, цветность должна быть выполнена на меньших изображениях, канал rgb => gCO. И браузеры начинают изначально поддерживать ctx.filter
5. О, и если все, что вы хотите, это отобразить отфильтрованное видео, есть также возможность CSS filter, применимая непосредственно к элементу video.
Ответ №1:
Перебирать все пиксели и преобразовывать их на процессоре — не очень хорошая идея. Для этого и нужны графические процессоры. В прошлом это означало бы, что вам нужно использовать что-то неприятное, например Flash.
К счастью, появляются новые технологии, и графическое ускорение доступно в большинстве популярных браузеров. Это называется WebGL и позволяет использовать графическую карту для этих целей.
Если вы не хотите узнать все внутренние секреты WebGL (это довольно сложно), я советую вам использовать фреймворк PixiJS, который предназначен для 2D-анимации.
Вы можете увидеть их демонстрацию фильтрации здесь: http://www.goodboydigital.com/pixijs/examples/15/indexAll.html
Больше демонстраций и примеров здесь: https://pixijs.github.io/examples/#/basics/basic.js
Комментарии:
1. спасибо всем, я отмечаю это как решение, но все ваши комментарии полезны 🙂
2. API Canvas2d также передается на графический процессор. Единственное, чего следует избегать, это getImageData / putImageData
3. @Kaiido Ну, совершенно неважно, как обрабатывается статическое изображение (GPU / CPU). Что нам здесь нужно, так это какая-то анимация.
4. Я хочу сказать, что все операции компоновки обрабатываются графическим процессором, drawImage обрабатывается графическим процессором, а filter при поддержке обрабатывается графическим процессором. Те, которые не являются getImageData и putImageData . И даже там вы можете быть достаточно умны, чтобы выполнять манипуляции с пикселями на уменьшенных кадрах, а затем использовать gCO, чтобы применить его к обычному масштабу.
5. И, возможно, я не получил вашу ссылку на статическое изображение. OP фильтрует видео (набор статических изображений? ) и если я не ошибаюсь, поскольку я мало знаю о WebGL, это означает, что ему придется создавать новую текстуру каждый кадр. Не уверен, что создание текстуры выполняется на GPU.