special

  1. HOME
  2. Хакерство и защита
  3. Организация живой трансляции с ip камеры на сайте

Организация живой трансляции с 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

';