artemloiko / shri-2020-multimedia-homework

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

Запуск проекта

npm i
npm start

Откройте браузер на странице http://localhost:3102/ Весь написанный мною JS находится в index.html внизу страницы Проверял на телефоне Android 6.0.1, Chrome 81

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

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

   Анимация открытия сделан с помощью transform: scale;
   При клике на видео открывается на весь экран, где доступны инпуты фильтров, кнопка mute и close. На мобайле просто затемняется фон и появляются все кнопки и инпуты.

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

   Выполнены с помощью css filter.
   Доступы при открыии на полный экран.
   Реализованы через input type=range, инициализация находится в index.html внизу страницы

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

   Нужно открыть видео на весь экран с помощью клика на видео.
   Анализатор звука отображется при включенном звуке в видео в правом нижнем углу. Пока оно muted он скрыт.
   За его инициализацию и отрисовку отвечает функция connectAnalyser. Отрисовывается с помощью canvas.