Проект yandexcamera.ru для видеонаблюдения

[shveps]

CyberWRT отличная штука для MR3020!
Это мой первый пост.
Была поставлена задача - сделать систему видеонаблюдения из 5 камер (по одной на 1 квартиру) с дальнейшим увеличением пользователей. чтобы пользователи могли смотреть все камеры на 1 страничке.
У каждой квартиры - свой роутер, свой интернет-провайдер.
В качестве решения был выбран TP-LINK MR-3020 + вебкамера Logitech C270 HD + USB хаб (без питания)
В качестве прошивки была выбрана CyberWRT
В качестве подключения был выбран - клиент Wifi - для подключенния к роутера к домашней сете каждой квартиры.

-Установлен драйвер вебкамер mjpg_streamer
-Установлен Yandex диск и в самом Яндекс-Диске создаем папки под каждую камеру - к примеру - CAM1, CAM2 и т.п. чтобы раздельно их использовать.
-Установлен планировщик

Камера отлично выдавала видеопоток mjpg 1280x720, но для видеонаблюдения из нескольких квартир (на парковку) достаточно фотографий сменяемых 1 раз в минуту.
Опытным путем выяснилось что без зависонов mjpg делает фотки максимально 800x600, а еще лучше 640x480, иногда удавалось сделать фото 1024x576
в иных случаях - зависание камеры и необходимость ребута.

создаем задание в планировщике
ставим задание

Минуты, часы и прочее ставим - *
Путь к скрипту:
mjpg_streamer -i "input_uvc.so -y -d /dev/video0 -r 640x480" -o "output_file.so -f /mnt/Yandex/CAM1 -d 5000 -c /www/cgi-bin/modules/video_driver/stop.cgi"
и создаем задание
Примечание - в задании указана папка /mnt/Yandex/CAM1 - это та папка куда будут сыпаться фотки

прежде чем нажать START - проверим выключен ли стрим в Драйвер_Webcam - если включен - остановите его.
Теперь снова в планировщик и запускаем Start.
После чего каждую минуту на ваш яндекс диск будут сыпаться фотки примерно такие:
2013-03-26 23-22-26.JPG
2013-04-12 16-39-12.JPG
2013-04-12 16-39-22.JPG
2013-04-12 16-39-28.JPG
2013-04-27 14-21-40.JPG

ВАЖНО! ДЛЯ ТОГО ЧТОБЫ СЕРВИС НОРМАЛЬНО РАБОТАЛ - ПЕРЕИМЕНУЙТЕ ОДНУ ФОТКУ В 'image.JPG' - это требования yandexcamera - об этом речь пойдет ниже!

Зачем вообще такой гимор, спрашиваете вы - если можно пробросить порты, DynDNS подключить и смотреть видео с камеры?

Проброс портов 8080 отпал - ибо некоторые квартиры подключены через роутеры МГТС к которым нет доступа (сброс на дефолт не предлагать)

Рендер видеопотока MJPG напрямую на Яндекс диск отпадал - ибо его трудно смотреть через http c любого компа.

В идеале захотелось сделать все камеры на 1 вебстранице.

Для этого был найден сайт yandexcamera.ru который использует API Яндекс диск (можно в принципе и самому написать движок PHP под этот API).

Для работы всего этого дела нам понадобится зайти
http://online.yandexcamera.ru/
далее выбрать - Создать виджет для Яндекс.ДИСК
выбрать папку куда кладутся фотки MJPG-ом (или просто в корне) и нажать кнопку - Создать

после чего вы попадете на страничку что-то типа http://online.yandexcamera.ru/yandex/show/215 - это моя камера - сори но она не обновляется - я временно отключил роутер для других дел.

Если вы правильно все сделали - то страничка бует автообновляться раз в минуту и показывать последнюю фотку! если не показывает - то вы не переименовали первую фотку в image.JPG

если вы не хотите иметь архив фоток то в интернете есть баш скрипт для openwrt переименования выходного файла в другой - (вам нужно в image.JPG), можно просто Файл Менеджером подправить /www/cgi-bin/modules/video_driver/stop.cgi

