playhardgopro/shri-2020-multimedia-homework

Домашнее задание к лекции ШРИ - мультимедиа

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

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

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

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

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

---

В конце пунктов добавил свои комментарии. Отлаживался на Android, все работало:) В начале скрипта переменная ip - нужно ввести свой адрес, чтобы завелось и можно было открыть со смартфона.

Пункты, которые нужно реализовать

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

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

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

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

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

   ---

   Вместо кнопки все камеры сделал крестик для закрытия

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

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

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

   ---

   Яркость и контраст добавил, правда не знаю, какие значения лучше поставить min - max

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

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

   ---

   Вроде работает. Были проблемы с созданием медиа-источника при переходе от видео к видео. Решил переходом к глобальным переменным.

Бонусное задание

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

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

Формат сдачи

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