Yellow Leaf - Статьи - Трансляция изображения с 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/

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

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

Жёлтый лист
Сайт о мире Linux

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

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

Жёлтый лист Сайт о мире Linux

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

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

Жёлтый лист
Сайт о мире Linux