When I just joined the new company, the first project I took over had the problem of video surveillance, which I had not done before. I was somewhat expecting and helpless, because I wanted to leave a good impression on the leader, but I was afraid of failing.
According to my colleague’s introduction, this video plug-in uses Hikvision’s plug-in. Here’s how to use hikVision’s plug-in:
<script src="Jquery - 1.12.4. Min. Js"></script>
<script src="jsencrypt.min.js"></script>
<script src="JsWebControl - 1.0.0. Min. Js"></script>Copy the codeHTML section: <div id="playWnd" class="playWnd"></div>
<div id="operate" class="operate">
<div class="module">
<div class="item"><span class="label">appkey:</span><input id="appkey" type="text"></div>
<div class="item"><span class="label">secret:</span><input id="secret" type="text"></div>
<div class="item"><span class="label">API gateway IP address :</span><input ID ="ip" type="text"></div>
<div class="item">
<span class="label"> Whether to enable HTTPS </span> <select ID ="isHttps" onchange="UpdateValue()" value="Disabled">
<option value="0"Selected > Disables </option> <option value="1"> Enable </option> </select> </div> <div class="item"><span class="label">API gateway port :</span><input id="port" value="80" type="text"></div>
<div class="item"><span class="label"</span><input id="snapDir" type="text" value="D:\SnapDir"></div>
<div class="item">
<span class="label"</span> <select id="layout" value="2x2">
<option value="1x1">1x1</option>
<option value="2x2" selected>2x2</option>
<option value="3x3">3x3</option>
<option value="4x4">4x4</option>
</select>
</div>
<div class="item">
<span class="label""> < span> <div style="display: inline-block; vertical-align: top;">
<label><input type="checkbox" value="secret" disabled checked>secret</label><br>
<label><input class="encryptedFields" type="checkbox" value="appkey">appkey</label><br>
<label><input class="encryptedFields" type="checkbox" value="ip">ip</label><br>
<label><input class="encryptedFields" type="checkbox" value="snapDir"> Capture path </label><br> <label><input class="encryptedFields" type="checkbox" value="layout"> Layout </label> </div> </div> <div class="item"><button id="init" class="btn"</button></div> </div> <div class="module">
<div class="item"><span class="label"</span><input ID ="cameraIndexCode" type="text"></div>
<div class="item">
<span class="label"</span> <select id="streamMode" value="0">
<option value="0"> Main stream </option> <option value="1"> substream </option> </select> </div> <div class="item">
<span class="label"</span> <select id="transMode" value="1">
<option value="1">TCP</option>
<option value="0">UDP</option>
</select>
</div>
<div class="item">
<span class="label"> Whether to enable GPU hardware: </span> <select ID ="gpuMode" value="0">
<option value="0"> Disable </option> <option value="1"> Enable </option> </select> </div> <div class="item"><button id="startPreview" class="btn"</button></div> <div class="item"><button id="stopAllPreview" class="btn"</button></div> <div class="item"><button id="uninit" class="btn"</button></div> </div> < fieldSet class="cbInfoDiv"> <legend> Return value information </legend> <div ID ="cbInfo" class="cbInfo"></div>
<button id="clear"</button> </fieldset> </div> js section: var oWebControl = null; Var bIE = (!! window.ActiveXObject ||'ActiveXObject' inwindow); // Whether it is Internet Explorer var pubKey =' ';
var iLastCoverLeft = 0;
var iLastCoverTop = 0;
var iLastCoverRight = 0;
var iLastCoverBottom = 0;
var initCount = 0;
console.log('1'// Tags close $(window). Unload (function () {
if(oWebControl ! = null){ oWebControl.JS_Disconnect().then(function() {},function() {}); }}); // window resize $(window).resize(function () {
if(oWebControl ! = null) { oWebControl.JS_Resize(600, 400);setWndCover(); }}); Scroll $(window).scroll(function () {
if(oWebControl ! = null) { oWebControl.JS_Resize(600, 400);setWndCover(); }}); // Set window occlusionfunction setWndCover() {
console.log('Set Window Occlusion')
var iWidth = $(window).width();
var iHeight = $(window).height();
var oDivRect = $("#playWnd").get(0).getBoundingClientRect();
var iCoverLeft = (oDivRect.left < 0) ? Math.abs(oDivRect.left): 0;
var iCoverTop = (oDivRect.top < 0) ? Math.abs(oDivRect.top): 0;
var iCoverRight = (oDivRect.right - iWidth > 0) ? Math.round(oDivRect.right - iWidth) : 0;
var iCoverBottom = (oDivRect.bottom - iHeight > 0) ? Math.round(oDivRect.bottom - iHeight) : 0;
iCoverLeft = (iCoverLeft > 600) ? 600 : iCoverLeft;
iCoverTop = (iCoverTop > 400) ? 400 : iCoverTop;
iCoverRight = (iCoverRight > 600) ? 600 : iCoverRight;
iCoverBottom = (iCoverBottom > 400) ? 400 : iCoverBottom;
if(iLastCoverLeft ! = iCoverLeft) { console.log("iCoverLeft: " + iCoverLeft);
iLastCoverLeft = iCoverLeft;
oWebControl.JS_SetWndCover("left", iCoverLeft);
}
if(iLastCoverTop ! = iCoverTop) { console.log("iCoverTop: " + iCoverTop);
iLastCoverTop = iCoverTop;
oWebControl.JS_SetWndCover("top", iCoverTop);
}
if(iLastCoverRight ! = iCoverRight) { console.log("iCoverRight: " + iCoverRight);
iLastCoverRight = iCoverRight;
oWebControl.JS_SetWndCover("right", iCoverRight);
}
if(iLastCoverBottom ! = iCoverBottom) { console.log("iCoverBottom: " + iCoverBottom);
iLastCoverBottom = iCoverBottom;
oWebControl.JS_SetWndCover("bottom", iCoverBottom); }}function UpdateValue()
{
var sel = document.getElementById("isHttps");
var selectedId = sel.selectedIndex;
var v = sel.options[selectedId].value;
if (0 == v)
{
document.getElementById("port").value = 80;
}
else
{
document.getElementById("port").value = 443; }} // Initialize the plug-infunction initPlugin () {
console.log('Initialize plug-in'The $()"#init").attr('disabled'.false);
$("#startPreview").attr('disabled'.false);
$("#stopAllPreview").attr('disabled'.false);
$("#uninit").attr('disabled'.false);
oWebControl = new WebControl({
szPluginContainer: "playWnd",
iServicePortStart: 15900,
iServicePortEnd: 15909,
cbConnectSuccess: function () {
setCallbacks();
console.log('Initialize plug-in setCallbacks')
oWebControl.JS_StartService("window", {
dllPath: "./VideoPluginConnect.dll"
//dllPath: "./DllForTest-Win32.dll"
}).then(function () {
oWebControl.JS_CreateWnd("playWnd", 600, 400).then(function () {
// console.log('Initialize plug-in setCallbacks')
console.log("JS_CreateWnd success");
$("#init").attr('disabled'.false);
$("#startPreview").attr('disabled'.false);
$("#stopAllPreview").attr('disabled'.false);
$("#uninit").attr('disabled'.false);
});
}, function() {}); }, cbConnectError:function () {
console.log("cbConnectError");
oWebControl = null;
$("#playWnd").html("Plug-in not started, trying to start, please wait...");
WebControl.JS_WakeUp("VideoWebPlugin://");
initCount ++;
if (initCount < 3) {
setTimeout(function() { initPlugin(); }}, 3000)else{$("#playWnd").html("Plug-in startup failed, please check whether the plug-in is installed!");
}
},
cbConnectClose: function () {
console.log("cbConnectClose"); oWebControl = null; }}); } initPlugin(); // Get the public keyfunction getPubKey (callback) {
oWebControl.JS_RequestInterface({
funcName: "getRSAPubKey",
argument: JSON.stringify({
keyLength: 1024
})
}).then(function (oData) {
console.log(oData)
if(odata.responsemsg.data) {pubKey = odata.responsemsg.data callback()}})} // Set the window control callbackfunction setCallbacks() { oWebControl.JS_SetWindowControlCallback({ cbIntegrationCallBack: cbIntegrationCallBack }); } // Push messagefunctioncbIntegrationCallBack(oData) { showCBInfo(JSON.stringify(oData.responseMsg)); } // RSA encryptionfunction setEncrypt (value) {
var encrypt = new JSEncrypt();
encrypt.setPublicKey(pubKey);
returnencrypt.encrypt(value); } // initialize $("#init").click(function () {
getPubKey(function () {
console.log('initialize')
var appkey = $("#appkey").val();
var secret = setEncrypt($("#secret").val());
var ip = $("#ip").val();
var port = parseInt($("#port").val());
var snapDir = $("#snapDir").val();
var layout = $("#layout").val();
var encryptedFields = ['secret'];
var enableHttps = parseInt($("#isHttps").val());
$(".encryptedFields").each(function (index, item) {
var $item = $(item);
if ($item.prop('checked')) {
var value = $item.val();
if(value ! = ='secret') { encryptedFields.push(value); } // secret fixed encryption, other encryption according to the userif (value == 'ip') {
ip = setEncrypt(ip)
}
if (value == 'appkey') {
appkey = setEncrypt(appkey)
}
if (value == 'snapDir') {
snapDir = setEncrypt(snapDir)
}
if (value == 'layout') {
layout = setEncrypt(layout)
}
}
})
encryptedFields = encryptedFields.join(",");
if(! appkey) { showCBInfo("Appkey cannot be empty!".'error');
return
}
if(! $("#secret").val()) {
showCBInfo("Secret can't be empty!".'error');
return
}
if(! ip) { showCBInfo("IP cannot be empty!".'error');
return
}
if(! $("#port").val()) {
showCBInfo("Port cannot be empty!".'error');
return
} else if(! | / ^ ([0-9] [1-9] \ d {1, 3} | [1-5] \ d {4} | 6 [0 to 5] {2} [0, 3] [0-5]) $/. The test ($("#port").val())) {
showCBInfo("Wrong port!".'error');
return} console.log({appKey: appkey, secret: secret, IP: IP, playMode: 0, // preview port: port, snapDir: snapDir, layout: layout,enableHTTPS: enableHttps,
encryptedFields: encryptedFields
})
oWebControl.JS_RequestInterface({
funcName: "init", argument: json.stringify ({appKey: appkey, secret: secret, IP: IP, playMode: 0, // preview port: port, snapDir: snapDir, layout: layout,enableHTTPS: enableHttps,
encryptedFields: encryptedFields
})
}).then(function (oData) {
showCBInfo(JSON.stringify(oData ? oData.responseMsg : ' ')); }); })}); // Video preview $("#startPreview").click(function () {
var cameraIndexCode = $("#cameraIndexCode ").val();
var streamMode = +$("#streamMode").val();
var transMode = +$("#transMode").val();
var gpuMode = +$("#gpuMode").val();
if(! cameraIndexCode ) { showCBInfo("The control point number cannot be empty!".'error');
return
}
oWebControl.JS_RequestInterface({
funcName: "startPreview",
argument: JSON.stringify({
cameraIndexCode : cameraIndexCode ,
streamMode: streamMode,
transMode: transMode,
gpuMode: gpuMode
})
}).then(function (oData) {
showCBInfo(JSON.stringify(oData ? oData.responseMsg : ' ')); }); }); // Stop previewing $("#stopAllPreview").click(function () {
oWebControl.JS_RequestInterface({
funcName: "stopAllPreview"
}).then(function (oData) {
showCBInfo(JSON.stringify(oData ? oData.responseMsg : ' ')); }); }) // uninitializefunction uninit (cbFunc) {
oWebControl.JS_RequestInterface({
funcName: "uninit"
}).then(function (oData) {
showCBInfo(JSON.stringify(oData ? oData.responseMsg : ' '));
cbFunc && cbFunc();
});
}
$("#uninit").click(uninit) // Display callback informationfunction showCBInfo(szInfo, type) {
if (type= = ='error') {
szInfo = "
"
+ dateFormat(new Date(), "yyyy-MM-dd hh:mm:ss") + "" + szInfo + "</div>";
} else {
szInfo = "<div>" + dateFormat(new Date(), "yyyy-MM-dd hh:mm:ss") + "" + szInfo + "</div>";
}
$("#cbInfo").html(szInfo + $("#cbInfo").html());
}
$("#clear").click(function() {$("#cbInfo").html(' '); }) // Format timefunction dateFormat(oDate, fmt) {
var o = {
"M+": odate.getMonth () + 1, // month"d+": oDate getDate (), / / day"h+": odate.gethours (), // hours"m+": oDate getMinutes (), / / min"s+": oDate getSeconds (), / / SEC"q+"Math.floor((odate.getMonth () + 3) / 3), // quarter"S": odate.getmilliseconds ()};if (/(y+)/.test(fmt)) {
fmt = fmt.replace(RegExp.The $1, (oDate.getFullYear() + "").substr(4 - RegExp.The $1.length));
}
for (var k in o) {
if (new RegExp("(" + k + ")").test(fmt)) {
fmt = fmt.replace(RegExp.The $1, (RegExp.The $1.length == 1) ? (o[k]) : (("00" + o[k]).substr((""+ o[k]).length))); }}return fmt;
}Copy the codeAbove is the original demo. HTML, interested friends can have a look. Of course, you need to get some parameter values from your colleagues in advance
All right, we’re done.
You can download the JS files in the plug-in from the link below
github.com/triumphic/-