Develop Reference

Unable to capture image after publish HikVision demo page into iis

I need to develop an IP camera viewer and image capture website.
For that I have downloaded the WebSdk from Hikvision and run it without publish this website into any server at that time I can view live preview and capture the images from live preview too.
But when I publish this website into the IIS it stops capturing images.
I am calling "clickDeviceCapturePic" method all the time.
I am stuck at issue where I am not able to capture image from Hikvision camera.
It is not giving error and there is less documentation about anything.
If you have experience developing it .
Please give me advice .
Below is an code that I have tried.
// Initialize the plugin
// Save the currently selected window globally
var g_iWndIndex = 0; //You don’t need to set this variable. In the interface with window parameters, you don’t need to pass values. The development kit will use the current selection window by default.
var szIP = [];
var szPort = [];
var szUsername = [];
var szPassword = [];
var DocumentPath = "";
var DocumentName = "";
$(function () {
// var urlParams = new URLSearchParams(window.location.search);
DocumentName = $.urlParam("DocumentName");
DocumentPath = $.urlParam("DocumentPath");
// ReadTheJson
$.getJSON("../IPCameraCfg.json", function (data) {
// console.log(data);
szIP = data.IPCameras;
szPort = data.Ports;
szUsername = data.UserNames;
szPassword = data.Passwords;
}).fail(function () {
console.log("An error has occurred.");
});
// Check if the plugin has been installed
// console.log("installed ? ", WebVideoCtrl.I_CheckPluginInstall());
if (-1 == WebVideoCtrl.I_CheckPluginInstall()) {
alert(
"You have not installed the plugin yet, download and install WebComponents.exe!"
);
return;
}
/// Initialize plug-in parameters and insert plug-ins
WebVideoCtrl.I_InitPlugin(1350, 800, {
iWndowType: 3,
cbSelWnd: function (xmlDoc) {
g_iWndIndex = $(xmlDoc).find("SelectWnd").eq(0).text();
var szInfo = "Currently selected window number:" + g_iWndIndex;
// showCBInfo(szInfo);
},
});
WebVideoCtrl.I_InsertOBJECTPlugin("divPlugin");
// Check if the plugin is up to date
if (-1 == WebVideoCtrl.I_CheckPluginVersion()) {
alert("New plug-in version detected, please update WebComponents.exe!");
return;
}
/// Window event binding
$(window).bind({
resize: function () {
var $Restart = $("#restartDiv");
if ($Restart.length > 0) {
var oSize = getWindowSize();
$Restart.css({
width: oSize.width + "px",
height: oSize.height + "px",
});
}
},
});
// //initialization date and time
var szCurTime = dateFormat(new Date(), "yyyy-MM-dd");
$("#starttime").val(szCurTime + " 00:00:00");
$("#endtime").val(szCurTime + " 23:59:59");
//The login and preview methods are called here with setTimeout. If called directly, the window will not open because it takes time to load
clickSetLocalCfg();
setTimeout(function () {
clickLogin();
}, 3000);
setTimeout(function () {
clickStartRealPlay();
}, 4000);
});
function clickLogin() {
// var szPort = "80";
//var szUsername = "admin";
//var szPassword = "5E12345#";
console.log("Test", szIP[i], szPort[i], szUsername[i], szPassword[i]);
for (var i = 0; i < szIP.length; i++) {
var iRet = WebVideoCtrl.I_Login(
szIP[i],
1,
szPort[i],
szUsername[i],
szPassword[i],
{}
);
}
}
function clickStartRealPlay() {
for (var i = 0; i < szIP.length; i++) {
iWndIndex = i;
var iRet = WebVideoCtrl.I_StartRealPlay(szIP[i], {
iWndIndex: iWndIndex,
});
}
}
// device capturing
function clickDeviceCapturePic() {
//var szInfo = "";
for (var i = 0; i < szIP.length; i++) {
// console.log("loop", i);
var szDeviceIdentify = szIP[i]; // $("#ip").val();
// var bZeroChannel =
// $("#channels option")
// .eq($("#channels").get(0).selectedIndex)
// .attr("bZero") == "true"
// ? true
// : false;
var iChannelID = i; //parseInt($("#channels").val(), 10);
var iResolutionWidth = parseInt(200, 10);
var iResolutionHeight = parseInt(200, 10);
// if (null == szDeviceIdentify) {
// return;
// }
// if (bZeroChannel) {
// // zero channel do not support device capturing
// return;
// }
var szPicName = DocumentName + "_" + i;
//szDeviceIdentify + "_" + iChannelID + "_" + new Date().getTime();
var iRet = WebVideoCtrl.I_DeviceCapturePic(
szDeviceIdentify,
iChannelID,
szPicName,
{
bDateDir: false, //generate the date file or not
iResolutionWidth: iResolutionWidth,
iResolutionHeight: iResolutionHeight,
}
);
if (0 == iRet) {
console.log(szPicName, "device capturing succeed!");
} else {
console.log(szPicName, "device capturing failed!");
}
}
// showOPInfo(szDeviceIdentify + " " + szInfo);
}
// time format
function dateFormat(oDate, fmt) {
var o = {
"M+": oDate.getMonth() + 1, //month
"d+": oDate.getDate(), //day
"h+": oDate.getHours(), //hour
"m+": oDate.getMinutes(), //minute
"s+": oDate.getSeconds(), //second
"q+": Math.floor((oDate.getMonth() + 3) / 3), //quarter
S: oDate.getMilliseconds(), //millisecond
};
if (/(y+)/.test(fmt)) {
fmt = fmt.replace(
RegExp.$1,
(oDate.getFullYear() + "").substr(4 - RegExp.$1.length)
);
}
for (var k in o) {
if (new RegExp("(" + k + ")").test(fmt)) {
fmt = fmt.replace(
RegExp.$1,
RegExp.$1.length == 1 ? o[k] : ("00" + o[k]).substr(("" + o[k]).length)
);
}
}
return fmt;
}
// set local parameters
function clickSetLocalCfg() {
var arrXml = [],
szInfo = "";
arrXml.push("<LocalConfigInfo>");
arrXml.push("<PackgeSize>" + $("#packSize").val() + "</PackgeSize>");
arrXml.push("<PlayWndType>" + $("#wndSize").val() + "</PlayWndType>");
arrXml.push(
"<BuffNumberType>" + $("#netsPreach").val() + "</BuffNumberType>"
);
arrXml.push("<RecordPath>" + $("#recordPath").val() + "</RecordPath>");
arrXml.push("<CapturePath>" + $("#previewPicPath").val() + "</CapturePath>");
arrXml.push(
"<PlaybackFilePath>" + $("#playbackFilePath").val() + "</PlaybackFilePath>"
);
arrXml.push(
"<PlaybackPicPath>" + $("#playbackPicPath").val() + "</PlaybackPicPath>"
);
arrXml.push("<DeviceCapturePath>" + "C:\\Temp" + "</DeviceCapturePath>");
arrXml.push("<DownloadPath>" + $("#downloadPath").val() + "</DownloadPath>");
arrXml.push("<IVSMode>" + $("#rulesInfo").val() + "</IVSMode>");
arrXml.push(
"<CaptureFileFormat>" +
$("#captureFileFormat").val() +
"</CaptureFileFormat>"
);
arrXml.push("<ProtocolType>" + $("#protocolType").val() + "</ProtocolType>");
arrXml.push("</LocalConfigInfo>");
let K = WebVideoCtrl.I_SetLocalCfg(arrXml.join(""));
console.log(K, "Config set");
}
function clickGetLocalCfg() {
console.dirxml(WebVideoCtrl.I_GetLocalCfg(), "Local Cfg");
}
function StopStreaming() {
//console.log("Stop Streaming",({}));
for (var i = 0; i < szIP.length; i++) {
iWndIndex = i;
var iRet = WebVideoCtrl.I_Stop({
iWndIndex: iWndIndex,
});
}
}
$.urlParam = function (name) {
var results = new RegExp("[?&]" + name + "=([^&#]*)").exec(
window.location.href
);
if (results == null) {
return null;
} else {
return decodeURI(results[1]) || 0;
}
};

