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

[Vovix]

Доброго времени суток!
Решение не претендует на абсолютную истину, возможно можно сделать проще, но у меня получилось так:

Часто видел вопрос:

прописал камеру:

Код: Выделить всё

<img src="http://192.168.0.103:8080/">

теперь если смотреть из локалки, всё нормально, а вот если же смотреть из вне, соответственно ничего не отображает.
Так же и наоборот. То есть если в коде я пропишу внешний IP, то из вне отображает, а из локалки нет.

Как можно добавить такую камеру, чтоб её было видно отовсюду?

Я тоже в свое время задумался над этой проблемой, и.... смог её решить...

суть такова - нужно чтобы система определяла с какого ip подключен сейчас клиент и соответственно подставляла
либо ip из локалки (192.168.1.103 например, а 192.168.1.100 это адрес MJD)
либо ip внешний (78.88.18.5 например), но во втором случае обязательно должна быть сделана переброска портов в роутере (через который нам инет идет):

вот пример как я сделал в "Домашних страницах" (одна web камера и четыре камеры с видеорегистратора):

ВидеокамерыПоказать

<table border="1" cellspacing="0" cellpadding="15" width="100%" height="90%">
<tr>
<td align="center">
<script type="text/javascript" src="/user_js.php"></script>
<script type="text/javascript">
var height_array = new Array();
var width_array = new Array();
width_array[1] = 400;
height_array[1] = 300;
ipadr = "78.88.18.5";
ipvid = "78.88.18.5";

if ( (~glUserIpAdderss.indexOf ("192.168")) || (glUserIpAdderss == "127.0.0.1") ) {
ipadr = "192.168.1.100";
ipvid = "192.168.1.103";
}

document.write ('<img src="http://' + ipadr + ':8088/loading.jpg" class="webcam" id="webcam1" onmousedown="PTZMouseDown1(event)" width="400" height="300" alt="Live Stream" />');

<!--
currentCamera1= 1;
errorimg1= 0;
DoIt1();

document.images.webcam1.onload = DoIt1();
document.images.webcam1.onerror = ErrorImage1();
function LoadImage1()
{
uniq1 = Math.random();
document.images.webcam1.src = "http://"+ipadr+":8088/cam_" + currentCamera1 + ".jpg?uniq="+uniq1;
document.images.webcam1.onload = DoIt1;
}
function PTZMouseDown1(e)
{
var IE = document.all?true:false;
var x,y;
var myx,myy;
var myifr = document.getElementById("_iframe-ptz");
tp = getElPos1();
myx = tp[0];
myy = tp[1];
if(IE){
var scrollX = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft;
var scrollY = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop;
x = event.clientX - myx + scrollX;
y = event.clientY - myy + scrollY;
} else {
x = e.pageX - myx;
y = e.pageY - myy;
}
if ((width_array[currentCamera1] != null) && (width_array[currentCamera1] > 0)) x = Math.round((x * 400) / width_array[currentCamera1]);
if ((height_array[currentCamera1] != null) && (height_array[currentCamera1] > 0)) y = Math.round((y * 300) / height_array[currentCamera1]);
if (x > 400) x = 400;
if (y > 300) y = 300;
if (myifr != null) myifr.src = "http://"+ipadr+":8088/ptz?src=" + currentCamera1 + "&moveto_x=" + x + "&moveto_y=" + y +"";
return true;
}
function getElPos1()
{
el = document.images.webcam1;
x = el.offsetLeft;
y = el.offsetTop;
elp = el.offsetParent;
while(elp!=null)
{ x+=elp.offsetLeft;
y+=elp.offsetTop;
elp=elp.offsetParent;
}
return new Array(x,y);
}
function ErrorImage1()
{
errorimg1++;
if (errorimg1>3){
document.images.webcam1.onload = "";
document.images.webcam1.onerror = "";
document.images.webcam1.src = "offline.jpg";
}else{
uniq1 = Math.random();
document.images.webcam1.src = "http://"+ipadr+":8088/cam_" + currentCamera1 + ".jpg?uniq="+uniq1;
}
}
function DoIt1()
{
errorimg1=0;
window.setTimeout("LoadImage1();", 40);
}
//-->
</script>
</td>
<td>
</td>
</tr>
<tr>
<td align="center">
Камера №1<br/>

<script type="text/javascript">

