ДЗ - «Мультимедиа»

Запуск

npm i
gulp

Реализована сетка из 4 видео, на десктопе видео выстраивается по 2 в ряд, при сужении экрана (на мобильной версии) видео идут друг за другом. Клик по видео разворачивает видео, для того чтобы выйти из полноэкранного режима необходимо так же кликнуть по видео. Анимация сделана с помощью сss свойств transform(translate, scale), что позволяет добиться большей производительности.
Каждому видео добавлены два input позволяющие менять яркость и контрастность видео. Реализовано с помощью css свойства filter.
Анализатор звука сделан при помощи web audio api используя AnalyserNode, отрисовка шкалы звука реализована на canvas.

Репозиторий с исходными видео не менялся, запускался так же как указано в задании. https://github.com/mad-gooze/shri-2018-2-multimedia-homework/tree/master/streams

Собранный проект находится в папке dist. Ссылка на страницу: https://megoos.github.io/shri-2/dist/video.html

В этом репозитории находятся выполненное ДЗ - «Работа с сенсорным пользовательским вводом»

npm i
gulp

Для автоматизации разработки и билда был выбран gulp и необходимые модули для удобства.

Верстка была взята из первого задания, с некоторыми изменениями. В данных оставлена одна карточка с камерой, на ее базе делалось все задание.
Обработка pointer-events находится в файле pointerEvents.js
Реализовано перемещение изображения по оси X и Y, перемещение возможно только если масштаб больше 1.
Pinch позволяет приблизить и отдалить картинку.
Поворот изменяет яркость картинки.

К сожалению не было возможности проверить на ios, на android все ок.

Собранный проект находится в папке dist.