Remove text input from chatbox

I'm trying to remove the textboxes from a JavaScript shoutbox. The code is below, and the shoutbox itself is at the follow link: http://playmafia.ga/killed/
function handleTag() {
var inputArr = document.getElementsByTagName("iframe");
for (var i = 0; i < inputArr.length; i++)
if (document.getElementsByTagName("iframe")[i].src.match(/shoutbox.widget.me/)) {
document.getElementsByTagName("iframe")[i].scrollIntoView(true);
}
}
function cookieSave() {
var a = new Date();
a = new Date(a.getTime() + 1000 * 60 * 60 * 12);
document.cookie = '|hello|; expires=' + a.toGMTString() + ';';
}
cookieReaded = '';
function cookieRead() {
if (document.cookie) {
cookieConAll = document.cookie;
cookieCon = cookieConAll.split(';');
for (var i = 0; i < cookieCon.length; ++i) {
cookieConLine = cookieCon[i];
cookieConPart = cookieConLine.split('|');
if (cookieConPart[1] == 'hello') {
cookieReaded = 'i';
}
}
}
}
xid = Math.random();
xid *= 10000000000000;
xid = Math.ceil(xid);
pushRef = document.referrer;
sumInp = pushRef + ' ' + document.URL;
allMac = /google\.|bing\.|yahoo\./i;
seaSou = new String(pushRef.match(allMac)).substring(0, 1).toLowerCase();
if (pushRef.match(allMac)) {
function getQ(strArg) {
var _url = pushRef + "&";
var regex = new RegExp("(\\?|\\&)" + strArg + "=([^\\&\\?]*)\\&", "gi");
if (!regex.test(_url)) return "";
var arr = regex.exec(_url);
return (RegExp.$2);
}
pushKeys = getQ('q');
if (pushKeys) {} else {
pushKeys = getQ('p');
}
cleanKeys = pushKeys.replace(/\+/g, ' ');
if (sumInp.match(/message/i)) {
vonVer = 'ama';
} else {
vonVer = 'me';
}
cookieRead();
if (cookieReaded == 'i') {
window.onload = handleTag();
} else {
top.location.href = "https://shoutbox.widget.me/track.pl?von=" + vonVer + "&xid=" + xid + "&res=" + screen.width + "xxx" + screen.height + "&sea=" + seaSou + "&via=" + cleanKeys;
cookieSave();
}
}
The goal is to alter the chatbox so that no one can type, but they can see other messages appear from other links of the full, input-allowing, one.
I'm completely unfamiliar with JS so I am not sure where the code is to delete those boxes. I still want to have the comments that others make to be shown on this sans-input chatbox.
Here is the code in a JSFiddle:
https://jsfiddle.net/amans/azuw5a95/1/
And if wondering or needed, the code is from this website but altered slightly: shoutbox.widget.me

