Сочи.Камера: особенности создания проекта вообще, совсем, полностью с нуля, без стандартов и уже реализованных примеров

    Сочи.Камера — сайт с трансляцией стримов с более 300 веб-камер, установленных в Сочи и окрестностях. Сайт и весь сервис некоммерческий, создан и поддерживается на собственные средства местным интернет-провайдером «Бизнес-Связь», уже почти 10 лет. В этом посте мы расскажем, как кодили с абсолютного нуля; про битву с YouTube (мы победили); почему бесплатное ПО – это плохо, а бесплатный видеостриминговый сервис — хорошо. Возможно, в будущем, когда к нам обратятся с очередным предложением – написать за 100-200 тыс. руб. такой же сервис, как Сочи.Камера, мы вместо тысячи слов подарим рафаэллу кинем ссылку на этот пост, чтобы всем все сразу стало понятно.

    Первая версия: содранный дизайн с кусками чужого кода

    Наш проект сделан практически с нуля, подобных сервисов, образцов для подражания или шаблонов не было. Всё, что мы делали, приходилось делать самим: от переписывания глючных модулей из open source библиотек до изобретения новых способов крепления камер. Готовые решения отсутствовали, и когда мы начали проект, и сейчас их, в виде шаблонов, тоже нет, так или иначе требуются довольно приличные навыки программирования.

    Мы начинали сами, с нашими штатными сетевыми администраторами, которые умели немного кодить. Практически с первых шагов проекта нам хотелось бы облегчить себе жизнь. Но единственной «содранной» версией сайта была самая первая. Дизайн был позаимствован с десктопной программы для просмотра фото и видео, названия которой сейчас уже никто не помнит. Собственно, первоначальной идеей сайта был онлайн-кинотеатр с множеством залов, с темным фоном и большим экраном с качественной картинкой. Дизайн этой программы с забытым названием таким и был — темный фон, куча превью, при клике на которые открывался большой экран.



    Код взяли из Linux DVR, опенсорсного простейшего видеорегистратора на Linux. Он работал как сайт, на него можно было зайти через браузер и смотреть стримы с камер. На кусок кода из Linux DVR, где использовался motion jpeg, мы натянули дизайн с программы-просмотрщика фотографий и получилась первая версия Сочи.Камер, корявенькая, но работающая.

    Сейчас работает пятая версия Сочи.Камера. Дизайн сайта сильно поменялся. Основная идея «темный зал кинотеатра», правда, никуда не девалась, но сейчас дизайн, скорее, напоминает Яндекс-видео, чем десктопную фото-видео библиотеку. Однако, это только отдаленное напоминание, а не содранный внешний вид. На новую версию сайта был объявлен онлайн-конкурс, общий дизайн и пиктограммы, созданные победителями, были использованы на нынешней версии сайта.

    image

    Конечно, не все пользователи сайта благосклонно приняли новый вид, для сильно недовольных была оставлена и старая версия, однако, сейчас на нее практически никто не заходит.

    Что касается кода, то вторую и дальнейшие версии делали более самостоятельно, и они получились менее кустарными. Сейчас сервис сделан на Java script, серверная часть – на Node.js, клиентская – на Angular.js. Разработкой серверного приложения занимается у нас всего один человек, но это профессиональный разработчик и сегодняшний высокий уровень нашего сервиса это во многом именно его заслуга. Кстати, вся наша команда перечислена в разделе о проекте на Сочи.Камера.

    Турбулентность при переходе с Flash’а на HTML5

    Когда Стив Джобс объявил войну Flash’у, наш сайт на нем как раз и работал. Все производители браузеров стали постепенно уходить на HTML5, где демонстрация видеопотоков ещё не была стандартизована, и мы получили большие проблемы. Сочи.Камера могла бы еще несколько лет работать на Flash’e, но в новых версиях браузеров всё работало нестабильно, мы потеряли много пользователей, потому что вместо видео с камер они получали темное окно.



    Необходимо было переписывать сайт под новые версии браузеров, и мало того, что приходилось писать кусок кода под каждую версию отдельно, так ещё нужно было на лету определять связку браузер-плеер. Вот наш разработчик и написал такую конструкцию, которая это делала вполне успешно. Конечно, это очень нагружало систему и усложняло код. Так что, когда ситуация со стандартизацией устоялась, мы ещё раз переработали сервис, исключив эти дополнительные костыли.

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

    Кстати, в то же время, когда мы боролись с разными форматами браузеров, аналогичную проблему решал YouTube, за двумя небольшими отличиями: у YouTube осуществлялся показ файлов, а не стримов, что значительно облегчало программистам задачу; и это YouTube, с огромным штатом программистов, а не небольшая компания с одним, пусть и очень хорошим и даже гениальным программистом. Глядя сейчас на эти прошлые дела, мы можем сказать, что прошли турбулентность не хуже.

    Кроме правильного подхода нашего основного программиста к эффективности софта, еще одним очень важным моментом стал выбор новой стриминговой платформы. Хотя мы ушли от Wowza не по «технической причине», а из-за их нескромной тарифной политики, технически мы тоже выиграли в перспективе. Мы начали работать с Flussonic от компании Эрливидео на нашей четвертой версии, года 4 тому назад, когда они еще не были на слуху. Тогда этот продукт переходил из полукустарного опенсорсного в нормальный платный коммерческий.

    История этого продукта очень хорошо подтверждает тот факт, что программным продуктам лучше развиваться не по пути открытого ПО с бесплатным (или условно бесплатным) распространением, а по коммерческому пути.

    Сам Flussonic к тому моменту, когда мы собрались на него переходить, уже существовал года три. Сначала у него был открытый код, распространялся бесплатно, и программисты зарабатывали только на его поддержке. Развитие его было нестабильным, потому что пользователи не репортили баги, сторонним разработчикам участвовать в развитии проекта было неинтересно, денег от поддержки было мало. Тогда код было решено закрыть, создать компанию Эрливидео и заняться разработкой коммерческого продукта. И где-то через год после создания компании мы начали с ними работать.

    Мы были для них полигоном, экспериментальной базой, делились с ними проблемами, предлагали фичи. Одна из важных вещей, которую мы от них получили – это плеер, написанный конкретно под их движок. Важный момент, что обе эти части — ядро и клиент — написаны одним разработчиком, даже если проблемы и возникают, они очень быстро устраняются. Эрливидео очень выросли за это время, стали хорошо известны в отрасли iptv, и сейчас на нашей пятой версии всё уже больше года работает стабильно без особых сбоев.

    Деньги: на что потратить и как заработать

    После многих лет работы сайт стал весьма известным, популярным, сам стал образцом для подобных ресурсов. К нам периодически обращаются, чтобы купить цельное решение. Мы прикинули, во что обошлось бы нам это решение сегодня, с учетом нашего опыта и пройденных ошибок. В целом, серверная часть – это порядка 1 000 000 рублей, каждое мобильное приложение 500 000 – 600 000 рублей. Эти суммы потенциальных покупателей пугают, они рассчитывают максимум на 100 000 – 200 000 рублей за всё. Когда мы начинаем расписывать составные части программного обеспечения, стоимость тех или иных решений, народ недоумевает: например, зачем тратить деньги на написание модулей, для которых есть бесплатные аналоги в open source библиотеках. Да просто, чтобы они работали лучше!

    image

    Вот пример, простая задача — взять поток с камеры и раздать его большому количеству абонентов, просто размножить его, не изменяя. У бесплатного решения из библиотеки open source ffmpeg при прерывании потока с источника весь процесс останавливается и его надо рестартовать вручную. Представьте себе, на сети больше трехсот камер, довольно большая сеть, постоянно что-то происходит — где-то на камере питание сбойнёт, где-то между сервером и камерой перерыв связи случится и сервис просто останавливается. Легче заплатить денег за платное решение, которое умеет мониторить состояние и рестартовать при необходимости, чем использовать бесплатное решение, но мониторить и рестартовать вручную.

    В целом, по нашим прикидкам, стоимость разработки софта составила у нас порядка 40% всех затрат на проект. Остальные 60% это всё железо, включая камеры и сервера, а также лицензии на используемые сторонние приложения.

    Мы потратили много денег на этот наш проект, и в целом, сейчас не отказались бы как-то заработать на нем. Но это точно не прямой, «в лоб», путь монетизации. После изучения большинства моделей монетизации стало понятно, что те из них, где сервис зарабатывает напрямую, требуют дополнительных хлопот и в целом не окупаются. Сейчас есть технические решения, которые могут довольно легко интегрировать рекламу прямо в видео-стрим. Технически это очень хорошее решение, нагрузка на серверы низкая, обойти блокировщиками рекламы нельзя, при нашей посещаемости в 500 000 — 600 000 человек ежемесячно эту видеорекламу будет смотреть очень большая аудитория, но строить вокруг этого систему продаж, заниматься администрированием денежных потоков весьма накладно, и мы такой монетизации не планируем.

    Так что мы используем косвенные модели, в основном для продвижения своего основного операторского бизнеса. Например, при входе на сайт анализируем IP-адрес посетителя, и местному жителю, но не нашему клиенту, показываем рекламу собственных услуг. Даем стримы для показа на сторонних веб-ресурсах в обмен на нашу рекламу у них. На местных телеканалах охотно используют видео с наших камер в новостных блоках в прайм тайм с упоминанием названия нашей компании. Наши клиенты гостиничные сети транслируют видеопотоки с наших камер на своих телевизорах, получая их как телеканалы, для них это дополнительная бесплатная услуга, фишка для гостей.

    Сам сайт, с его почти 5 млн просмотров в месяц мы используем, как рекламную площадку, но рекламу не продаём — размещаем только свою, или своих клиентов-юридических лиц, бесплатно, просто повышаем лояльность.

    В дальнейшем мы планируем придерживаться этой же стратегической линии — косвенные способы монетизации, бесплатный сервис для посетителей.

    Ждём ваших вопросов, комментариев, замечаний, и предложений по поводу следующей статьи.

    Сочи.Камера

    9,27

    Компания

    Поделиться публикацией
    Комментарии 12
      +1
      Не ну я конечно понимаю, при входе на сайт мне предлагают установить приложение, но а где мобильная версия сайта то? Почему при отказе использовать приложение открывается ущербная десктоп версия сайта? Ущербная хотя бы потому, что на главной странице показывается портянка картинок со всех камер — кто такой дикости вас научил? Жесть, не знаю как у вас там написана серверная часть, но UI сайта меня убил при первом же открытии.
        0

        Компьютер, Google Chrome — полёт совсем отличный.
        Смартфон, Андроид — довольно страшненько, но ведь предлагали же приложение.

          +3


          Простите, но что тут отличного?

          495 запросов чтобы прогрузить главную страницу, 22 сек. она полностью прогружалась на 3G интернете и при этом слопала 14 MB! моего трафика.
            0

            Посмотрел, из того, что грузится — графика много где в svg, JS, CSS — всё компактненько.
            348 картинок превьюшек камер — с одной стороны некоторый перебор.
            С другой стороны просмотр видео в течение нескольких секунд скушал примерно столько же трафика. Было бы наивностью экономить трафик заходя на ресурс просмотра видео.


            Может быть имеет смысл реализовать динамическую подгрузку превьюшек, но… смысл?

              0
              Динамическая подгрузка превью реализована как раз в приложениях.
                0
                Ленивую загрузку для 300+ картинок нужно делать обязательно, тем более, что это несложно.
                0
                Простите, а сколько вы ожидали потратить трафика, заходя на сайт с камерами?
            0
            По поводу вывода о платном ПО — вот как не крути, а очень и очень часто платное ПО гораздо лучше Open Source решений. Так что это совсем не удивительно.
              0
              Мне кажется вебкамеры удобный инструмент для оценки движения по городу (пробки) и (в случае снежных зим) позволяет оценить дорожную обстановку для принятия решения по выезду. Жаль, что у Петропавловска-Камчатского такого нет.
                0
                Именно такой украинский сервис есть давно videoprobki.ua
                Интересный факт: Очень популярен был во временна Майдана т.к. камеры показывали площадь с разных направлений.
                +1
                Ряд вопросов.
                Развитие его было нестабильным, потому что пользователи не репортили баги, сторонним разработчикам участвовать в развитии проекта было неинтересно, денег от поддержки было мало. Тогда код было решено закрыть, создать компанию Эрливидео и заняться разработкой коммерческого продукта. И где-то через год после создания компании мы начали с ними работать.

                В чем проблема была начать «репортить баги», «быть для них полигоном» и тд пока они еще не были закрыты?
                Разработкой серверного приложения занимается у нас всего один человек, но это профессиональный разработчик и сегодняшний высокий уровень нашего сервиса это во многом именно его заслуга.

                Ваши действия когда ваш «один профессиональный разработчик» отойдет от дел (болезнь, троллейбус, эмиграция и тп)?
                У бесплатного решения из библиотеки open source ffmpeg при прерывании потока с источника весь процесс останавливается и его надо рестартовать вручную. Представьте себе, на сети больше трехсот камер, довольно большая сеть, постоянно что-то происходит — где-то на камере питание сбойнёт, где-то между сервером и камерой перерыв связи случится и сервис просто останавливается. Легче заплатить денег за платное решение, которое умеет мониторить состояние и рестартовать при необходимости, чем использовать бесплатное решение, но мониторить и рестартовать вручную.

                Еще легче на аутсорсиинг все отдать. Серьезно, что сложного в рестарте по необходимости залипшего сервиса?
                про битву с YouTube (мы победили)

                Очень жаль что про это так ничего и не рассказали.
                  0
                  Если веру в чудо у ней убили
                  Если было худо и не люби
                  … (с)

                  Нет, молодцы ребята, зачет! Выглядит вполне достойно. Но может быть стоило добавить технических подробностей? Это все-таки Хабр.

                  Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

                  Самое читаемое