Photo Booth, как фон эффект в JS

Question

Я ищу для этого конкретного эффекта, как зеленый экран, но без зеленого экрана: P

Итак, вы установили камеру в фиксированном месте, то вы берете одну фотографии это будет «зеленый экран», поэтому вам это не понадобится.

Любой плагин, простой способ сделать это с помощью холста/webgl?

Seriously.js действительно хорошо, но работать только с зеленым фоном или фиксированного цвета

Спасибо!

Answer 1

Просто проверьте каждый пиксель на изображении «зеленого экрана», и если они равны некоторым пороговым значениям, сделайте их прозрачными или установите их в любое удобное для вас время.

В зависимости от разрешения изображения, которое вы хотите обработать, использование обычного холста (2D), вероятно, будет слишком медленным для этого. Если вы хотите обработать видеоконтент в режиме реального времени, вам нужно будет использовать подход webgl с помощью простого glsl-шейдера.

Я не знаю, какие библиотеки делают это за вас. Использование подхода холста должно быть довольно простым, с использованием webgl вам нужно будет изучить некоторые webgl, используя фреймбуферы, текстуры, рендеринг базовой геометрии (такая библиотека, как threejs, может обрабатывать вышеупомянутые), а также некоторый базовый glsl.