Решение домашнего задания по мультимедиа 14-й школы разработчиков интерфейсов
- установка зависимостей -
yarn install - запуск - в файле src/videoInitialization.js установить корректные параметры тестового сервера с потоками и выполнить команду
npm start - сборка -
npm run build
Основной скрипт находится в файле src/index.js. Состояние каждого видео с его настройками хранится в объекте класса VideoModel. Все они помещены в объект state, экспортируемый в файле state.js. Также в state.js есть поле, отвечающее за текущее активное видео. Инициализация стримов с использованием библиотеки Hls описана в файле videoInitialization.js. Функции анимации открытия/закрытия помещены в файл animation.js.
Реализованы
- анимация открытия/закрытия как в приложении Photo Booth. Выполнено с помощью css трансформаций (scale, transition, transform-origin)
- фильтры яркости и контрастности в видео. Выполнено с помощью css фильтров.
- анализатор громкости звука в потоке открытой камеры. Выполнено с использованием ScriptProcessorNode. Индикатор сделан с использованием div элемента, динамически меняющего свои размеры (transform scale) и цвет в зависимости от общего уровня громкости аудио в видеопотоке.
Из мобильных устройств тестировалось на Android.