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

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

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

Я перепробовал все эти плееры. У каждого есть свои достоинства и недостатки, но я все таки остановился на 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.

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

22 комментария

    1. 0

      0

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

  1. 0

    0

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

    1. 0

      0

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

  2. 0

    0

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

    1. 0

      0

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

  3. 0

    0

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

    1. 0

      0

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

  4. 0

    0

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

  5. 0

    0

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

    1. 0

      0

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

Оставить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *