<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Generic Browser Interface Demo For Your FI9821W IP Cameras</title>
<meta content="text/html; charset=utf-8" http-equiv=content-type>
<STYLE type='text/css'>
BODY { MARGIN: 0px; font-size: 100%;}
</STYLE>
<script type='text/javascript' src='http://code.jquery.com/jquery-latest.js'></script>
<script type='text/javascript' language="javascript">
var e=navigator.userAgent.toLowerCase();
var isOpera=e.indexOf("opera")!=-1;
var isIE=document.all&&e.indexOf("msie")!=-1&&!isOpera;
if (isIE) document.execCommand("ClearAuthenticationCache");
//***********************************************************************************
// *
// Generic Browser Interface for Foscam FI9821W Camera V1.0 *
// Copyright By TheUberOverLord AKA Don Kennedy [email protected] *
// All Rights Reserved *
// Saves Bandwidth and Includes Zoom On Image Click *
// Reset Zoom to Normal By Double Click On Image *
// *
// More here: http://foscam.us/forum/free-generic-browser-interface-for-foscam-fi9821w-cameras-t4341.html
// *
// You MUST enter the local IP address and port or your ISP IP address and port *
// or your DDNS and port ("If you have properly setup the camera for remote access")*
// Example: var IPandPort = "192.168.1.111:91"; ("Local IP Address and Port") *
// Example: var IPandPort = "78.102.134.11:91"; ("ISP IP Address and Port") *
// Example: var IPandPort = "mycam.ddns.org:91"; ("DDNS IP Address and Port") *
// *
var IPandPort = ""; // <- ***** Change This ***** *
// *
// You MUST enter a valid user and password here there will not be any *
// prompt to login. Note: Please Don't use a Admin login, if this will be public *
// otherwise people will be able to change the camera configuration. *
// Both of the values below are case sensitive. *
// *
// Example: var user = "operator"; ("Operator Id for camera") *
// Example: var user = "vistor"; ("Visitor Id for camera") *
// *
// NOTE: A Visitor Level User Id will NOT be able to use PTZ Controls even if they *
// display. So. If you want to allow PTZ Controls please use a Operator level *
// User Id. *
// *
var user = ""; // <- ***** Change This ***** *
// *
// Example: var pwd = "oper"; ("Operator password for camera") *
// Example: var pwd = "visit"; ("Visitor password for camera") *
// *
var pwd = ""; // <- ***** Change This ***** *
// *
// This allows you to change the width of the camera video resolution displayed. *
// A value of "" will use the default width. The aspect for height will sync. *
// This value is an internal value for this Interface and does not actually change *
// or modify your camera video or image settings. *
// *
var camResolution = "640"; // <- ***** Change This? ***** *
// *
// If your camera is mounted upside down. Set this to "Y" otherwise leave it as ""; *
// *
var camFlipped = ""; // <- ***** Change This? ***** *
// *
// Note: The below does NOT really change your camera FPS. It is an internal rate *
// Specific to this interface ONLY! The purpose is to minimize bandwidth while*
// monitoring your cameras, without actually changing the actual FPS used *
// for the camera for alarm emails, FTP and recordings. *
// *
// Because this interface supports infinite zooms by clicking the image as *
// many times as you wish, double clicking the image to reset the image to *
// Normal resolution. You maybe able to use a smaller resolution than before *
// if you choose to, to help minimize exceeding any ISP bandwidth limits as *
// well as control the overhead on your local network. *
// *
// Example: var MyFPS = 33 ms is 30 FPS 114KBps at 160*120, 228KBps at 320*240 and *
// 456KBps with 640*480 Resolution. *
// *
// Example: var MyFPS = 67 ms is 15 FPS 57KBps at 160*120, 114KBps at 320*240 and *
// 228KBps with 640*480 Resolution. *
// *
// Example: var MyFPS = 100 ms is 10 FPS 38KBps at 160*120, 76KBps at 320*240 and *
// 152KBps with 640*480 Resolution. *
// *
// Example: var MyFPS = 200 ms is 5 FPS 19KBps at 160*120, 38KBps at 320*240 and *
// 76KBps with 640*480 Resolution. *
// *
// Example: var MyFPS = 1000 ms is 1 FPS 4KBps at 160*120, 8KBps at 320*240 and *
// 16KBps with 640*480 Resolution. *
// *
// Example: var MyFPS = 5000 ms is 1 Frame every 5 seconds 4KBp5s at 160*120, *
// 8KBp5s at 320*240 and 16KBp5s with 640*480 Resolution. *
// *
var MyFPS = 33; // <- ***** Change This? ***** ("This is 30 FPS") In MilliSeconds. *
// *
// Note: If the camera can't reach the FPS the maximum will be shown in the stats. *
// To see the highest set this to 33 or change the FPS to see your maximum. *
// *
// Zoom percentage. Generally a 50 percent increase is best, but you can change the *
// Zoom percentage here to be anything you want from 1 to 100. Each click on the *
// image itself will increase Zoom by this percentage, a double click on the image *
// itself, will reset the image to no Zoom. *
// *
var MyZoom = 50; // <- ***** Change This? ***** to be +- more tha 50 percent Zoom. *
// *
// This handles the FPS and Bytes Per second Statistics Gathering and Display. *
// *
// Note: If DisplayStatsEvery = ""; No Statatistics for FPS and Bytes per second *
// will be gathered/displayed. Bytes Per Second statistics can only be shown *
// when using a IE ("Internet Explorer") 32 or 64 bit browser. *
// *
var DisplayStatsEvery = "5"; // < *** Change This? *** In Seconds every 5 Seconds. *
// *
// This will display the PTZ controls. *
// *
var ShoWPTZControls = "Y"; // < *** Change This? *** ""; = No, "Y"; = yes. *
// *
// This will display the ability to change FPS. *
// *
var ShoWFPS = "Y"; // < *** Change This? *** ""; = No, "Y"; = yes. *
// *
//***********************************************************************************
// Please don't change anything below, report any problems using the email above *
// **********************************************************************************
//
var img = new Image();
var imgObj;
var originalWidth = 0;
var orignalHeight = 0;
var countFPS = 0;
var totalKBps = 0;
var firstTime = true;
var unique_name = (new Date()).getTime();
var ptzMoveTopLeft = "ptzMoveTopLeft";
var ptzMoveBottomLeft = "ptzMoveBottomLeft";
var ptzMoveLeft = "ptzMoveLeft";
var ptzMoveUp = "ptzMoveUp";
var ptzMoveDown = "ptzMoveDown";
var ptzMoveRight = "ptzMoveRight";
var ptzMoveBottomRight = "ptzMoveBottomRight";
var ptzMoveTopRight = "ptzMoveTopRight";
function goforit(s)
{
var rxi = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
var rxo = "NOPQRSTUVWXYZABCDEFGHIJKLMnopqrstuvwxyzabcdefghijklm5678901234";
var map = [];
var buf = "";
for (z = 0; z <= rxi.length; z++) {map[rxi.substr(z, 1)] = rxo.substr(z, 1)};
for (z = 0; z <= s.length; z++)
{
var c = s.charAt(z);
buf += (c in map ? map[c] : c);
}
return buf;
}
var url = window.location.pathname;
var filename = url.substring(url.lastIndexOf('/')+1);
var checkurl = decodeURIComponent(window.location.href).toLowerCase();
if ((location.search.length > 0) && (checkurl.length < 300) && (checkurl.length > 26) && (checkurl.match(/=$/) == null))
{
var parameters = location.search.substring(1).split("&");
var temp = parameters[0].split("=");
if (parameters.length == 3)
{
if (goforit(temp[0]) == "thecameraname")
IPandPort = goforit(unescape(temp[1]));
temp = parameters[1].split("=");
if (goforit(temp[0]) == "user")
user = goforit(unescape(temp[1]));
temp = parameters[2].split("=");
if (goforit(temp[0]) == "pwd")
pwd = goforit(unescape(temp[1]));
}
}
else if (IPandPort == '')
document.write('Invalid Camera IP Address or DDNS and Port or User Id or Password. Please try again.');
function redirect()
{
}
function flipped()
{
ptzMoveTopLeft = "ptzMoveBottomRight";
ptzMoveBottomLeft = "ptzMoveTopRight";
ptzMoveLeft = "ptzMoveRight";
ptzMoveUp = "ptzMoveDown";
ptzMoveDown = "ptzMoveUp";
ptzMoveRight = "ptzMoveLeft";
ptzMoveBottomRight = "ptzMoveTopLeft";
ptzMoveTopRight = "ptzMoveBottomLeft";
}
function preload()
{
img.src= "http://"+IPandPort+"/"+"cgi-bin"+"/"+"CGIProxy.fcgi?cmd=snapPicture2&usr="+user+"&pwd="+pwd+"&cnt="+(unique_name++);
}
function changesrc()
{
img1.src=img.src;
preload();
setTimeout(changesrc,MyFPS);
}
function update()
{
imgObj = document.getElementById('img1');
imgObj.src = img.src;
img.src = "http://"+IPandPort+"/"+"cgi-bin"+"/"+"CGIProxy.fcgi?cmd=snapPicture2&usr="+user+"&pwd="+pwd+"&cnt="+(unique_name++);
if (originalWidth == 0)
{
originalWidth = img1.clientWidth;
originalHeight = img1.clientHeight;
}
if (firstTime)
{
document.getElementById('testing123').style.display = 'block';
document.getElementById('testing123').style.visibility = 'visible';
firstTime = false;
}
if (DisplayStatsEvery != "")
{
if (isIE)
totalKBps = totalKBps + parseFloat(document.getElementById("img1").fileSize);
countFPS++;
}
}
function load_video()
{
window.status=" ";
setTimeout("update()", MyFPS);
}
function takeError1()
{
img1.src = "http://"+IPandPort+"/"+"cgi-bin"+"/"+"CGIProxy.fcgi?cmd=snapPicture2&usr="+user+"&pwd="+pwd+"&cnt="+(unique_name++);
}
function takeError()
{
img.src = "http://"+IPandPort+"/"+"cgi-bin"+"/"+"CGIProxy.fcgi?cmd=snapPicture2&usr="+user+"&pwd="+pwd+"&cnt="+(unique_name++);
}
function startonload()
{
img.src = "http://"+IPandPort+"/"+"cgi-bin"+"/"+"CGIProxy.fcgi?cmd=snapPicture2&usr="+user+"&pwd="+pwd+"&cnt="+(unique_name++);
img.onerror=takeError;
img1.onerror=takeError1;
img.onload=load_video;
}
function load()
{
if (camResolution != "") img1.style.width = camResolution+'px';
if (camFlipped == "Y") flipped();
if (ShoWPTZControls == "Y")
{
document.getElementById('PTZ1').style.display = 'block';
document.getElementById('PTZ1').style.visibility = 'visible';
document.getElementById('PTZ2').style.display = 'block';
document.getElementById('PTZ2').style.visibility = 'visible';
}
if (ShoWFPS == "Y")
{
$('#IntFPS').val(MyFPS);
if (document.getElementById('IntFPS').selectedIndex == -1)
{
document.getElementById('IntFPS').options[0].value = MyFPS;
$('#IntFPS').val(MyFPS);
}
else
document.getElementById('IntFPS').options[0].value = MyFPS;
document.getElementById('InternalFPS').style.display = 'block';
document.getElementById('InternalFPS').style.visibility = 'visible';
}
if (navigator.appName.indexOf("Microsoft IE Mobile") != -1)
{
preload();
changesrc();
return;
}
startonload();
if (DisplayStatsEvery != "")
{
countFPS = 0;
totalKBps = 0;
setInterval("reload_count()", (DisplayStatsEvery * 1000));
}
}
function reload_count()
{
var reCalc = 0;
if (MyFPS > (DisplayStatsEvery * 1000) && (MyFPS > 1000))
reCalc = Math.round(MyFPS/1000);
else
reCalc = DisplayStatsEvery;
if ((isIE) && (countFPS > 0) && (totalKBps > 0))
{
if ((typeof devid !== "undefined") && (DisplayCameraName != ""))
$("#CameraName").text(devid + " - FPS: " + (countFPS / reCalc).toFixed(2) + " - Bps: " + Math.round((totalKBps/reCalc)).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","));
else
$("#CameraName").text("FPS: " + (countFPS / reCalc).toFixed(2) + " - Bps: " + Math.round((totalKBps/reCalc)).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","));
}
else if (countFPS > 0)
if ((typeof devid !== "undefined") && (DisplayCameraName != ""))
$("#CameraName").text(devid + " - FPS: " + (countFPS / reCalc).toFixed(2));
else
$("#CameraName").text("FPS: " + (countFPS / reCalc).toFixed(2));
if (countFPS > 0)
{
countFPS = 0;
totalKBps = 0;
}
}
function decoder_control_2(command)
{
action_zone.location='http://'+IPandPort+'/'+'cgi-bin'+'/'+'CGIProxy.fcgi?cmd='+command+'&usr='+user+'&pwd='+pwd;
}
</script>
</head>
<body onLoad="load()">
<script type="text/javascript">
jQuery(document).ready(
function(){
$('#Container img').click(
function( event ){
var scale = (MyZoom+100)/100;
var pos = $(this).offset();
var clickX = event.pageX - pos.left;
var clickY = event.pageY - pos.top;
var container = $(this).parent().get(0);
$(this).css({
width: this.width*scale,
height: this.height*scale
});
container.scrollLeft = ($(container).width() / -2 ) + clickX * scale;
container.scrollTop = ($(container).height() / -2 ) + clickY * scale;
}
);
$('#Container img').dblclick(
function( event ){
$(this).css({
width: originalWidth,
height: originalHeight
});
}
);
}
);
</script>
<div id ="testing123" style="display:none; visibility:hidden">
<center>
<a href="https://www.digitalocean.com/?refcode=7dab0eca4ca9" target="_blank">Click For Cheap Website Cloud Hosting</a>
</center>
<div id="CameraName" align="center">
</div>
<div id ="PTZ1" align="center" style="display:none;visibility:hidden">
<center>
<button type="button" onTouchStart="decoder_control_2(ptzMoveTopLeft)" onTouchEnd="decoder_control_2('ptzStopRun')" onMouseDown="decoder_control_2(ptzMoveTopLeft)" onMouseUp="decoder_control_2('ptzStopRun')">↑←</button>
<button type="button" onTouchStart="decoder_control_2(ptzMoveBottomLeft)" onTouchEnd="decoder_control_2('ptzStopRun')" onMouseDown="decoder_control_2(ptzMoveBottomLeft)" onMouseUp="decoder_control_2('ptzStopRun')">↓←</button>
<button type="button" onTouchStart="decoder_control_2(ptzMoveLeft)" onTouchEnd="decoder_control_2('ptzStopRun')" onMouseDown="decoder_control_2(ptzMoveLeft)" onMouseUp="decoder_control_2('ptzStopRun')">←</button>
<button type="button" onTouchStart="decoder_control_2(ptzMoveUp)" onTouchEnd="decoder_control_2('ptzStopRun')" onMouseDown="decoder_control_2(ptzMoveUp)" onMouseUp="decoder_control_2('ptzStopRun')">↑</button>
<button type="button" onTouchStart="decoder_control_2(ptzMoveDown)" onTouchEnd="decoder_control_2('ptzStopRun')" onMouseDown="decoder_control_2(ptzMoveDown)" onMouseUp="decoder_control_2('ptzStopRun')">↓</button>
<button type="button" onTouchStart="decoder_control_2(ptzMoveRight)" onTouchEnd="decoder_control_2('ptzStopRun')" onMouseDown="decoder_control_2(ptzMoveRight)" onMouseUp="decoder_control_2('ptzStopRun')">→</button>
<button type="button" onTouchStart="decoder_control_2(ptzMoveBottomRight)" onTouchEnd="decoder_control_2('ptzStopRun')" onMouseDown="decoder_control_2(ptzMoveBottomRight)" onMouseUp="decoder_control_2('ptzStopRun')">↓→</button>
<button type="button" onTouchStart="decoder_control_2(ptzMoveTopRight)" onTouchEnd="decoder_control_2('ptzStopRun')" onMouseDown="decoder_control_2(ptzMoveTopRight)" onMouseUp="decoder_control_2('ptzStopRun')">↑→</button>
</center>
</div>
<div id ="Container" align="center">
<img id=img1 src="" alt="">
</div>
<div id ="PTZ2" align="center" style="display:none;visibility:hidden">
<center>
<button type="button" onTouchStart="decoder_control_2(ptzMoveTopLeft)" onTouchEnd="decoder_control_2('ptzStopRun')" onMouseDown="decoder_control_2(ptzMoveTopLeft)" onMouseUp="decoder_control_2('ptzStopRun')">↑←</button>
<button type="button" onTouchStart="decoder_control_2(ptzMoveBottomLeft)" onTouchEnd="decoder_control_2('ptzStopRun')" onMouseDown="decoder_control_2(ptzMoveBottomLeft)" onMouseUp="decoder_control_2('ptzStopRun')">↓←</button>
<button type="button" onTouchStart="decoder_control_2(ptzMoveLeft)" onTouchEnd="decoder_control_2('ptzStopRun')" onMouseDown="decoder_control_2(ptzMoveLeft)" onMouseUp="decoder_control_2('ptzStopRun')">←</button>
<button type="button" onTouchStart="decoder_control_2(ptzMoveUp)" onTouchEnd="decoder_control_2('ptzStopRun')" onMouseDown="decoder_control_2(ptzMoveUp)" onMouseUp="decoder_control_2('ptzStopRun')">↑</button>
<button type="button" onTouchStart="decoder_control_2(ptzMoveDown)" onTouchEnd="decoder_control_2('ptzStopRun')" onMouseDown="decoder_control_2(ptzMoveDown)" onMouseUp="decoder_control_2('ptzStopRun')">↓</button>
<button type="button" onTouchStart="decoder_control_2(ptzMoveRight)" onTouchEnd="decoder_control_2('ptzStopRun')" onMouseDown="decoder_control_2(ptzMoveRight)" onMouseUp="decoder_control_2('ptzStopRun')">→</button>
<button type="button" onTouchStart="decoder_control_2(ptzMoveBottomRight)" onTouchEnd="decoder_control_2('ptzStopRun')" onMouseDown="decoder_control_2(ptzMoveBottomRight)" onMouseUp="decoder_control_2('ptzStopRun')">↓→</button>
<button type="button" onTouchStart="decoder_control_2(ptzMoveTopRight)" onTouchEnd="decoder_control_2('ptzStopRun')" onMouseDown="decoder_control_2(ptzMoveTopRight)" onMouseUp="decoder_control_2('ptzStopRun')">↑→</button>
</center>
</div>
<div id ="InternalFPS" align="center" style="display:none;visibility:hidden">
<select id="IntFPS" onChange="MyFPS = (this.value);">
<option value="200">Default</option>
<option value="33">30 FPS</option>
<option value="50">20 FPS</option>
<option value="66">15 FPS</option>
<option value="100">10 FPS</option>
<option value="200">5 FPS</option>
<option value="250">4 FPS</option>
<option value="333">3 FPS</option>
<option value="500">2 FPS</option>
<option value="1000">1 FPS</option>
<option value="2000">.5 FPS</option>
<option value="5000">.2 FPS</option>
<option value="10000">.1 FPS</option>
</select>
: Change Internal FPS
</div>
</div>
<center>
<a href="https://www.digitalocean.com/?refcode=7dab0eca4ca9" target="_blank">Click For Cheap Website Cloud Hosting</a>
</center>
<iframe name="action_zone" style="DISPLAY: none" width="0" height="0">
</iframe>
</body>
</html>
| +17 |
3869
103
|
Примеры видео и фото сделанные этой камерой не помешали бы.
И еще 15 fps при разрешении 640х480, т. е. уже не реал тайм. А при 1Мп какая же скорость потока? Даже не указано.
www.avito.ru/krasnodar/audio_i_video/ip_wifi_kamera_shixin_ip-129hw_800tvl_27xzoom_333457423
параметры немного но превосходят эту-смысл переплачиивать в 2 раза? при этом что РЕАЛЬНОЙ гарантии нет?