document.write ('<embed src="back.GIF" name="movie1" qtsrc="rtsp://' + ipvid + ':554/user=admin&password=&channel=1&stream=0.sdp?real_stream--rtp-caching=100" controller="false" width="400" height="300" loop="false" scale="tofit" wmode="Transparent" autoplay="true" kioskmode="true" enablejavasript="true" href="javaScript:void(0)" target="Myself" allowfullscreen="true" bgcolor="black" plugin="quicktimeplugin" type="video/quicktime" pluginspage="http://www.apple.com/quicktime/">');

</script>

</td>
<td align="center">
Камера №2<br/>

<script type="text/javascript">

document.write ('<embed src="back.GIF" name="movie1" qtsrc="rtsp://' + ipvid + ':554/user=admin&password=&channel=2&stream=0.sdp?real_stream--rtp-caching=100" controller="false" width="400" height="300" loop="false" scale="tofit" wmode="Transparent" autoplay="true" kioskmode="true" enablejavasript="true" href="javaScript:void(0)" target="Myself" allowfullscreen="true" bgcolor="black" plugin="quicktimeplugin" type="video/quicktime" pluginspage="http://www.apple.com/quicktime/">');

</script>

</td>
</tr>
<tr>
<td align="center">
Камера №3<br/>
<script type="text/javascript">

document.write ('<embed src="back.GIF" name="movie1" qtsrc="rtsp://' + ipvid + ':554/user=admin&password=&channel=3&stream=0.sdp?real_stream--rtp-caching=100" controller="false" width="400" height="300" loop="false" scale="tofit" wmode="Transparent" autoplay="true" kioskmode="true" enablejavasript="true" href="javaScript:void(0)" target="Myself" allowfullscreen="true" bgcolor="black" plugin="quicktimeplugin" type="video/quicktime" pluginspage="http://www.apple.com/quicktime/">');

</script>

</td>
<td align="center">
Камера №4<br/>
<script type="text/javascript">

document.write ('<embed src="back.GIF" name="movie1" qtsrc="rtsp://' + ipvid + ':554/user=admin&password=&channel=4&stream=0.sdp?real_stream--rtp-caching=100" controller="false" width="400" height="300" loop="false" scale="tofit" wmode="Transparent" autoplay="true" kioskmode="true" enablejavasript="true" href="javaScript:void(0)" target="Myself" allowfullscreen="true" bgcolor="black" plugin="quicktimeplugin" type="video/quicktime" pluginspage="http://www.apple.com/quicktime/">');

</script>

</td>
</tr>
</table>

еще нужен фаил: user_js.php (он не мой, где брал не помню но суть понятна)

user_js.phpПоказать

<?php

/*отключаем кеширование*/
header("Last-Modified: ".gmdate("D, d M Y H:i:s")." GMT");
header("Cache-Control: no-cache, must-revalidate");
header("Cache-Control: post-check=0,pre-check=0");
header("Cache-Control: max-age=0");
header("Pragma: no-cache");

/*Заголовок о том что это java script (необязательно) (для красоты)*/
header("Content-type: text/javascript");
?>

var glUserIpAdderss = "<?=$_SERVER['REMOTE_ADDR'];?>";
var glUSerLang = "<?=$_SERVER['HTTP_ACCEPT_LANGUAGE'];?>";
var glUserAgent = "<?=$_SERVER['HTTP_USER_AGENT'];?>";

почему такие "костыли"? - потому, что я не смог использовать просто PHP в "Домашних страницах", а java script можно!

может кому пригодиться (не забываем про проброску порта в роутере)!

ip адреса изменены (не реальные)

[denis]

Честно сказать может с домашними страницами все так и сложно, но если просто нахожусь в локалке, то в браузере набираю внешний IP с внешним портом и прекрасно смотрю (так как внешний я помню, а внутренний не всегда))). Как я понимаю это зависит от роутера, может не у всех роутеров включена функция ?! которая позволяет сделать такую петлю локальный комп -> внешний IP роутера - > внутренний IP камеры. Может знающие подскажут как это называется?
p.s. нашел: "Эта штука называется "обратная петля NAT", не все роутеры это умеют" Мне кажется истина где-то рядом)

[Vovix]