#!/bin/sh
mv -f "$1" '/mnt/Yandex/CAM1/image.JPG'
killall mjpg_streamer

далее вы можете собрать картинки с нескольких камер:
yandexcamera дает сразу код iframe - их вы соберете на 1 страничке и все кто знает ее адрес - будут видеть свои камеры.

<iframe width="640" height="480" src="http://online.yandexcamera.ru/yandex/show/215/iframe"></iframe>

Единственное с чем не разобрался - это нужен какой то скриптик проверяющий что камера зависла и чтобы он делал ребут при этом.
поэтому нидхелп.

Еще хотелось бы bash script чтобы удалять старые фотки позже 3-5 дней. чтобы место на диске не переполнялось.

Минус yandexcamera - это легкость перебора камер - меняете 215 на 3 к примеру - и смотрите. паблик - не хорошо, поэтому, если Yandexcamera когда нибудь сломается - то смогу написать собственный PHP движочек и чтобы все делалось автоматом (удаление старых фоток ну и другой функционал) и можно было установить на любой хостинг (опыт есть - мой eurowebcart.ru)


Также планирую создать модуль для CyberWRT - принсервер на основе сервера p910nd. Потому что идеально работает, а народу хочется WiFi принтер поиметь и поставить принтер подальше от компа.

Спасибо ADMINу - именно он своим терпением подвиг на все это.

[shveps]

для сохранения в 1 файл можно подправить /www/cgi-bin/modules/video_driver/stop.cgi

#!/bin/sh
mv -f "$1" '/mnt/Yandex/CAM1/image.JPG'
killall mjpg_streamer

[shveps]

Сделал небольшой PHP скриптик видеонаблюдения.
чтобы не палить источники (на будущее и вообще)
картинки находятся в data (base64). Теперь не определить откуда что тянется.
результат: http://www.eurowebcart.ru/cam.php

можно любое количество камер в //init писать
DIV выстроятся как надо.
поддерживается curl или file_get_contents
в PHP ini должно стоять allow_url_fopen должно быть включено.

PHP код:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<?php
//cam init
$cams=Array (
"Моя комната"=>"http://online.yandexcamera.ru/yandex/show/215/image?",
"Парковка"=>"http://online.yandexcamera.ru/yandex/show/7/image?",
"Парковка2"=>"http://online.yandexcamera.ru/yandex/show/3/image?",
"В отключке"=>"http://online.yandexcamera.ru/yandex/show/5/image?",
);
$salt="abcde12345"; //your secret salt
$refresh_time=50; //sec

$cam=doubleval(@$_GET['cam']);

function img2data ($camnum, $title=string,$req=string) {
if ($req) {
$img="";
$req.=time();
if (function_exists('curl_init')) {
$ch = curl_init($req);
@curl_setopt($ch, CURLOPT_HEADER, FALSE);
@curl_setopt($ch, CURLOPT_FOLLOWLOCATION, TRUE);
@curl_setopt($ch, CURLOPT_RETURNTRANSFER, TRUE);
$img = curl_exec($ch);
curl_close($ch);
} else {
$img=file_get_contents($req);
}
if ($img=="") {
return "<div style=\"padding: 5px;\"><strong>$title</strong></div><div style=\"padding: 5px; width: 320px; height: 240px;\">No Signal</div>";
} else {
$data=base64_encode($img);
return "<div style=\"padding: 5px;\"><strong>$title</strong> ".date("d.m.Y H:i:s",time())."</div><a href=\"data:image/jpg;base64,".$data."\" title=\"FULLSCEEN\" target=\"_blank\"><img id=cam".$camnum." src=\"data:image/jpg;base64," . $data."\" style=\"width: 320px; height: 240px;\"/></a>";
}
}
}

if ($cam==0) {
if (count($cams)>0) {
//".img2data($camnum,$k,$v)."
$camnum=1;
echo "<head><meta http-equiv=\"Content-Type\" content=\"text/html; charset=windows-1251\" /><title>Cams</title></head>
<body>";
while (list($k,$v)=each($cams)) {
echo "<iframe style=\"color:#fff; float: left; margin-right: 5px; padding: 0px; margin-bottom: 5px; background-color: #000; width: 320px; height: 280px; border: 0px; overflow: hidden;\" src=\"".$_SERVER['PHP_SELF']."?cam=$camnum\"></iframe>";
$camnum++;
}
echo "<div style=\"clear: both;\"></div>";

} else {
echo "No cams detected!";
}
} else {
echo "<head><meta http-equiv=\"Content-Type\" content=\"text/html; charset=windows-1251\" /><META HTTP-EQUIV=\"REFRESH\" CONTENT=\"".($refresh_time+$cam).";URL=".$_SERVER['PHP_SELF']."?cam=$cam\"><title>Cam$cam</title></head>
<body style=\"padding:0; margin:0; color:#fff;\">";
$camnum=1;
while (list($k,$v)=each($cams)) {
if ($camnum==$cam) {
echo img2data($cam,$k,$v);
}
$camnum++;
}

}
echo "</body>";
?>
</html>

Enjoy!

PS кому пофиг на палево источника - можно сделать версию побыстрее.

а потом сделаю еще salt и token, чтобы нельзя было вставлять картинки на другие сайты.

[Admin]

Спасибо!
Полезная статья, приеду с отпуска протестирую

[shveps]

Раз используется
mv -f "$1" '/mnt/Yandex/CAM1/image.JPG'
то я подумал, а не поставить ли время и дату на картинку перед ее переименовыванием?

Кто в перле разбирается?
не оно?

use Image::Magick;
my $src = Image::Magick->new;
$src->Read($1);
$src->Annotate(text=>localtime(), y =>10 );
$src->Write($1);

ну и естественно нужно установить

opkg install imagemagick-jpeg
opkg install imagemagick-png
opkg install imagemagick
opkg install imagemagick-tools


у... печалька в репозитарии нету мэджика

root@CyberWrt:/www/> opkg install imagemagick

Collected errors:
* opkg_install_cmd: Cannot install package imagemagick.
Unknown package 'imagemagick'.

есть еще libgd

Package: libgd
Version: 2.0.35-1
Depends: libc, libjpeg, libpng
Provides:
Status: unknown ok not-installed
Section: libs
Architecture: ar71xx
MD5Sum: 6b4a1da9683cf43b0785b12ca2c1bf52
Size: 57434
Filename: libgd_2.0.35-1_ar71xx.ipk
Source: RL: http://www.libgd.org/releases
Description: GD is an open source code library for the dynamic creation of images by programmers. GD creates PNG, JPEG and GIF images, among other formats.

вот буду ее мучать, если роутер вытянет конечно.

апдейт. libgd перескочили на php-gd
а PHP ставить нет желания... и так памяти мало.

будем думать как установить на фотку таймстамп.

[shveps]

Новая версия программы наблюдения с преферансом и поэтессами
с бутстрапом, авторизацией, выходом, открыванием Modal и т.п.

Апдейт! Добавлена функция поворота камеры на 180 градусов! (в IE-8 не переворачивает)

PHP код:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head><meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Cams by eurowebcart.ru</title>
<link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap.css" rel="stylesheet">
<link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap-responsive.css" rel="stylesheet">
<link href="http://getbootstrap.com/2.3.2/assets/css/docs.css" rel="stylesheet">
<link href="http://getbootstrap.com/2.3.2/assets/js/google-code-prettify/prettify.css" rel="stylesheet">
<!--[if lt IE 9]>
<script src="http://getbootstrap.com/2.3.2/assets/js/html5shiv.js"></script>
<![endif]-->
<script src="http://getbootstrap.com/2.3.2/assets/js/jquery.js"></script>
<script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap-transition.js"></script>
<script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap-alert.js"></script>
<script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap-modal.js"></script>
<script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap-dropdown.js"></script>
<script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap-tooltip.js"></script>
<script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap-popover.js"></script>
<script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap-button.js"></script>
<script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap-carousel.js"></script>
<script src="http://getbootstrap.com/2.3.2/assets/js/google-code-prettify/prettify.js"></script>
<?php
//cam init
$cams=Array (
1=>"Моя комната|http://online.yandexcamera.ru/yandex/show/215/image?|rotate180|",
2=>"Парковка|http://online.yandexcamera.ru/yandex/show/7/image?||",
3=>"Парковка 2|http://online.yandexcamera.ru/yandex/show/3/image?||",
4=>"Отключено|http://online.yandexcamera.ru/yandex/show/5/image?||",
);

