Чтобы запустить надо прописать в терминале:
npm install
npm start
И перейти по адресу: http://localhost:3102/dist/
На одной странице выполнены сразу 3 задания. Проект отлаживал на Android и десктопе.
Весь используемый на странице JS-код лежит в файле main.js. Стили в файле main.scss.
Чтобы сбилдить новый dist после каких-то изменений:
npm run build
Версия nodeJS: v10.15.2
В этом задании мы будем делать страницу для видеонаблюдения за нарушающими режим самоизоляции.
На странице можно смотреть HLS видеопотоки с камер, переключать камеры, накладывать риал-таймовые фильтры на видео и следить за активностью на улицах.
Для разработки вы можете использовать тестовые видео-потоки (о том, как их развернуть, можно почитать тут).
Страница "Видеонаблюдение" должна работать в актуальной версии Chrome на десктопе и на Android/iOS (достаточно одной платформы – укажите в описании ДЗ, на какой ОС вы отлаживались).
Для проигрывания HLS-потока на платформах без нативной поддержки HLS воспользуйтесь библиотекой hls.js.
-
Интерфейс страницы "Видеонаблюдение":
На странице должна находиться сетка из 4-ёх видео-превью. Клик по превью разворачивает соответствующее видео на всю страницу.
Анимацию разворачивания видео можно сделать по аналогии с маковским приложением Photo Booth (или посмотреть видео по ссылке.
Когда видео раскрыто на всю страницу, в интерфейсе нужно предусмотреть кнопку "Все камеры", которая позволяет вернуться назад.
Анимация переключения видео должна работать без тормозов (без просадки FPS на странице)
-
Фильтры для видео:
Видео-поток с камеры может быть плохого качества (размытый, засвеченный или затемненный) - добавьте на экран просмотра видео возможность регулировать его яркость и контрастность.
Для контролов настройки яркости/контрастности можно просто использовать
input(реализация контрола не будет оцениваться дополнительно). -
Анализатор звука:
Реализуйте анализатор громкости звука в потоке из открытой камеры (в виде столбчатой диаграммы).
Реализуйте детектор движения в видео-потоке (нарисуйте поверх видео прямоугольник, ограничивающий область, в которой происходит движение).
Работа анализаторов не должна давать серьезных просадок FPS.
Укажите в тикете ссылку на репозиторий, отчет по выполненным пунктам задания и способу их реализации, и инструкцию для запуска.