Честно сказать может с домашними страницами все так и сложно, но если просто нахожусь в локалке, то в браузере набираю внешний IP с внешним портом и прекрасно смотрю (так как внешний я помню, а внутренний не всегда))). Как я понимаю это зависит от роутера, может не у всех роутеров включена функция ?! которая позволяет сделать такую петлю локальный комп -> внешний IP роутера - > внутренний IP камеры. Может знающие подскажут как это называется?
p.s. нашел: "Эта штука называется "обратная петля NAT", не все роутеры это умеют" Мне кажется истина где-то рядом)

Да, но у меня как раз роутер (и не один) при попытке обращения изнутри (из локалки) на свой внешний ip приводит на вход в настройки самого роутера!

[Vovix]

Ещё один вариант:
[#module name="thumb" url="http://192.168.0.11:8080/photoaf.jpg" width="290" enlarge="1"#]

Этот код "вытягивает" картинку и сохраняет её локально, чтобы путь был уже без привязки к IP.

[Vovix]

Ещё один вариант:
[#module name="thumb" url="http://192.168.0.11:8080/photoaf.jpg" width="290" enlarge="1"#]

Этот код "вытягивает" картинку и сохраняет её локально, чтобы путь был уже без привязки к IP.

Сергей, а как быть с таким кодом в этом случае?

Код: Выделить всё

<embed src="back.GIF" name="movie1" qtsrc="rtsp://192.168.0.103:554/user=admin&password=&channel=1&stream=0.sdp?real_stream--rtp-caching=100" controller="false" width="400" height="300" loop="false" scale="tofit" wmode="Transparent" autoplay="true" 
kioskmode="true" enablejavasript="true" href="javaScript:void(0)" target="Myself" allowfullscreen="true" bgcolor="black" 
plugin="quicktimeplugin" type="video/quicktime" pluginspage="http://www.apple.com/quicktime/"> 

[sergejey]

Код, что выше, работает только для картинок, но не для потока. Для потока надо либо пробрасывать порты либо организовывать какой-то ретранслятор -- кодом никака не обойтись.

[Vovix]

Код, что выше, работает только для картинок, но не для потока. Для потока надо либо пробрасывать порты либо организовывать какой-то ретранслятор -- кодом никак не обойтись.

Т.е. моё решение имеет право на существование?
Оно работает для потока.

[sergejey]

Код, что выше, работает только для картинок, но не для потока. Для потока надо либо пробрасывать порты либо организовывать какой-то ретранслятор -- кодом никак не обойтись.

Т.е. моё решение имеет право на существование?
Оно работает для потока.

Я имел в виду, что мой код с module работает только для картинки, а код с embed будет работать только в локальной сети, т.к. там прописан локальный IP-адрес.

[kd0t]

Когда зашел на MD вне локалки, столкнулся с проблемой отсутствия потоков камер. Видеонаблюдением ведает Motion. Для решения проблемы, проксировал вывод Motion, Apache`м , крутящим MD, при этом не нужно открывать доступ извне к камерам или думать о пробросе портов, а дать доступ с внешнего ip только к MD. Ниже вырвано из общего контекста, но думаю в тему(localhost:хххх меняем на ip и порт потока камеры):

Простое проксирование вывода motion apache'мПоказать

При использовании motion, для удобства работы вне домашней сети, можно настроить Apache проксировать его вывод.
Редактируем /etc/httpd/conf/httpd.conf Настройки приведены для Apache 2.4 и выше :

#Должна быть раскомментирована строка
LoadModule proxy_module modules/mod_proxy.so 
#Добавляем в конце файла строку
Include conf/extra/proxy_module.conf

Далее создаем этот самый proxy_module.conf:

touch /etc/httpd/conf/extra/proxy_module.conf 

и наполняем содержимым:

<IfModule proxy_module>
 ProxyRequests Off
 <Proxy *>
   AddDefaultCharset off
   Require all granted
 </Proxy>
 ProxyVia On

 ProxyPass /motion/cam1 http://localhost:8001 #Где /motion/cam1 - адрес по которому будет доступна картинка
#http://localhost:8001, берем из нашего /etc/motion/motion.conf, если камера одна
# или из /etc/motion/thtread1.conf,- если камер несколько 
#добавляем аналогичные строки по аналогии из thread2 - threadN - для всех наших камер.
</IfModule>

[Ivan]

Я сделал симлинк в md на директорию ZoneMinder