Как WebcamToy получает странные эффекты поверх видео с веб-камеры getUserMedia ()?

Question

Я знаю, как получить доступ к веб-камере с помощью getUserMedia () в Javascript.Тем не менее, я впечатлен всеми эффектами, которые были добавлены на webcamtoy.com, особенно такими, как «Верхнее зеркало», «Туннель», «Перемешать» и так далее.Похоже, что это не простые фильтры CSS [1].Впечатляет, что они работают «вживую» в браузере.

Интересно, кто-нибудь здесь знает, какая техника используется?... а если есть какие-нибудь сайты, которые объясняют, как это можно сделать?

[1] https://webrtc.github.io/samples/src/content/getusermedia/filter/

Answer 1

Я нашел способ сделать это.Идея состоит в том, чтобы настроить холст WebGL и использовать веб-камеру в качестве источника текстуры.Затем можно добавить странные эффекты, изменив фрагментный шейдер.

Я проверяю технику здесь: https://www.html5fun.com/webgl/webglswirl2.php