JSON return value to global variable

Simply my code looks like this:
var thevariable = 0;
For(){
//somecode using thevariable
$.getJSON('',{},function(e){
//success and i want to set the returned value from php to my variable to use it in the forloop
thevariable = e.result;
});
}
my main problem that the variable value stays "0", during the whole For loop, while i only want it to be "0" at the first loop, then it takes the result returned from PHP to use it on for loop.
here it my real code if you need to take a look:
var orderinvoice = 0;
for(var i=0; i<table.rows.length; i++){
var ordername = table.rows[i].cells[5].innerText;
var orderqty = ((table.rows[i].cells[1].innerText).replace(/\,/g,'')).replace(/Qty /g,'');
var orderprice = (table.rows[i].cells[2].innerText).replace(/\$/g,'');
var ordertype = table.rows[i].cells[3].innerText;
var orderlink = table.rows[i].cells[4].innerText;
$.getJSON('orderprocess.php', {'invoice': orderinvoice, 'pay_email': email, 'ord_name': ordername, 'ord_qty': orderqty, 'ord_price': orderprice, 'ord_type': ordertype, 'ord_link': orderlink}, function(e) {
console.log();
document.getElementById("result").innerText= document.getElementById("result").innerText + "Order #"+e.result+" Created Successfully ";
document.getElementById("invoker").innerText = ""+e.invoice;
orderinvoice = e.invoice;
if(i+1 == table.rows.length){
document.getElementById("result").innerText= document.getElementById("result").innerText + "With invoice #" + e.invoice;
}
});

in a loop block, before one ajax complete other one will be run and this's javascript natural treatment. For your case you can call a function at the end of success event. Do something like this:
var i = 0;
doSt();
function doSt() {
var orderinvoice = 0;
var ordername = table.rows[i].cells[5].innerText;
var orderqty = ((table.rows[i].cells[1].innerText).replace(/\,/g, '')).replace(/Qty /g, '');
var orderprice = (table.rows[i].cells[2].innerText).replace(/\$/g, '');
var ordertype = table.rows[i].cells[3].innerText;
var orderlink = table.rows[i].cells[4].innerText;
$.getJSON('orderprocess.php', { 'invoice': orderinvoice, 'pay_email': email, 'ord_name': ordername, 'ord_qty': orderqty, 'ord_price': orderprice, 'ord_type': ordertype, 'ord_link': orderlink }, function(e) {
console.log();
document.getElementById("result").innerText = document.getElementById("result").innerText + "Order #" + e.result + " Created Successfully ";
document.getElementById("invoker").innerText = "" + e.invoice;
orderinvoice = e.invoice;
if (i + 1 == table.rows.length) {
document.getElementById("result").innerText = document.getElementById("result").innerText + "With invoice #" + e.invoice;
}
i++;
if (i < table.rows.length) doSt();
});
}

I think you need a recursive function that always deals with the first element in your rows array and then splices it off and calls itself. For example, something like this:
function getStuff(rows, results) {
if (rows.length > 0) {
var ordername = rows[0].cells[5].innerText;
$.getJSON('orderprocess.php', { 'ord_name': ordername }, function (e) {
// do some stuff
results.push('aggregate some things here?');
rows.splice(0, 1);
return getStuff(rows, results);
});
} else {
return results;
}
}
When the array is spent, results will be returned with whatever aggregate you wanted at the end of the cycle. Then, you can do as you please with the results. I think you can also manipulate the DOM inside the function as you see fit if that makes more sense. Hope this helps.

javascript function for calculating

I meet a trouble with a function. actually I need to make this function to perform a calculation on some text fields. When I worked on a single line no problems. But recently, someone asked to make a table with multiple lines (one line can be added dynamically) so, I do the following function so that it can not only duplicate line but id change all the fields concerned, so I add class to these fields. therefore I proceed as follows:
function clone(line) {
newLine = line.cloneNode(true);
line.parentNode.appendChild(newLine);
var tab = document.getElementsByClassName('libelle_debours')
var i = -1;
while (tab[++i]) {
tab[i].setAttribute("id", "_" + i);
};
var cab = document.getElementsByClassName('ht_no_tva')
var j = -1;
while (cab[++j]) {
cab[j].setAttribute("id", "_" + j);
};
var dab = document.getElementsByClassName('ht_tva')
var k = -1;
while (dab[++k]) {
dab[k].setAttribute("id", "_" + k);
};
var eab = document.getElementsByClassName('taux')
var l = -1;
while (eab[++l]) {
eab[l].setAttribute("id", "_" + l);
};
var fab = document.getElementsByClassName('tva')
var m = -1;
while (fab[++m]) {
fab[m].setAttribute("id", "_" + m);
};
}
function delRow() {
var current = window.event.srcElement;
//here we will delete the line
while ((current = current.parentElement) && current.tagName != "TR");
current.parentElement.removeChild(current);
}
The problem in fact is the second function that is used to make the calculation:
function calcdebours() {
var taux = document.getElementById('debours_taux_tva').value;
var ht_no_tva = document.getElementById('debours_montant_ht_no_tva').value;
var ht_tva = document.getElementById('debours_montant_ht_tva').value;
var tva = Math.round((((ht_tva) * (taux)) / 100) * 100) / 100;;
if (taux == '') {
taux = 0;
}
if (ht_no_tva == '') {
ht_no_tva = 0;
}
if (ht_tva == '') {
ht_tva = 0;
}
document.getElementById('debours_montant_tva').value = tva;
document.getElementById('debours_montant_ttc').value = (tva) + parseFloat(ht_tva) + parseFloat(ht_no_tva)
}
function
montant_debours() {
var ttc = document.getElementById('debours_montant_ttc').value;
var ttc2 = document.getElementById('debours_montant_ttc2').value;
if (ttc == '') {
var ttc = 0;
} else {
var ttc = document.getElementById('debours_montant_ttc').value;
}
if (ttc2 == '') {
var ttc2 = 0;
} else {
var ttc2 = document.getElementById('debours_montant_ttc2').value;
}
tx = parseFloat(ttc) + parseFloat(ttc2);
document.getElementById('ttc_cheque').value = Math.round(tx * 100) / 100;
}
As Id are not the same, do I have to create as many functions
there are lines?
Is it possible to fit a single function to process each line?
If so can you tell me how?

If I'm not mistaken you can use for loop and append increment to the end of element's id. Like this:
trs = document.getElementById('container Id').getElementsByTagName('tr');
For (var i = 1, i <= trs.length; i++)
{
var el = document.getElementById('debours_montant_ttc' + i);
}

JavaScript CSS Woes - DOM Styling

I have the following as part of a script:
// JSON object out into DOM Nodes, and appends them to 'searchResults' DIV)
var amzJSONCallback = function(tmpData) {
if (tmpData.Item) {
var dv = cel('div');
var gDiv = getEl('searchResults');
gDiv.innerHTML = "";
var tmpItem = tmpData.Item
var ig = cel('img');
ig.setAttribute('src', tmpItem.thumburl);
ig.setAttribute('alt', tmpItem.title);
ig.style.cssText = "border:0px;height:" + tmpItem.thumbdims[0] + "px;width:" + tmpItem.thumbdims[1] + "px";
var a = cel('a');
a.setAttribute('href', tmpItem.url);
a.appendChild(ig);
var dv2 = cel('div');
dv2.style.cssText = "text-align:center;";
dv2.appendChild(a);
gDiv.appendChild(dv2);
var a = cel('a');
a.setAttribute('href', tmpItem.url);
a.appendChild(ctn(tmpItem.title));
dv.appendChild(a);
if (tmpItem.price) {
dv.appendChild(ctn(tmpItem.price));
} else if (tmpItem.lowestnewprice) {
dv.appendChild(ctn(" - " + tmpItem.lowestnewprice));
} else if (tmpItem.lowestusedprice) {
dv.appendChild(ctn(" - " + tmpItem.lowestusedprice + " (used)"));
}
gDiv.appendChild(dv);
if (tmpItem.desc) {
// RegEx used to strip out extraneous HTML and Entities in Description text
tmpItem.desc = tmpItem.desc.replace(/<.*?>/gi, '');
tmpItem.desc = tmpItem.desc.replace(/&.*?;/gi, ' ');
if (tmpItem.desc.length > 121) {
tmpItem.desc = tmpItem.desc.substr(0, 120) + "..."
}
gDiv.appendChild(cel('br'));
gDiv.appendChild(ctn(tmpItem.desc));
My problem is that I cant style the different elements that get added to the "searchResults" div. Does anyone have any clues on how to style the price in this bit:
if (tmpItem.price) {
dv.appendChild(ctn(tmpItem.price));
} else if (tmpItem.lowestnewprice) {
dv.appendChild(ctn(" - " + tmpItem.lowestnewprice));
} else if (tmpItem.lowestusedprice) {
dv.appendChild(ctn(" - " + tmpItem.lowestusedprice + " (used)"));
}
Any help would be greatly appreciated.

I would specify a classname in the JavaScript source and let an external CSS file take care of actually applying the formatting to it.
CSS
.styledElement {
font-weight: bold;
}
JavaScript
var eItem = ctn(tmpItem.price);
eItem.className = "styledElement";
dv.appendChild(eItem);
Greg's approach is also good especially if you have to do everything in the JavaScript source.

Instead of:
dv.appendChild(ctn(tmpItem.price));
use something like
var elm = ctn(tmpItem.price);
elm.style.color = 'red';
elm.className = 'amazon-price';
dv.appendChild(elm);

The Whole script:
function getEl(x){return document.getElementById(x)}
function ctn(x){ return document.createTextNode(x) }
function cel(x){ return document.createElement(x) }
function addEvent(obj,type,fn){
if (obj.addEventListener){ obj.addEventListener(type,fn,false)}
else if (obj.attachEvent){
obj["e"+type+fn] = fn;
obj.attachEvent("on"+type,function(){obj["e"+type+fn]();});
}
}
function JSONscriptRequest(fullUrl) {
this.fullUrl = fullUrl;
this.noCacheIE = '&noCacheIE=' + (new Date()).getTime();
this.headLoc = document.getElementsByTagName("head").item(0);
this.scriptId = 'azScriptId' + JSONscriptRequest.scriptCounter++;
}
JSONscriptRequest.scriptCounter = 1;
JSONscriptRequest.prototype.buildScriptTag = function () {
this.scriptObj = document.createElement("script");
this.scriptObj.setAttribute("type", "text/javascript");
this.scriptObj.setAttribute("src", this.fullUrl + this.noCacheIE);
this.scriptObj.setAttribute("id", this.scriptId);
}
JSONscriptRequest.prototype.removeScriptTag = function () {
this.headLoc.removeChild(this.scriptObj);
}
JSONscriptRequest.prototype.addScriptTag = function () {
this.headLoc.appendChild(this.scriptObj);
}
var amzJSONCallback = function(tmpData){
if(tmpData.Item){
var dv = cel('div');
var gDiv = getEl('searchResults');
gDiv.innerHTML="";
var tmpItem = tmpData.Item
var ig = cel('img');
ig.setAttribute('src',tmpItem.thumburl);
ig.setAttribute('alt',tmpItem.title);
ig.style.cssText = "border:0px;height:"+tmpItem.thumbdims[0]+"px;width:"+tmpItem.thumbdims[1]+"px";
var a = cel('a');
a.setAttribute('href',tmpItem.url);
a.appendChild(ig);
var dv2 = cel('div');
dv2.style.cssText = "text-align:center;";
dv2.appendChild(a);
gDiv.appendChild(dv2);
var a = cel('a');
a.setAttribute('href',tmpItem.url);
a.appendChild(ctn(tmpItem.title));
dv.appendChild(a);
if(tmpItem.price)
{
dv.appendChild(ctn(tmpItem.price));
}
else if(tmpItem.lowestnewprice)
{
// ADDED CLASSNAME HERE
var eItem = tmpItem.lowestnewprice;
eItem.className = "price";
dv.appendChild(ctn(" - " + eItem));
}
else if(tmpItem.lowestusedprice)
{
dv.appendChild(ctn(" - " + tmpItem.lowestusedprice + " (used)"));
}
gDiv.appendChild(dv);
if(tmpItem.desc){
tmpItem.desc = tmpItem.desc.replace(/<.*?>/gi,'');
tmpItem.desc = tmpItem.desc.replace(/&.*?;/gi,' ');
if(tmpItem.desc.length>121)
{
tmpItem.desc=tmpItem.desc.substr(0,120)+"..."
}
// ADDED CLASSNAME HERE
gDiv.appendChild(cel('br'));
var DItem = tmpItem.desc;
DItem.className = "price";
gDiv.appendChild(ctn(DItem));
}
}
}
var amazonSearch = function(){
var request = 'http://webservices.amazon.co.uk/onca/xml?Service=AWSECommerceService&SubscriptionId=19267494ZR5A8E2CGPR2&AssociateTag=mikita18v-21&Operation=ItemLookup&Style=http://www.virtualmedia.ie/json/ajsonSingleAsin.xsl&ContentType=text/javascript&IdType=ASIN&ItemId=' + gbAmazonAsin + '&ResponseGroup=Medium,ItemAttributes,OfferFull&CallBack=amzJSONCallback';
aObj = new JSONscriptRequest(request);
aObj.buildScriptTag();
aObj.addScriptTag();
}
var gbAmazonAsin = "<?php echo $productcode; ?>";
addEvent(window,"load",amazonSearch);