myStreamer

Доброго времени суток, уважаемые читатели!

Сегодня я хотел бы поделиться с вами небольшим веб приложением — myStreamer, которое буквально собиралось на коленках за 2 ночи.

Немного предыстории:

Не секрет, что у нас тут “на” Украине творится, назовем это условно, дабы не обидеть стороны и остаться аполитичным, “массовые волнения народа, по поводу происходящих в стране событий”. И вот спустя два, с небольшим, месяца после начала этого действа ко мне в Skype постучался друг (он же в последствии и идейный вдохновитель первой стадии проекта) Avicorn (человек сугубо суровый и любящий порядок, собственно это и стало первопричиной идеи). Выразив свою обеспокоенностью отсутствием времени искать и собирать видео потоки новостных каналов, а так же постоянно их обновлять (youtube заставляет, как мы поняли запускать новые сессии вещания после каждого перерыва в трансляция), он намекнул, что не плохо бы было собрать с миру по нитке на одной страничке и куда-нибудь (это выяснилось уже позже, оказывается плеерам нужны “домены” и localhost им не нравится) выложить, чтобы он мог в свободную минуту предаться созерцанию происходящего действа. Одни каналы крутят постоянно новости, другие транслируют “стримеров” с полей, третьи аналитику толкают и открывать много страниц для обычного человека весьма затруднительно, поэтому, хоть какой то, но порядок в виде «все на одной странице» — весьма и весьма доставляет, а если еще кто-то озаботится обновлением ссылок на потоки, то будет совершенно замечательно.

И вот вооружившись notepad.exe как лучшим оружием “пролетариата”, былых студенческих дней, за 10 минут мы родили страницу с 9тью “каналами” (плеерами трансляций) и боковой полосой в виде Twitter Widget. И собственно на этом бы все и кончилось, так как “клиент” доволен и информация доходит. Но на сцене появился второй товаришь kepo4ka, и утянул страничку на lepra.ru, где она моментально превратилась в github кооператив с благим лозунгом: как следить за майданом! Спустя уже пару часов мы стали находить следы вещания в тырнетах в частности вот: klichko.org/stream ^[1], onlinemaidan.com ^[2] или watcher.com.ua/2014/01/25/yak-podyvytys-vsi-onlayn-translyatsiyi-z-maydanu-ta-hrushevskoho-v-odnomu-mistsi ^[3]. (надо отдать должное второй ссылке, там человек потрудился на славу в плане скинига, остальные две не заморачиливались вовсе).

Наблюдая такое “откровение”, мы напряглись и родили небольшой сервис в виде html5 приложения. Итак, прошу “любить” и “жаловать” нашу поделку my-streamer.com ^[4]

Суть сервиса заключается в предоставлении возможность собирать стрим-виджеты в одном месте (искушенный читатель уже наверно догадался, что можно собирать все что угодно, так как это просто набор контейнеров для HTML кода, который потом отображается в упорядоченном виде). Ничего сверх сложного или наукоемкого этот сервис в себе не кроет, но тем не менее позволяет организованно (на сегодня в рамках одной коллекции) хранить и наблюдать видео (и другую меди). Своего рода, небольшая доска, где можно закрепить понравившийся материал. Хранилище ваших стримов сугубо локальное дело, используется LocalStorage ^[5] и Cookies ^[6] — как план Б.

О технологиях:

Хотелось бы отдельно акцентировать внимание, что использовался, модный нынче, AngularJS ^[7], MVC ^[8] фреймверк, прекрасно позволяющий реализовывать SPA ^[9] архитектуру. Достаточно быстро удалось решить задачи локализации (JSON файлы, которые динамически подгружаются по мере надобности), работу с локальным хранилищем ^[5] и “печеньками ^[6]”. Разделить и реализовать логику в “сервисов” и собрать их в нужном месте по желанию. Как уже много раз говорилось, но все еще актуально: механизм injections в AngularJS вместе с two-way-data-binding — это сродни магии, понятно, удобно и быстро. Еще быстрее прототипирование пошло после подключения Twitter Bootstrap ^[10], за что им отдельное огромное спасибо. Может быть это и не самый отличный в мире CSS/JS фреймверк, но задачи прототипирования и визуализации на нем решать можно и нужно!

Серверная задача решалась просто. Мы ориентировались только на HTML5 ^[11] и пару строчек php для создания отдельных “комнат”. Но со временем надеемся развить идею до списков, их обмена, организации, различных лейаутов, хранения, экспорта/импорта, виджетов и т.п. Но уже сейчас этим можно пользоваться как небольшим инструментом для организации личного пространства.

Вместо заключения:

Прошло уже достаточно много времени с первых упоминаний о HTML5 ^[11], но, лично для себя, я только сейчас начал полностью осознавать весь потенциал, который мы получаем в свои руки. В целом тут не стоит больше разводить демагогию, а просто по человечески порадоваться этому зоопарку технологий, которые можно и нужно использовать в своих проектах.

Авторы (я и упомянутые выше лица) выражаем свое глубокое сочувствие жертвам и их родственикам и близким текущего положения дел “на” Украине с обеих сторон (не важно кто ты, главное — что ты человек) и все еще надеемся на мирное решение всей этой ситуации в целом. (просьба не поднимать политические темы в комментариях ни в каком виде, мы все уже от этого порядком устали, да и речь идет о IT, надеюсь на ваше понимание).

Для желающих наблюдать информационную картину Украины мы создали 2 комнаты:

my-streamer.com/?mode=ukraine ^[12] — основные медиа-потоки, освещающие события на майдане
my-streamer.com/?mode=ukraine.regions ^[13] — более расширенный вариант первой комнаты

Критика, замечания и предложения категорически приветствуются и ожидаются. Комментарии, личка или почта admin@my-streamer.com ^[14]

Автор: leximus

Источник ^[15]