Організація живої трансляції з 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/ і дивимося трансляцію.