В этом задании мы будем делать страницу для видеонаблюдения за нарушающими режим самоизоляции.

На странице можно смотреть HLS видеопотоки с камер, переключать камеры, накладывать риал-таймовые фильтры на видео и следить за активностью на улицах.

Для разработки вы можете использовать тестовые видео-потоки (о том, как их развернуть, можно почитать тут).

Страница "Видеонаблюдение" должна работать в актуальной версии Chrome на десктопе и на Android/iOS (достаточно одной платформы – укажите в описании ДЗ, на какой ОС вы отлаживались).

Для проигрывания HLS-потока на платформах без нативной поддержки HLS воспользуйтесь библиотекой hls.js.

1. Интерфейс страницы "Видеонаблюдение":

   На странице должна находиться сетка из 4-ёх видео-превью. Клик по превью разворачивает соответствующее видео на всю страницу.

   Анимацию разворачивания видео можно сделать по аналогии с маковским приложением Photo Booth (или посмотреть видео по ссылке.

   Когда видео раскрыто на всю страницу, в интерфейсе нужно предусмотреть кнопку "Все камеры", которая позволяет вернуться назад.

   Анимация переключения видео должна работать без тормозов (без просадки FPS на странице)

2. Фильтры для видео:

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

   Для контролов настройки яркости/контрастности можно просто использовать input (реализация контрола не будет оцениваться дополнительно).

3. Анализатор звука:

   Реализуйте анализатор громкости звука в потоке из открытой камеры (в виде столбчатой диаграммы).

Реализуйте детектор движения в видео-потоке (нарисуйте поверх видео прямоугольник, ограничивающий область, в которой происходит движение).

Работа анализаторов не должна давать серьезных просадок FPS.

Укажите в тикете ссылку на репозиторий, отчет по выполненным пунктам задания и способу их реализации, и инструкцию для запуска.