Трансляция изображения с IP-камер

()

Иногда возникает задача организации трансляции видеопотока с веб-камеры в сеть. Технических вариантов решения данной задачи существует множество. Рассмотрим некоторые из них.

Начальные условия:

  • Две IP-камеры hikvision 2CD7133E, которые отдают видеопоток по RTSP протоколу, закодированый h264, mpeg, mjpeg;
  • Сервер под управлением Ubuntu

В качестве сервера для трансляции потока используем Wowza Stream Server. Продукт платный, хотя есть и демо-версия. Поскольку он написан на java, то java-машина уже должна быть установлена. Устанавливаем сервер:

sudo dpkg -i ~/WowzaMediaServer-2.2.4.deb

Создаем каталог приложения:

sudo mkdir -p /usr/local/WowzaMediaServer/conf/live

Копирируем настройки

cp -v /usr/local/WowzaMediaServer/conf/Application.xml /usr/local/WowzaMediaServer/conf/live/

Редактируем скопированный файл:

  1. Назначьте свойству Streams/StreamType значение: live
  2. Назначьте свойству HTTPStreamers значение: cupertinostreaming, smoothstreaming, sanjosestreaming
  3. Назначьте свойству Streams/LiveStreamPacketizers значение: cupertinostreamingpacketizer, smoothstreamingpacketizer, sanjosestreamingpacketizer
  4. Назначьте RTP/Authentication/PlayMethod значение: none
  5. Добавьте следующее свойство в контейнер MediaCaster/Properties:
    forceInterleaved
    true
    Boolean
  6. Используя текстовый редактор, создайте файл /usr/local/WowzaMediaServer/content/camera.stream введите содержимое в виде полного пути RTSP/RTP URL к Вашей камере, в зависимости от количества камера создаем соответственно camera1.stream, camera2.stream и т.д.
  7. Используя текстовый редактор, отредактируйте файл /usr/local/WowzaMediaServer/conf/admin.password и добавьте username (имя пользователя) и password (пароль), которые буду использоваться для пуска и останова публикации видео от камеры.
  8. Запутите Wowza Media Server 2
  9. Откройте браузер и введите в адресной строке: http://ip.ad.re.ss:8086/streammanager и введите Ваши admin username и password, которые Вы назначили в файле admin.password
  10. Кликните по ссылке [start-receiving-stream] сразу под разделом live application folder
  11. Выберите MediaCaster Type: rtp
  12. Введите camera.stream в поле Stream Name
  13. Кликните OK

Теперь у вас запущена трансляция потока.

Переходим к размещению на сайте. Создаём в DocumentRoot сайта директорию flowplayer и скачиваем туда flowplayer. После этого создаём файлы start.html, index.html, index1.html, flash.html, flash1.html, html5.html, html51.html.

Листинг start.html:

<table width="640" height="240" border="0" scrolling="no" align="center" cellspacing="0" cellpadding="0">
<tr height="240" valign="top">
<td width="320" height="240">
<iframe style="border: 0px; padding:0px; width:320px; height:240px !important; position:absolute; z-index:1; margin-top:0px; margin-right:0px; border:0px;" scrolling="no" align="middle" src="index.html" ></iframe>
</td>
<td width="320" height="240">
<iframe style="border: 0px; padding:0px; width:320px; height:240px !important; position:absolute; margin-top:0px; margin-left:-9px !important; border:0px; z-index:0" scrolling="no" align="middle" src="index1.html" ></iframe>
</td>
</tr>
</table>

Листинг index.html:

<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="flowplayer-3.2.6.min.js"></script>
</head><body>

<div id="page">
<!--<a href="null" style="display:block;width:320px;height:240px" id="player"></a>-->
<script type="text/javascript">
var br = navigator.userAgent.toLowerCase().indexOf("safari");
var br1 = navigator.userAgent.toLowerCase().indexOf("chrome");
if (br != -1 && br1 == -1)
{
location='html5.html';
}
else
{
location='flash.html';
}
</script>
</div>
</body></html>

Листинг flash.html:

<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="flowplayer-3.2.6.min.js"></script>
</head><body>
<div id="page">
<script>
var output = '<a href="null" ';
output += 'style="display:block;width:320px;height:240px" ';
output += 'id="player"></a>';
document.write(output);
flowplayer("player", "flowplayer-3.2.7.swf",
{
clip: {
url: 'camera.stream',
live: true,
provider: 'rtmp'
},
plugins: {      
rtmp: {
url: '../flowplayer.rtmp-3.2.3.swf',
netConnectionUrl: 'rtmp://ip.ad.re.ss:1935/live'
}
}       
});
</script>
</div>
</body></html>

Листинг html5.html:

<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head><body>
<div id="page">
<script>
var output = '<video controls="controls" wigth="515" height="386">';
output += '<source src="http://ip.ad.re.ss:1935/live/camera.stream/playlist.m3u8">'; 
output += '</video>';
document.write(output);
</script>
</div>
</body></html>