//here is passwords for access cam view
$passwords=Array (
1=>"pass1", //pasha
2=>"pass2", //andrey
3=>"pass3",
4=>"pass4",
);

$salt="abcde12345"; //your secret salt

$refresh_time=50; //sec

$cam=doubleval(@$_GET['cam']);
$auth=0;
if(isset($_GET['pass'])) {$pass=$_GET['pass']; }elseif(isset($_POST['pass'])){ $pass=$_POST['pass']; }else {$pass="";}
if (!preg_match('/^[a-zA-Z0-9-]+$/i',$pass)) { if ($pass!="") { $auth=2; } $pass="";} 
$hache=md5($_SERVER['HTTP_HOST'].$salt);
session_cache_limiter ('nocache');
session_name($hache);
session_start();
$sid=session_id();
$ids="s".md5($hache);
if (!isset($_SESSION[$ids])){$_SESSION[$ids]=0; }
$divst="";

if ($pass!="") {
if ($pass=="exit") {
$_SESSION[$ids]=0;
} else {
$auth=2;
while (list($k,$v)=each($passwords)) {
if ($v==$pass) {$_SESSION[$ids]=1; $auth=1; }
}
}
}
if ($auth==2) { $divst=" error"; }
unset ($k,$v,$passwords);
if ($_SESSION[$ids]==1) {
function img2data ($camnum, $title=string,$req=string, $rotate=string) {
if ($req) {
$img="";
$req.=time();
if (function_exists('curl_init')) {
$ch = curl_init($req);
@curl_setopt($ch, CURLOPT_HEADER, FALSE);
@curl_setopt($ch, CURLOPT_FOLLOWLOCATION, TRUE);
@curl_setopt($ch, CURLOPT_RETURNTRANSFER, TRUE);
$img = curl_exec($ch);
curl_close($ch);
} else {
$img=file_get_contents($req);
}
if ($img=="") {
return "<div style=\"padding: 5px;\"><i class=\"icon-facetime-video icon-white\"></i> <strong>$title</strong></div><div style=\"padding: 5px;\">No Signal</div>";
} else {
$rclass="";
$rico="";
$rscr="parent.document.getElementById('modalimg').className='';";
if ($rotate!="") { $rclass="class=$rotate"; $rscr="parent.document.getElementById('modalimg').className='$rotate';"; $rico="<i class=\"icon-repeat icon-white\" title=\"$rotate\"></i>";}
$data=base64_encode($img);
return "<div style=\"padding: 5px;\">$rico<i class=\"icon-facetime-video icon-white\"></i> <strong>$title</strong> ".date("d.m.Y H:i:s",time())."</div><a href=\"#fullscreen\" title=\"Fullscreen\"><img onclick=\"parent.document.getElementById('modalimg').src=this.src; parent.document.getElementById('myModalLabel').innerHTML='".str_replace("'", "",str_replace("\"", "", strip_tags($title)))."';".$rscr."parent.$('#myModal').modal('show');\" id=cam".$camnum." src=\"data:image/jpg;base64," . $data."\" style=\"width: 320px; height: 240px; cursor: zoom-in;\"".$rclass." /></a>";
}
}
}

if ($cam==0) {
if (count($cams)>0) {
$camnum=1;
echo "<style>
.rotate180 {
     -moz-transform:    rotate(180deg)
                         scale(1);
     -o-transform:      rotate(180deg)
                         scale(1);
     -webkit-transform: rotate(180deg)
                         scale(1);
     transform:         rotate(180deg)
                         scale(1);
}
</style></head><body style=\"padding:10px; margin:0; color:#000; background-color:#fff;\"><div class=well>
<a href=\"".$_SERVER['PHP_SELF']."?pass=exit\" class=\"btn btn-info pull-right\" style=\"margin-left: 10px;\"><i class=\"icon-off icon-white\"></i> Exit</a>";
while (list($k,$v)=each($cams)) {
echo "<iframe class=\"thumbnail pull-left\" style=\"margin-right: 5px; margin-bottom: 5px;width: 320px; height: 270px; overflow: hidden;\" src=\"".$_SERVER['PHP_SELF']."?".SID."&cam=$camnum\"></iframe>";
$camnum++;
}
echo "<div style=\"clear: both;\"></div></div>";
echo " <!-- Modal -->
    <div id=\"myModal\" class=\"modal hide\" tabindex=\"-1\" role=\"dialog\" aria-labelledby=\"myModalLabel\" aria-hidden=\"true\">
    <div class=\"modal-header\">
    <button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-hidden=\"true\">&times;</button>
    <h3 id=\"myModalLabel\" style=\"color: #000;\"></h3>
    </div>
    <div class=\"modal-body\">
    <p><img id=modalimg /></p>
    </div>
    </div>";
} else {
echo "No cams detected!";
}
} else {
echo "<META HTTP-EQUIV=\"REFRESH\" CONTENT=\"".($refresh_time+$cam).";URL=".$_SERVER['PHP_SELF']."?".SID."&cam=$cam\">
<style>
.rotate180 {
     -moz-transform:    rotate(180deg)
                         scale(1);
     -o-transform:      rotate(180deg)
                         scale(1);
     -webkit-transform: rotate(180deg)
                         scale(1);
     transform:         rotate(180deg)
                         scale(1);
}
</style>
</head><body style=\"padding:0; margin:0; color:#fff; background-color:#000;\">";
$camnum=1;
while (list($k,$v)=each($cams)) {
if ($camnum==$cam) {
$t=explode("|", $v);
echo img2data($cam,$t[0],$t[1],$t[2]);
}
$camnum++;
}

}
} else {
echo "</head><body style=\"padding:10px; margin:0; color:#000; background-color:#fff;\">
<div class=\"well\" align=center>
<script type=\"text/javascript\">
function submit_auth(e)
{
    if (e.keyCode == 13)
    {
        document.getElementById('form').submit();
        return false;
    }
}

</script>
<form action=\"".$_SERVER['PHP_SELF']."\" id=form method=POST>
<input type=hidden name=cam value=$cam>
<div class=\"control-group".$divst."\">
<br>
<h3>Enter Password:</h3>
<br><input type=password name=pass value=\"\" placeholder=\"password\" onkeyup=\"submit_auth(event);\" autocomplete=\"off\">
<br><br></div>
</form>

</div>";
}
?>
</body></html>

