Организация онлайн трансляции на сайте

Допустим что у вас есть (или будет) IP камера (желательно Axis) и есть желание показывать на своем сайте видео с этой камеры в прямом эфире, будь то семинар, какое либо мероприятие, двор за окном, ну или себя любимого решили показать всем на обозрение))
Ну чтож, ничего сложного. В этой статье будет подробно расписано как это сделать.Итак, для начала нам понадобится установить видеосервер.
Для этих целей я использовал популярный видеостриминговый сервер Wowza. Решение платное, но есть пробная версия, позволяющая произвести одновременно 10 подключений, для начала хватит и столько.
Идем на сайт разработчика и скачиваем необходимую нам версию.
Первоначальная настройка также доступна на сайте разработчика (кто не в ладах с английским вот хороший перевод этой статьи).

Сервер установили и настроили, теперь необходимо разместить на сайте flash плеер, поддерживающий протокол RTMP (ведь именно по нему наш сервер будет передавать видео на плеер).
Выбор конечно есть, вот на мой взгляд самые лучшие представители:

  • Flowplayer
  • JW Player
  • Uppod

Я перепробовал все эти плееры. У каждого есть свои достоинства и недостатки, но я все таки остановился на Flowplayer, т.к. к нему написано огромное количество дополнительных модулей, удобное управление, практически нет глюков, а также очень хорошая (что немаловажно) поддержка со стороны разработчиков на форуме.

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

Далее необходимо разместить код плеера на страницу, где планируется транслировать видео.
Рабочий пример кода плеера.

<script src="flowplayer-3.2.6.min.js"></script>

<div id="player" style="display:block;width:640px;height:480px;"></div>

<script type="text/javascript">
$f("player", "flowplayer-3.2.7.swf",
{
  clip:
  {
    scaling: 'fit',
    url: 'camera.stream',
    autoBuffering: true,
    bufferLength: 60,
    provider: 'rtmp',
    autoPlay: false
  },

  plugins:
  {
    controls:
    {
      url: 'flowplayer.controls-3.2.5.swf',
      play: true,
      volume: true,
      mute: true,
      time: true,
      stop: false,
      fullscreen: true,
      scrubber: true,
      width: '100%',
      left: '1px',
      backgroundColor: 'rgba(0, 0, 0, 0)',
      backgroundGradient: 'none',
      volumeColor: '#4599ff',
      tooltipColor: '#000000',
      tooltipTextColor: '#ffffff'
    },

    rtmp:
    {
      url: 'flowplayer.rtmp-3.2.3.swf',
      netConnectionUrl: 'rtmp://<адрес сервера>/live/'
    }
  }
});
</script>

Что мы имеем в итоге. При открытии страницы с трансляцией, плеер обращается к видеосерверу по адресу rtmp://<адрес сервера>/live/camera.stream и забирает с него поток по протоколу RTMP.

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

Понравилась статья? Поделиться с друзьями:
Комментарии: 23
  1. Анатолий

    Тоже склоняюсь к камерам AXIS и схема с Wowza сервером действительно стабильная! Про RTMP плагин узнал из вашей статьи, спасибо. О моем опыте работы с Wowza можете почитать тут http://itmultimedia.ru/translyaciya-izobrazheniya-s-ip-kamery-v-set-internet/

  2. Павел

    Помогите настроить, с виду вроде просто неполучается

    1. admin (автор)

      Что именно у вас не получается? Напишите, постараюсь помочь.

  3. Георгий

    А как переделать RTMP на обычный HTTP чтоб вебкака работала в «лайфе»?

    1. admin (автор)

      В статье как раз и описывается случай, когда вебкамера будет транслироваться в онлайне, через плеер на странице. Или вы что-то другое имели ввиду?

  4. Георгий

    можно ли проверить работает ли система локально по программе Денвер 3?

    1. admin (автор)

      Конечно можно. Ставите на локальный сервер вовзу (есть пакеты и для Windows), а на веб сервере делаете страницу с плеером.

  5. Никита

    Здравствуйте, как поставить себе на Сайт этот телеканал глас rtmphttp://www.glas.org.ua/video.html через Flowplayer протокол rtmp. Пытался по инструкции, ничего не получилось.. :-?

    1. admin (автор)

      Здравствуйте! :wink:
      Во первых можно просто попробовать вставить их плеер себе на страницу. Может получится.
      А так, смотрите в исходном коде страницы, там ссылка вида:
      rtmp://gigaz.wi.com.ua/hallDemo/glassua&autoPlay=true&width=640&height=480&autoHideControlBar=false
      Вот ее и попробуйте вставить в FlowPlayer.
      Также не забывайте, что со стороны сервера очень просто разрешить доступ к потоку только определенным IP адресам, и если они это сделали, то у вас ничего не получится. :-|

      1. Никита

        А обойти ограничение по ip можно? Они как раз и закрыли доступ по ip

        1. admin (автор)

          Даже не знаю, но думаю что никак. На то оно и ограничение по ip :)

  6. Алексей

    Добрый день.
    стоит wowza на виртуальной машине, IP Камера RVi, с помощью примеров-плееров в самой вовзе получается получить картинку с камеры.
    Делаю все по вашей инструкции, в логах вовзы написано, что стрим пошел, но страничке в браузере картинки нет.

    1. admin (автор)

      Добрый день!
      Наверно уже поздно и вы все сделали сами. Но если нет, пришлите ссылку на страницу, попробую помочь.

  7. эдуард

    плеер UPPOD

  8. Илья

    Здравствуйте! Пробовали ли вы другие медиасерверы для трансляции с видеокамеры. Например: http://itmultimedia.ru/media-servera-flash-media-server-wowza-erlyvideo-red5/

  9. Евгений

    Добрый день.
    Надеюсь что не некропостинг…)
    Проблема 1 в 1 как у Алексея (Июл 29, 2013 @ 13:56:04) Поставил wowza на вирт. машину, IP Камера AXIS, со странички, которая в примерах wowza по rtmp картинка идет, через VLC идет. Скопировал Ваш код в HTML страницу — ничего не получается, в окне вовзы написано: stream play camera.stream -в браузере картинки нет. Помогите пожалуйста разобраться чем затык.

  10. Дмитрий

    Такая же проблема Как у Евгения.flowplayer.rtmp-3.2.3 Грузит. поток вроде как по логам пошёл. но тут же плеер дохнет. flowplayer.rtmp-3.2.13 вообще не подаёт признаков жизни.

  11. Eugen

    А что если у меня не rtmp, а rtsp?

    1. admin (автор)

      RTSP у вас должна отдавать камера на вовзу, а вовза уже в свою очередь раздает именно RTMP

  12. Александр

    Помогите настроить плеер, не воспроизводит видео, ссылка рабочая

    1. admin (автор)

      Напишите код, который вы используете, посмотрю.

  13. Игорь

    Крутая статья, даже сейчас актуальна, что удивительно, спасибо. Только теперь type=»text/javascript» можно уже не писать :smile:
    Вот только вместо вовзы я бы флюссоник поставил https://flussonic.ru/, поддержал бы отечественного производителя, так сказать :cool:

Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: