Как добавить CSS-фильтры на основе React в Twilio Video

Что это? Вы хотите добавить фильтры в своё видео-приложение, которые не несут никакой практической пользы, кроме как выглядеть круто? Узнайте, как легко добавлять CSS-фильтры к элементам на вашей странице.

В недавнем посте мы рассмотрели, как интегрировать React.js в существующее приложение Twilio Video. Давайте продолжим с того места, где остановились, и добавим видеофильтры в виде нового компонента React.

Начните с клонирования этого репозитория и перехода в его директорию:

CSS-фильтры очень просты в использовании. Это просто CSS-правила, которые мы применим к видеоблокам через CSS-классы. Мы возьмём за основу этот отличный пример.

Начните с открытия таблицы стилей приложения, расположенной по пути `public/style.css`, и добавьте в конец следующие классы:

Этот набор фильтров изменит видео на сепию, инвертированное, чёрно-белое, перенасыщенное и размытое. Вы можете проявить креативность и добавить свои собственные фильтры в список. В примере показано, как можно комбинировать фильтры.

Далее мы добавим два новых компонента React для управления применением фильтров.

Компонент `Filter` будет представлять собой отдельный фильтр в виде элемента `li`, чьё значение `name` передаётся через `prop`, а также `filterClickCallback` для обработки выбора фильтра. Компонент `FilterList` будет создавать и содержать все элементы `Filter` внутри `ul`.

Откройте код React по пути `public/conversationcontainer.jsx` и добавьте компонент `FilterList` в конец:

Метод `render` проходит по списку свойств фильтров, переданных в компонент, и создаёт новый `Filter` для каждого из них.

Теперь добавьте компонент `Filter` в конец.

Добавьте конструктор в существующий компонент `ConversationContainer` для установки начального списка фильтров. Мы также привязываем метод `filterClickCallback`, который напишем далее.

Сразу после конструктора добавьте метод `filterClickCallback`, который будет обновлять состояние активного фильтра:

Затем измените метод `render` компонента `ConversationContainer`, чтобы включить `FilterList` и CSS-классы фильтров из состояния:

Запустите сервер снова и откройте http://localhost:3000 в двух окнах браузера. Подключите разговор и начните нажимать на кнопки фильтров. Здесь вы можете попробовать сделать страшное лицо монстра.

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

Я решил использовать одну из моих любимых библиотек — Socket.io. Это библиотека WebSocket с простым API. Если вы ещё не работали с Socket.io, ознакомьтесь с постом моего друга Сэма.

Установите Socket.io, выполнив команду:

Теперь настроим сервер для использования Socket.io. Откройте `index.js` и внесите следующие изменения:

Мы импортировали библиотеку, подключили её к нашему серверу Express и добавили слушатель для пользовательского события `filter`, которое клиенты будут отправлять при выборе нового фильтра. Пора подключить клиентскую часть.

Вернитесь в `public/conversationcontainer.jsx` и импортируйте клиентскую библиотеку:

Внутри метода `componentDidMount` инициализируйте клиент Socket.io и слушайте событие `filter` для обновления состояния:

Наконец, отправляйте это же событие в начале метода `filterClickCallback`:

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

CSS-фильтры — это быстрый и простой способ добавить немного веселья и кастомизации в ваши веб-приложения. Самое лучшее в том, что эти CSS-фильтры можно применять ко всему: от изображений до iFrame, или, как мы видели в этом посте, к видео!

С помощью React мы смогли создать набор переиспользуемых компонентов, чтобы инкапсулировать UI фильтров в декларативные элементы, что сократило сложность и объём кода интерфейса. Эти компоненты будут уместны в любом интерфейсе — от самых сложных до того, что мы использовали для добавления немного веселья и блеска.

И наконец, добавьте несколько строк Socket.io для синхронизации фильтров между клиентами, и вы создадите простой способ делиться весельем с друзьями по видеоконференции.

Попробуйте добавить свои собственные фильтры и обязательно поделитесь тем, что у вас получилось.