Unable to capture image after publish HikVision demo page into iis

Question

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;
  }
};