{"id":18270676,"url":"https://github.com/ruslanxdev/yandex-shri-2018-homework-3","last_synced_at":"2025-04-09T03:17:07.947Z","repository":{"id":143848845,"uuid":"125418127","full_name":"ruslanxdev/yandex-shri-2018-homework-3","owner":"ruslanxdev","description":"Домашнее задание #3 \"Мультимедиа\" в ШРИ Яндекса 2018.","archived":false,"fork":false,"pushed_at":"2018-03-21T21:56:56.000Z","size":304,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-02-14T21:35:39.662Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://ruslankhh.com/yandex-shri-2018-homework-3","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ruslanxdev.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-03-15T19:43:39.000Z","updated_at":"2018-04-07T21:50:32.000Z","dependencies_parsed_at":null,"dependency_job_id":"7b76615e-ed9a-4e27-9ccf-d0fde1c162bf","html_url":"https://github.com/ruslanxdev/yandex-shri-2018-homework-3","commit_stats":null,"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ruslanxdev%2Fyandex-shri-2018-homework-3","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ruslanxdev%2Fyandex-shri-2018-homework-3/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ruslanxdev%2Fyandex-shri-2018-homework-3/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ruslanxdev%2Fyandex-shri-2018-homework-3/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ruslanxdev","download_url":"https://codeload.github.com/ruslanxdev/yandex-shri-2018-homework-3/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247968379,"owners_count":21025823,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-05T11:38:48.223Z","updated_at":"2025-04-09T03:17:07.932Z","avatar_url":"https://github.com/ruslanxdev.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Домашнее задание \"Мультимедиа\"\n\nДомашнее задание #3 в ШРИ Яндекса 2018.\n\n## Задание\n\nСлайды про графические эффекты: https://mrsamo.github.io/shri-2018-multimedia-graphics/\u003cbr\u003e\nСлайды про аудио: https://mrsamo.github.io/shri-2018-multimedia-audio/\u003cbr\u003e\nСлайды про видео: https://mad-gooze.github.io/shri-2018-multimedia/\n\nВ домашнее задание по теме \"Мультимедиа\" мы предлагаем вам воспользоваться API, о которых вы узнали на лекции и сделать веб-приложение, которое визуализирует то, как робот видит окружающий мир (можно вдохновляться сценами из Терминатора https://www.youtube.com/watch?v=CZlEiD6Nmnc).\n\nИспользуйте API getUserMedia() для получения аудио и видео потока с веб-камеры и микрофона, и HTML/CSS/JS (на свой выбор) для наложения эффектов.\n\n### Основное\n\n- [x] фильтр для видео, чтобы сделать картинку похожей на видео с камеры терминатора (подумайте, как можно сделать цветокоррекцию)\n- [x] анимированный \"интерфейс\" терминатора\n- [x] эффект \"помех\" в сигнале (нужно сделать наложение помех на видео и, при желании, на интерфейс - для этого так же есть несколько способов)\n- [x] визуализация звукового сигнала - отображение уровня громкости (вам понадобится Web Audio API)\n\n### Дополнительное\n\n- [x] визуализация не только громкости звука, а и еще и звуковых частот, т.е. отображение спектрограммы в реальном времени\n- [ ] детектирование движения на видео (вам понадобится API Canvas getImageData для работы с пикселями изображения - для детектора движения нужно сравнивать текущий кадр с предыдущим, подумайте о том, как это сделать без серьезных проблем с производительностью).\n- [ ] Реализция какого-нибудь из эффектов на WebGL.\n- [ ] Творческое - придумайте какой-нибудь эффект самостоятельно и реализуйте его.\n\n### Требования\n\n- [x] Ваше приложение должно уверенно работать в последней версии Chrome и Firefox.\n- [x] Плюсом будет, если вы реализуете проверку требуемых фичей (т.е. graceful degradation), чтобы, если какая-то из технологий, которую вы используете не поддерживается браузером, приложение не ломалось.\n- [x] Мы будем проверять производительность - при работе ваше приложение должно иметь хороший FPS (не ниже 40 и не ниже 25 с детектором движения).\n\nВ readme опишите, какие эффекты вы реализовали, какие технологии вы для этого использовали, и почему вы выбрали именно их.\n\n## Выполнение задания\n\n- Сначала написал фильтры на CSS, потом на Сanvas-е. Можно посмотреть здесь: https://github.com/ruslankhh/yandex-shri-2018-homework-3/tree/v1.0.0.\n- Потом решил использовать [Pixi.js](https://github.com/pixijs/pixi.js). Так как в ней были нужные мне фильтры, и я давно хотел попробовать поработать с этой библиотекой.\n- Разбил приложение на компоненты.\n- Добавил анимированный интерфейс в виде показателя FPS, UserAgenta и случайного вывода функций из моего кода (из трёх).\n- Сделал помехи в виде случайных фильтров глитча и пикселизации.\n- Так как WebGL в Firefox выдаёт [ошибку с Pixi.js](https://github.com/pixijs/pixi.js/issues/3897) и не отображает видео, а в Яндекс.Браузере видео отображает, но без фильтров, поэтому сделал для них фильтры через HTML и CSS. В Chrome и Safari всё работает.\n- Если в Chrome не работает, проверьте ссылку — она должна быть в HTTPS: https://ruslankhh.com/yandex-shri-2018-homework-3\n- И соответственно поменял вывод данных в интерфейсе (в Chrome — это JS код, а в FF и Яндекс.Браузере — CSS).\n- Добавил визуализатор звука по примеру [Analyser](https://mrsamo.github.io/shri-2018-multimedia-audio/#web-audio-api-modules-analyser) из  лекции [\"Мультимедиа. Аудио. Синтез и разпознавание речи.\"](https://mrsamo.github.io/shri-2018-multimedia-audio) Александрa Завьяловa.\n- Решил сделать отслеживание лица человека на видео [tracking.js](https://github.com/eduardolundgren/tracking.js). Разобрался, но с ней сильно упал FPS, нужно оптимизировать всё приложение. Слишком много отдельных canvas отрисовывается. Можно посмотреть в ветке [feature/face-tracker](https://github.com/ruslankhh/yandex-shri-2018-homework-3/tree/feature/face-tracker).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fruslanxdev%2Fyandex-shri-2018-homework-3","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fruslanxdev%2Fyandex-shri-2018-homework-3","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fruslanxdev%2Fyandex-shri-2018-homework-3/lists"}