special

This webpage has been robot translated, sorry for typos if any. To view the original content of the page, simply replace the translation subdomain with www in the address bar or use this link.

Организация живой трансляции с ip камеры на сайте

На странице


Организация живой трансляции с ip камеры на сайте

Задача

Рассмотрим задачу по организации на сайте живой видео трансляции с ip камеры.

Наш стенд состоит из трёх составных частей:

  • ip камера
  • медиасервер
  • flash плеер в браузере на стороне клиента

Выбор ip камеры

Для того чтобы было комфортно брать с камеры поток, она должна поддерживать трансляцию живого видео (обычно по протоколу RTSP). Существуют ещё вариант, когда с камеры в любой момент времени можно забрать JPEG с текущим кадром по протоколу HTTP, но это не так удобно. Поэтому была выбранна камера D'Link DCS-2121 с поддержкой RTSP.

Медиасервер

Самая сложная часть конфигурации так как на него ложатся функции по получению видео с камеры, конвертации в необходимый формат, кешированию и раздачи клиентам. Забегая вперёд, скажу, что раздавать в данном случае целесообразно либо по адобовскому протоколу RTMP, который нативно поддерживается флеш плеерами, либо по HTTP.

Для RTMP существуют платные решения: FMS, Wowza (последний бесплатный при количестве одновременных подключений менее десяти) и бесплатные (red5 и rtmpd).

Если раздавать по HTTP, то вариантов ещё больше, так как задача разбивается на две подзадачи:

  1. конвертация видео
  2. раздача видео

Естественно, что количество комбинаций растёт. Для раздачи можно использовать, например, apache или lighthttpd. Для конвертирования — ffmpeg.

В моём случае нужно было сделать всё

  1. под линуксом
  2. бесплатно
  3. просто

Поэтому я остановился на самом, на мой взгляд, простом варианте, при котором на сервере нам потребуется только одна программа — видеплеер VLC, которую, мы, впрочем будем конфигурировать и компилировать под наши нужды. Этот видеоплеер не имеет пока нормальной поддержки RTMP, поэтому мы будем отдавать flv файл по HTTP.

flash плеер в браузере на стороне клиента

В принципе, должен подойти любой, но у меня, почему-то так и не получилось настроить JW Player. FLV файл бесконечно скачивался клиенту, а буферизация не заканчивалась. Сроки поджимали и поменял плеер на Flow player, в результате чего эта проблема исчезла.

Настройка

Переменные

Чтобы не делать оговорок дальше, будем считать, что у меня ip адрес сервера — 10.0.0.2, камеры — 10.0.0.3, маска 255.0.0.0 и шлюз 10.0.0.1, в линуксе я работаю под пользователем user, все необходимые команды запускаю через sudo.

Настройка камеры

Настроим камеру через web интерфейс, зададим необходимые сетевые параметры: ip адрес, маска, шлюз, выставим время. Так же нам необходимо указать порт, на котором камера будет отдавать RTSP поток (стандарно используется порт 554, его я и оставил).

В разделе «Audio and Video» зададим характеристики видео, которые нам необходимы. В любом случае, мы можем поменять битрейт и размер картинки в последствии на сервере при конвертации, но чтобы всё было аккуратно, укажем сразу и здесь. Будем использовать MPEG4 640x480, 15 fps, 512kb битрейт.

Так же тут необходимо указать RTSP URL этот адрес будет использоваться при забирании потока с камеры, от нас требуется указать только имя файла. Я ввёл camera1.sdp. В итоге поток будет доступен по ссылке rtsp://10.0.0.3:554/camera1.sdp

Настройка сервера

Подойдёт любой линукс, я исопльзовал Debian Lenny. Создаём в хоуме папку, в которой будем работать:

  1. mkdir ~user/install
  2. cd ~user/install

Нам понадобится качать кодеки, поэтому подключаем репозиторий debian-multimedia:

  1. wget http://www.debian-multimedia.org/pool/main/d/debian-multimedia-keyring/debian-multimedia-keyring_2008.10.16_all.deb
  2. dpkg -i ./debian-multimedia-keyring_2008.10.16_all.deb

Добавляем в /etc/apt/sources.list строчку

  1. deb http://www.debian-multimedia.org stable main non-freel.deb

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

  1. apt-get update
  2. apt-get install yasm make subversion xcb libxcb1-dev libxcb-shm0-dev libxcb-keysyms0-dev \
  3. libavformatcvs51 libavcodeccvs51 libavcodeccvs51-dev libavformatcvs51-dev libavutilcvs49-dev \
  4. autoconf g++ gcc liba52-0.7.4-dev libdvbpsi3-dev libdvbpsi3 libfaad-dev libfaac-dev libfribidi-dev \
  5. libavutilcvs49 libavahi-client3 libavahi-common-dev libpostproccvs51-dev libswscalecvs0-dev \
  6. libswscalecvs0 libxvidcore4-dev libxvidcore4 libx264-dev libx264-54 automake1.9 libgcrypt11-dev \
  7. liblame-dev liblua5.1-0-dev libmad0-dev libmpeg2-4-dev libogg-dev libvorbis-dev zlib1g-dev \
  8. libvcdinfo-dev libiso9660-dev libcddb2-dev libflac-dev libx264-dev x264

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

  1. svn checkout svn://svn.ffmpeg.org/ffmpeg/trunk ffmpeg
  2. cd ffmpeg
  3. ./configure
  4. make
  5. make install
  6. cd ..

Если планируется работа с кодеком h264, то можно сконфигурировать ffmpeg с опциями

./configure --enable-libx264 --enable-gpl

