axis

Допустим что у вас есть (или будет) 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.

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