Апдейт! Добавлена функция поворота камеры на 180 градусов. (в IE-8 не переворачивает)

[shveps]

Как видите паролей много можно добавить, а потом убрать не нужные.
http://www.eurowebcart.ru/cam.php
Вы можете использовать для демки pass1

[shveps]

Сообщаю. Если отключить звуковую усбшную карту то удается захватывать и выкладывать на яндекс диск 960х720. Жаль. Остался без вебрадио.

[Admin]

А разве звуковая карта мешает захвату с камеры?

[shveps]

видать даже не работая - потребляет ресурс/питание.

Кстати кому интересно - я сделал циклическую запись кадров (кол-во настраивается) с определенной yandex-камеры (правда запись ведется только во время просмотра, но это решается серверным cron)
с просмотром таймлапса в ускоренном виде и возможностью паузы и покадровой перемотки туда-сюда (на основе карусели твиттера бутстрапа)
получается нехилое такое псевдо-видео с разрешением 720p и 5 кадровсекунду. в принципе наверное могу склеивать кадры в MJPG поток.

ссылка такая же (к сожалению первые кадры писал на локалхосте и метка времени сбилась при закачке на фтп), но начиная с 0-00 там будет правильный таймкод.

сам PHP код пришлю если надо, он немного поболее стал сами понимаете.

Кстати дневные кадры в 2-3 раза больше ночных.