Доброго времени суток, уважаемые читатели!
Сегодня я хотел бы поделиться с вами небольшим веб приложением — myStreamer, которое буквально собиралось на коленках за 2 ночи.
Немного предыстории:
Не секрет, что у нас тут “на” Украине творится, назовем это условно, дабы не обидеть стороны и остаться аполитичным, “массовые волнения народа, по поводу происходящих в стране событий”. И вот спустя два, с небольшим, месяца после начала этого действа ко мне в Skype постучался друг (он же в последствии и идейный вдохновитель первой стадии проекта) Avicorn (человек сугубо суровый и любящий порядок, собственно это и стало первопричиной идеи). Выразив свою обеспокоенностью отсутствием времени искать и собирать видео потоки новостных каналов, а так же постоянно их обновлять (youtube заставляет, как мы поняли запускать новые сессии вещания после каждого перерыва в трансляция), он намекнул, что не плохо бы было собрать с миру по нитке на одной страничке и куда-нибудь (это выяснилось уже позже, оказывается плеерам нужны “домены” и localhost им не нравится) выложить, чтобы он мог в свободную минуту предаться созерцанию происходящего действа. Одни каналы крутят постоянно новости, другие транслируют “стримеров” с полей, третьи аналитику толкают и открывать много страниц для обычного человека весьма затруднительно, поэтому, хоть какой то, но порядок в виде «все на одной странице» — весьма и весьма доставляет, а если еще кто-то озаботится обновлением ссылок на потоки, то будет совершенно замечательно.
И вот вооружившись notepad.exe как лучшим оружием “пролетариата”, былых студенческих дней, за 10 минут мы родили страницу с 9тью “каналами” (плеерами трансляций) и боковой полосой в виде Twitter Widget. И собственно на этом бы все и кончилось, так как “клиент” доволен и информация доходит. Но на сцене появился второй товаришь kepo4ka, и утянул страничку на lepra.ru, где она моментально превратилась в github кооператив с благим лозунгом: как следить за майданом! Спустя уже пару часов мы стали находить следы вещания в тырнетах в частности вот: klichko.org/stream, onlinemaidan.com или watcher.com.ua/2014/01/25/yak-podyvytys-vsi-onlayn-translyatsiyi-z-maydanu-ta-hrushevskoho-v-odnomu-mistsi. (надо отдать должное второй ссылке, там человек потрудился на славу в плане скинига, остальные две не заморачиливались вовсе).
Наблюдая такое “откровение”, мы напряглись и родили небольшой сервис в виде html5 приложения. Итак, прошу “любить” и “жаловать” нашу поделку my-streamer.com
Суть сервиса заключается в предоставлении возможность собирать стрим-виджеты в одном месте (искушенный читатель уже наверно догадался, что можно собирать все что угодно, так как это просто набор контейнеров для HTML кода, который потом отображается в упорядоченном виде). Ничего сверх сложного или наукоемкого этот сервис в себе не кроет, но тем не менее позволяет организованно (на сегодня в рамках одной коллекции) хранить и наблюдать видео (и другую меди). Своего рода, небольшая доска, где можно закрепить понравившийся материал. Хранилище ваших стримов сугубо локальное дело, используется LocalStorage и Cookies — как план Б.
О технологиях:
Хотелось бы отдельно акцентировать внимание, что использовался, модный нынче, AngularJS, MVC фреймверк, прекрасно позволяющий реализовывать SPA архитектуру. Достаточно быстро удалось решить задачи локализации (JSON файлы, которые динамически подгружаются по мере надобности), работу с локальным хранилищем и “печеньками”. Разделить и реализовать логику в “сервисов” и собрать их в нужном месте по желанию. Как уже много раз говорилось, но все еще актуально: механизм injections в AngularJS вместе с two-way-data-binding — это сродни магии, понятно, удобно и быстро. Еще быстрее прототипирование пошло после подключения Twitter Bootstrap, за что им отдельное огромное спасибо. Может быть это и не самый отличный в мире CSS/JS фреймверк, но задачи прототипирования и визуализации на нем решать можно и нужно!
Серверная задача решалась просто. Мы ориентировались только на HTML5 и пару строчек php для создания отдельных “комнат”. Но со временем надеемся развить идею до списков, их обмена, организации, различных лейаутов, хранения, экспорта/импорта, виджетов и т.п. Но уже сейчас этим можно пользоваться как небольшим инструментом для организации личного пространства.
Вместо заключения:
Прошло уже достаточно много времени с первых упоминаний о HTML5, но, лично для себя, я только сейчас начал полностью осознавать весь потенциал, который мы получаем в свои руки. В целом тут не стоит больше разводить демагогию, а просто по человечески порадоваться этому зоопарку технологий, которые можно и нужно использовать в своих проектах.
Авторы (я и упомянутые выше лица) выражаем свое глубокое сочувствие жертвам и их родственикам и близким текущего положения дел “на” Украине с обеих сторон (не важно кто ты, главное — что ты человек) и все еще надеемся на мирное решение всей этой ситуации в целом. (просьба не поднимать политические темы в комментариях ни в каком виде, мы все уже от этого порядком устали, да и речь идет о IT, надеюсь на ваше понимание).
Для желающих наблюдать информационную картину Украины мы создали 2 комнаты:
my-streamer.com/?mode=ukraine — основные медиа-потоки, освещающие события на майдане
my-streamer.com/?mode=ukraine.regions — более расширенный вариант первой комнаты
Критика, замечания и предложения категорически приветствуются и ожидаются. Комментарии, личка или почта admin@my-streamer.com
Автор: leximus