Файлы index1.html, flash1.html, html51.html отличаяются от index.html, flash.html, html5.html только именем потока: в оригинальных файлах это camera.stream, а в файлах с единичкой - camera1.stream.

Основная идея тут в том, чтобы показывать рядом картинку с двух камер и при этом в зависимости от браузера для показа видео использовать технологию flash или html5.

При таком решении нагрузка на процессор составляла всего 7%.

В какой-то момент заказчик изъявил желание просматривать видео с камер на iPad. К сожалению Safari вообще не поддерживает flash, а в случае html5 не позволяет одновременно показывать сразу два потока.

В такой ситуации выбор пал на motion, который хотя и является декектором движения, умеет просто ретранслировать поток. Хотя пришлось перенастроить камеры чтобы они отдавали картинку в Jpeg.

Устанавливаем motion:

apt-get install motion

Переходи к конфигурированию. Открываем файл /etc/motion/motion.conf и приводим к виду:

daemon on
quiet on
width 640
height 480
framerate 10
quality 20
auto_brightness off
threshold 4500
noise_level 64
brightness 0
contrast 0
saturation 0
hue 0
ffmpeg_cap_new off
target_dir /var/lib/motion/snapshots
webcam_localhost off
# Можно увеличить если нужно повысить качество картинки
webcam_quality 20
webcam_maxrate 10
output_all off
output_motion off
output_normal off
thread /etc/motion/thread2.conf
thread /etc/motion/thread1.conf

Создаём файл /etc/motion/thread1.conf с указанием пути к html потоку с камеры и порту, на котором будет вестись трансляция:

netcam_url http://ip.ad.re.ss:port/streaming/channels/1/preview
webcam_port 10000

Для второй камеры отличие только в адресе и номере порта:

netcam_url http://ip.ad.re.ss:port/streaming/channels/1/preview
webcam_port 10001

Создаём файлы index.html, 251.html, 252,html:

Листинг index.html:

<table width="1030" height="386" border="0" scrolling="no" align="center" cellspacing="0" cellpadding="0">
<tr height="386" valign="top">

<td width="515" height="386">
<iframe style="border: 0px; padding:0px; width:515px; height:386px !important; position:absolute; z-index:1; margin-top:0px; margin-right:0px; border:0px;" scrolling="no" align="middle" src="252.html" ></iframe>
</td>
<td width="515" height="386">
<iframe style="border: 0px; padding:0px; width:515px; height:386px !important; position:absolute; margin-top:0px; margin-left:-9px !important; border:0px; z-index:0" scrolling="no" align="middle" src="251.html" ></iframe></td>
</tr>
</table>

Листинг 251.html:

<script language="javascript">
var BaseURL = "http://ip.ad.re.ss:10001/";
var File = "stream.mjpg";
theDate = new Date();
output = '<IMG SRC="';
output += BaseURL;
output += File;
output += '" WIDTH="515">';
setInterval(document.write(output),80);
</script>

Файл 252.html отличается от 251.html только номером порта.

Поскольку поток отдаётся в формате mjpeg то далеко не все браузеры смогут его показать. Но firefox вполне может. Кроме того нагрузка на процессор сервера составила 55%, что заметно хуже, чем при использовании Wowza.

В целом все, просьба сильно не пинать за первую в жизни статью.

Конфигурацию WowzaMediaServer брал тут и использовал материал отсюда.

Подписаться на обновления: RSS-лента Канал в TamTam Telegram канал Канал в ICQ

Комментарии:

anubis_donetsk 2012-11-19 13:25:33 (#)

Забыл, на motion нагрузка на проц 55% что не очень кошерно, по сравнению с вовзой

MooSE 2012-11-20 03:08:28 (#)

В целом все, просьба сильно не пинать за первую в жизни статью.
Да вроде не плохо:) Хотя я немного подрихтовал. Уж извини:)

Забыл, на motion нагрузка на проц 55% что не очень кошерно, по сравнению с вовзой
И это тоже вставил:)

Anonymous 2012-11-20 08:36:25 (#)

> Забыл, на motion нагрузка на проц 55% что не очень
возможно это потому что по дефолту там детектор движения настроен и для него декодируются потоки

Anonymous 2012-12-13 16:35:07 (#)

Как то тоже настраивал Wowza - не пошло т.к. нагрузку создавало аховую на не плохой сервер. Ссылка

Anonymous 2012-12-18 19:34:19 (#)

Как то тоже настраивал Wowza - не пошло т.к. нагрузку создавало аховую на не плохой сервер. Ссылка

Както непонятно, зачем использовать Wirecast с вовзой? если это два отдельниых стрим-вервера.

Новый комментарий

Жирный текстКурсивный текстПодчёркнутый текстЗачёркнутый текстПрограммный кодСсылкаИзображение




© 2006-2024 Вадим Калинников aka MooSE
Политика конфиденциальности