Находим границы на видео онлайн используя SVG-фильтры

В это примере продемонстрированы возможности фильтров svg-графики для выделения границ объектов по кадрам в реальном времени на видео-потоке. Смотрите ниже демо-пример. Выбрано очень динамичное видео с быстро меняющимися объектами. Видео онлайн транслируется с канала youtube. Здесь же можно посмотреть оригинальный (не обработанный видео-ролик). В завершение остается лишь привести коды фильтра с помощью которого получен эффект выделения контуров объектов на видео в реальном времени. Для начала подключаем стиль:

iframe.fx{
 filter: url("#edge");
 -webkit-filter: url("#edge");
}

А дальше нужен svg-код с фильтром:
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="0" height="0"> <filter id="edge"> <feConvolveMatrix order="3 3" preserveAlpha="true" kernelMatrix="-1 -1 -1 -1 8 -1 -1 -1 -1"/> </filter> </svg> Ну и, естественно, само подключение видео на страницу:
<iframe class="fx" width="100%" height="225" src="//www.youtube.com/embed/uBZpy7EyQwE? html5=1&controls=0&showinfo=0&autohide=0&iv_load_policy=3" frameborder="0" allowfullscreen></iframe>