Форум » IP Kamera 9070-CS/-CSO/-CSP/-CSW/-CSWO/-IR/-IRP/-IRW/Basic/Lite (PoE/WiFi) » Отображение картинки с камеры на своем сайте. » Ответить
Отображение картинки с камеры на своем сайте.
Guest: Не требует ActiveX. Работает с браузерами: IE, Opera, Firefox, ... . Скачать. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <HTML> <HEAD> <TITLE>Пример работы с IP камерой (автоматическое обновление картинки).</TITLE> <META HTTP-EQUIV="content-type" CONTENT="text/html; charset=windows-1251"> <SCRIPT TYPE="text/javascript"> <!-- var cDelay=30; //Задержка между кадрами (мс). var eDelay=cDelay; //Интервал между попытками соединения в случае неудачи (мс) var eStep=2000; //Приращение интервала (мс) var cAdr='122.116.137.123:19072'; //Адрес камеры : порт. var cLogin='guest'; //Логин. var cPass='guest'; //Пароль. var cStr='http://'+cAdr+'/snapshot.cgi?name='+cLogin+'&pw='+cPass; window.status=document.title; document.oncontextmenu=new Function('return false'); function refreshImage() { var cTmp=new Date(); var img=document.getElementById('camImg'); img.src=cStr+'&'+cTmp; } //--> </SCRIPT> </HEAD> <BODY> <DIV ALIGN="center"> <IMG ID="camImg" SRC="none" WIDTH="320" HEIGHT="176" BORDER="1" ALT="Текущая картинка с камеры" onload="window.setTimeout('refreshImage()', cDelay);eDelay=cDelay" onerror="window.setTimeout('refreshImage()', eDelay);eDelay+=eStep"> <DIV STYLE="position:relative;bottom:176px;left:120px;color:#ffffff;font-weight:bold">Demo</DIV> </DIV> </BODY> </HTML>
Ответов - 31, стр:
1 2 All
Guest: Вариант с использованием CNT. Позволяет в случае выдачи провайдером динамических внешних IP адресов автоматически находить камеры в Internet по их MAC адресу. Данная функция должна быть включена в настройках камеры (Network -> IP Service -> Enable IP Service). На той же закладке можно посмотреть MAC адрес уст-ва. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <HTML> <HEAD> <TITLE>Пример работы с IP камерой (автоматическое обновление картинки).</TITLE> <META HTTP-EQUIV="content-type" CONTENT="text/html; charset=windows-1251"> <SCRIPT TYPE="text/javascript" SRC="http://122.116.138.129/test/Blog_var.asp?MAC=009072212121&w=640&h=352"></SCRIPT> <SCRIPT TYPE="text/javascript"> <!-- var cDelay=30; //Задержка между кадрами (мс). var eDelay=cDelay; //Интервал между попытками соединения в случае неудачи (мс) var eStep=2000; //Приращение интервала (мс) var cAdr=g_CAMERA_IP; //Адрес камеры : порт. var cLogin='guest'; //Логин. var cPass='guest'; //Пароль. var cStr='http://'+cAdr+'/snapshot.cgi?name='+cLogin+'&pw='+cPass; window.status=document.title; document.oncontextmenu=new Function('return false'); function refreshImage() { var cTmp=new Date(); var img=document.getElementById('camImg'); img.src=cStr+'&'+cTmp; } //--> </SCRIPT> </HEAD> <BODY> <DIV ALIGN="center"> <IMG ID="camImg" SRC="none" WIDTH="640" HEIGHT="352" BORDER="1" ALT="Текущая картинка с камеры" onload="window.setTimeout('refreshImage()', cDelay);eDelay=cDelay" onerror="window.setTimeout('refreshImage()', eDelay);eDelay+=eStep"> <DIV STYLE="position:relative;bottom:352px;left:270px;color:#ffffff;font-weight:bold">Demo</DIV> </DIV> </BODY> </HTML>
Guest: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <HTML> <HEAD> <TITLE>Пример работы с IP камерой.</TITLE> <META HTTP-EQUIV="content-type" CONTENT="text/html; charset=windows-1251"> <META HTTP-EQUIV="refresh" CONTENT="60; URL=http://www.aviosys.ru/"> <SCRIPT TYPE="text/javascript"> <!-- var cDelay=30; //Задержка между кадрами (мс). var eDelay=cDelay; //Интервал между попытками соединения в случае неудачи (мс) var eStep=2000; //Приращение интервала (мс) var cAdr='122.116.137.123:19072'; //Адрес камеры : порт. var cLogin='guest'; //Логин. var cPass='guest'; //Пароль. var cWidth='320'; //Горизонтальное разрешение камеры. var cHeight='176'; //Вертикальное разрешение камеры. var cStrImg='http://'+cAdr+'/snapshot.cgi?name='+cLogin+'&pw='+cPass; var cStrVid='http://'+cLogin+':'+cPass+'@'+cAdr+'/ipcam/mjpeg.cgi'; window.status=document.title; document.oncontextmenu=new Function('return false'); function refreshImage() { var cTmp=new Date(); var img=document.getElementById('camImg'); img.src=cStrImg+'&tm='+cTmp.getTime().toString(); } //--> </SCRIPT> </HEAD> <BODY> <DIV ALIGN="center"> <SCRIPT TYPE="text/javascript"> <!-- var output; if ((navigator.appName == "Microsoft Internet Explorer") && (navigator.platform != "MacPPC") && (navigator.platform != "Mac68k")) { // IE output='<OBJECT STYLE="z-index: 1" ID="camActx" '; output+='CODEBASE="http://www.aviosys.ru/download/last/AMC.cab" '; output+='CLASSID="CLSID:DE625294-70E6-45ED-B895-CFFA13AEB044" '; output+='WIDTH="'+cWidth+'" '; output+='HEIGHT="'+cHeight+'" BORDER="1">'; output+='<PARAM NAME="MediaURL" VALUE="http://'; output+=cAdr; output+='/ipcam/mjpeg.cgi">'; output+='<param name="MediaType" value="mjpeg-unicast">'; output+='<param name="ShowStatusBar" value="0">'; output+='<param name="ShowToolbar" value="0">'; output+='<param name="AutoStart" value="1">'; output+='<param name="StretchToFit" value="1">'; output+='<param name="MediaUsername" value="' + cLogin + '">'; output+='<param name="MediaPassword" value="' + cPass + '">'; output+='Если отображается данное сообщение, необходимо установить ActiveX компоненту для просмотра.'; output+='</OBJECT>'; } else { if (navigator.appName=='Netscape') { // Firefox var cTmp=new Date(); output='<IMG SRC="'; output+=cStrVid+'?tm='+cTmp.getTime().toString()+'" '; output+='WIDTH="'+cWidth+'" '; output+='HEIGHT="'+cHeight+'" '; output+='BORDER="1" '; output+='ALT="Видео с камеры">'; } else { // Opera и другие output='<IMG ID="camImg" '; output+='SRC="none" '; output+='WIDTH="'+cWidth+'" '; output+='HEIGHT="'+cHeight+'" '; output+='BORDER="1" '; output+='ALT="Текущая картинка с камеры" '; output+='onload="window.setTimeout(refreshImage, cDelay);eDelay=cDelay" '; output+='onerror="window.setTimeout(refreshImage, eDelay);eDelay+=eStep">'; } output+='<DIV STYLE="position:relative;bottom:30px;left:125px;color:#ffffff">Demo</DIV>'; } document.write(output); //--> </SCRIPT> </DIV> </BODY> </HTML>
Denis_Abramov: сделал для теста страницу на укоз.ру - воткнул там камеру (по первому посту в этом топике) если захожу со своего компа то камеру видно, если с других компов.. это антивирус(файервол) не пускает? как можно дать доступ правильнее чтоб всякий шлак не лез в сеть посторонний а только просмотр камеры? антивирус Internet Security (Касперского) адреса выдаются провайдером динамически Спасибо ЗЫЖ я не очень силен в этих делах, если вопрос покажется простым;)
Guest: Вы наверное указали в качестве IP внутренний адрес камеры в локальной сети, он доступен только с компьютеров которые в ней находятся. Для того чтобы камеру было видно в Интернет и в то же время к вам в локалку никто не влез, необходим внешний IP от провайдера (можно и динамический, чтобы узнать текущий набираем в Яндексе - мой IP адрес) и настроить проброс портов на оборудовании, через которое осуществляется доступ в глобальную сеть. У вас какая схема подключения к Интернет?
Denis_Abramov: Guest у нас стоит маршрутизатор вход на него с ADSL а выход на хаб и компы по сети. "проброс" для меня новое слово айпи я узнал - он и в настройках камеры виден - его набираю попадаю в ВЭБ интерфейс маршрутизатора
Guest: Все верно, так и должно быть. Значит нужно выполнить эту процедуру на ADSL модеме. В меню она может называться - port forwarding или virtual servers. Пример - тут .
Denis_Abramov: ниче подобного не нашел я так понял это не маршрутизатор а АДСЛ модем, в нем возможно нет таких функций.. Zyxel 660RU-T1 надо ставить маршрутизатор еще дополнительно? или где?
Guest: Нет, это все же роутер, у Zyxel данные настройки находятся в разделе Advanced -> NAT -> SUA only. Примерно так.
Denis_Abramov: Guest в том пункте таблица в каждой сточке можно заполнить Start port, End port, Ip address у меня внутренний адрес камеры 192.168.1.33 порт 80, адрес маршрутизатора 192.168.1.100 я набрал в полях порты: 80 и 80 а в поле адрес ввел адрес камеры - или я не то делаю?
Guest: Правильно делаете. Для проверки работы нужно попросить чтобы кто то из Интернет попробовал подключиться по внешнему адресу к камере. Либо поставить Operа и включить в ней кнопку turbo. Из локальной сети по этому адресу всегда будете попадать на страничку модема.
Denis_Abramov: но адрес внешний - динамический- т.е. его надо постоянно на сайте менять?
Guest: Нет, для предотвращения этого существует специальный сервис - DDNS. Поднять клиент можно на модеме или самой камере. Как настроить - www.aviosys.ru/faq/ddns.html .
Denis_Abramov: поставил Оперу с диким тормозами но по внешнему адресу попадаю на камеру- видео картинки нет - тормозит жутко, с коммуникатора попадаю лучше - отображается картинка с камеры но она статична (видно тоже тормоза) вставил этот внешний адрес на свой сайт вместо внутреннего адреса - и получил ноль, т.е. захожу ч/з оперу на свой сайт - камера не отображается
Guest: Опера на мобильнике так же как и на обычном компьютере при включении турбо подключается к камере не напрямую а через промежуточный сервер (который периодически перегружен) попутно пережимая картинки и обрезая видео. Приведена для примера чтобы вы смогли проверить видна камера из локальной сети или нет. Наличие или отсутствие тормозов зависит от скорости исходящего канала на модеме и далее до точки просмотра, в также настроек камеры. Ссылку киньте в личку.
Denis_Abramov: скинул
Guest: К сожалению и тот и другой адреса были недоступны в течении дня.
Denis_Abramov: отправил свежий ))
Denis_Abramov: еще свежее отправил
Guest: С третьего раза поймал. Камеру с Интернета видно, картинка есть. Только код вы модифицировали не совсем верно. Чтобы отображалось видео, вам нужен 3 пример в данной ветке. И разрешение просто присвоив значение переменной не поменяешь. Настройте все же DDNS по инструкции и посмотрите не стоит ли в модеме поднимать соединение по запросу вместо постоянного, слишком часто адрес меняется.
Denis_Abramov: спасибо буду пытать дальше
полная версия страницы