Далее нам понадобится очень нужная библиотека live555 streaming media, именно с помощью неё наш VLC плеер будет работать с RTSP.

  1. wget http://www.live555.com/liveMedia/public/live555-latest.tar.gz
  2. tar zxvf ./live555-latest.tar.gz
  3. cd live
  4. ./genMakefiles linux
  5. make
  6. cd ..

Теперь переходим к самому VLC плееру. Заходим http://download.videolan.org/pub/videolan/vlc/latest/ и смотрим, какая самая свежая версия, после чего выкачиваем и распаковываем исходники. В моём случе это выглядело так:

  1. wget http://download.videolan.org/pub/videolan/vlc/latest/vlc-1.1.0.tar.bz2
  2. bzip2 -d vlc-1.1.0.tar.bz2
  3. tar xvf ./vlc-1.1.0.tar
  4. cd vlc-1.1.0
Конфигурация VLC — самая творческая часть, постараемся сделать так чтобы было то что нам надо и ничего лишнего.
  1. ./configure --enable-release --enable-faad --disable-dbus --disable-hal \
  2. --disable-remoteosd --disable-qt4 --disable-skins2 --disable-activex \
  3. --disable-v4l2 --disable-libv4l2 --disable-x11 --disable-xvideo --disable-glx \
  4. --disable-opengl --disable-visual --disable-nls --disable-mozilla \
  5. --enable-realrtsp --enable-flac --disable-lua --prefix=/usr\
  6. --with-live555-tree=/home/user/install/live --with-ffmpeg-tree=/home/user/install/ffmpeg 

В последней строчке мы указываем пути к исходникам ffmpeg и live555, с которыми мы работали на предыдущих шагах. Если планируется работа плеера под рутом, необходимо добавить ключ --enable-run-as-root, если кодек h264 --enable-x264

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

  1. make
  2. make install

Установка софта завершена, все что нам осталось — это запустить плеер с нужными параметрами. Вообще, VLC плеер уникален по своеё гибкости.

Плеер будет у нас работать в два одновременных потока: первый будет получать видео с камеры по RTSP мультиплексировать его в MPEG TS и отдавать на localhost:8001, второй будет забирать результат с localhost:8001, пережимать, кодировать, упаковывать в FLV контейнер и отдавать по HTTP на порту 8080.Сделаем 2 файла для запуска этих потоков соответственно:

  1. mkdir ~user/scripts
  2. touch ~user/scripts/stream1.sh
  3. touch ~user/scripts/stream2.sh

В stream1.sh вставляем строчки:

  1. #!/bin/sh
  2. vlc -vv rtsp://10.0.0.3:554/camera1.sdp --rtsp-caching=100000 --no-sout-audio --sout \
  3. '#std{access=http,dst=127.0.0.1:8001,mux=ts}'

Здесь мы указали плееру, что и куда проигрывать. В качестве источника выбран поток с камеры rtsp://10.0.03:554/camera1.sdp, указали размер буфера и сразу не первой стадии сделали наше кино немым (--no-sout-audio). Результат будет отдаваться этим потоком по адресу http://127.0.0.1:8001В stream2.sh вставляем строчки:

  1. #!/bin/sh
  2. vlc -vv http://127.0.0.1:8001 --loop --http-caching=10000 --sout \
  3. '#transcode{vcodec=FLV1,vb=512,fps=15}:std{access=http{mime=video/x-flv},dst=:8080/view01.flv,mux=ffmpeg{mux=flv}}'

Второй поток забирает http://127.0.0.1:8001, имеет свой собственный кэш, пережимает его (vb — битрейт, fps — фпс) и раздаёт его по HTTP на порту 8080 как файл view01.flv. Если на сервере несколько интерфейсов, то можно указать в dst так же конкретный ip адрес того интерфейса, на котором необходимо раздавать.

В промышленной эксплуатации потоки надо запускать фоном и без привязки к консоли, в нашем же примере, мы запустим их просто в двух консолях. vlc должен некоторое время наполнять буфер, а потом перейти в штатный режим. Длительность наполнения напрямую зависит от размера кэша (--rtsp-caching и --http-caching соответственно).Нам понадобится создать страничку с плеером. Для простоты сделаем её на этом же сервере.

  1. apt-get install apache2
Настройка плеера
  1. cd /var/www/

Далее скачиваем Flow Player. На сайте разработчика есть мастер настроек, чтобы воспользоваться им, необходимо зарегистрироваться. Доступен мастер по адресу http://flowplayer.org/setup/index.html.

Так как у нас живой стрим и камера выводит текущее время прямо в картинку, от плеер должен быть минималистичным. Отключаем всё кроме кнопки «Fullscreen», скачиваем плеер и распаковываем содержимое архива в папку /var/www на нашем сервере.

Чтобы всё было идеально, я ещё и переименовал файлы swf и js в player.swf и player.js соответственно. Я бы не писал об этом факте, если бы на забыл как они назывались до этого. Поэтому в тексте я так же буду использовать свои новые имена. Итак, создаём html страничку

  1. touch /var/www/index.html
Сохраняем в неё следующий текст:
  1. <html><head>
  2. <meta http-equiv="content-type" content="text/html; charset=UTF-8"><script type="text/javascript" src="/player.js"></script>
  3. <title>Просмотр камеры 1</title>
  4. </head>
  5. <body>
  6. <h1>Камера № 1</h1>
  7. <a 
  8. href="http://stream.kubsu.ru:8080/view01.flv"
  9. style="display:block;width:520px;height:330px;margin:10px auto;"
  10. id="player">
  11. </a>
  12. <script>
  13. flowplayer("player", "/player.swf");
  14. </script>
  15. </body></html>

Всё готово, заходим в браузере на http://10.0.0.2/ и смотрим трансляцию.


Created/Updated: 25.05.2018

';>