1082 lines
41 KiB
Plaintext
1082 lines
41 KiB
Plaintext
<%@ page language="java" pageEncoding="UTF-8"%>
|
||
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>
|
||
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
|
||
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
|
||
<%@ page import="com.sipai.entity.base.ServerObject"%>
|
||
<%@ taglib uri="http://www.springsecurity.org/jsp" prefix="security"%>
|
||
|
||
|
||
<head>
|
||
<title></title>
|
||
<jsp:include page="/jsp/incVisual.jsp"></jsp:include>
|
||
<script type="text/javascript"
|
||
src="<%=request.getContextPath()%>/node_modules/WebControl/jsencrypt.min.js"></script>
|
||
<script type="text/javascript"
|
||
src="<%=request.getContextPath()%>/node_modules/WebControl/jsWebControl-1.0.0.min.js"></script>
|
||
<style>
|
||
html,
|
||
body {
|
||
width: 100%;
|
||
height: 100%;
|
||
padding: 0;
|
||
margin: 0;
|
||
}
|
||
|
||
/*.playWnd {
|
||
margin: 0 0 0 0;
|
||
position: absolute;
|
||
left: 50%;
|
||
top: 50%;
|
||
transform: translate(-50%, -50%);
|
||
border: 1px solid red;
|
||
}*/
|
||
.playWnd {
|
||
margin: 0;
|
||
width: 99%;
|
||
height: 99%;
|
||
/* border: 1px solid red; */
|
||
}
|
||
|
||
.cbInfoDiv {
|
||
float: left;
|
||
width: 360px;
|
||
margin-left: 16px;
|
||
border: 1px solid #7F9DB9;
|
||
}
|
||
|
||
.cbInfo {
|
||
height: 200px;
|
||
padding: 5px;
|
||
border: 1px solid #7F9DB9;
|
||
overflow: auto;
|
||
word-break: break-all;
|
||
}
|
||
|
||
.operate {
|
||
margin-top: 24px;
|
||
}
|
||
|
||
.operate::after {
|
||
content: '';
|
||
display: block;
|
||
clear: both;
|
||
}
|
||
|
||
.operate .btns {
|
||
height: 32px;
|
||
}
|
||
|
||
.module {
|
||
float: left;
|
||
width: 340px;
|
||
min-height: 320px;
|
||
margin-left: 16px;
|
||
padding: 16px 8px;
|
||
box-sizing: border-box;
|
||
border: 1px solid #e5e5e5;
|
||
}
|
||
|
||
.module .item {
|
||
margin-bottom: 4px;
|
||
}
|
||
|
||
.module .label {
|
||
width: 150px;
|
||
display: inline-block;
|
||
vertical-align: middle;
|
||
margin-right: 8px;
|
||
text-align: right;
|
||
}
|
||
|
||
.module input[type="text"],
|
||
.module select {
|
||
box-sizing: border-box;
|
||
display: inline-block;
|
||
vertical-align: middle;
|
||
margin-left: 0;
|
||
width: 150px;
|
||
min-height: 20px;
|
||
}
|
||
|
||
.module .btn {
|
||
min-width: 80px;
|
||
min-height: 24px;
|
||
margin-top: 16px;
|
||
margin-left: 158px;
|
||
}
|
||
</style>
|
||
</head>
|
||
|
||
<body>
|
||
<!-- <div id="playWnd" class="playWnd">sss</div> -->
|
||
<div id="playWnd" class="playWnd"></div>
|
||
<div id="operate" class="operate" style="display: none;">
|
||
<!-- style="display: none;" -->
|
||
<div class="module">
|
||
<div class="item"><span class="label">appkey:</span><input id="appkey" type="text" value=""></div>
|
||
<div class="item"><span class="label">secret:</span><input id="secret" type="text" value=""></div>
|
||
<div class="item"><span class="label">平台IP地址:</span><input id="ip" type="text" value=""></div>
|
||
<div class="item">
|
||
<span class="label">是否启用HTTPS协议</span>
|
||
<select id="isHttps" onchange="UpdateValue()" value="启用">
|
||
<option value="0">不启用</option>
|
||
<option value="1" selected>启用</option>
|
||
</select>
|
||
</div>
|
||
<div class="item"><span class="label">平台端口:</span><input id="port" type="text" value="443"></div>
|
||
<div class="item"><span class="label">抓图存储路径:</span><input id="snapDir" type="text" value="D:\SnapDir">
|
||
</div>
|
||
<div class="item"><span class="label">录像存储路径:</span><input id="videoDir" type="text" value="D:\VideoDir">
|
||
</div>
|
||
<div class="item">
|
||
<span class="label">初始化布局:</span>
|
||
<select id="layout" value="2x2">
|
||
<option value="1x1" selected>1x1</option>
|
||
<option value="2x2">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">抓图路径</label><br>
|
||
<label><input class="encryptedFields" type="checkbox" value="videoDir">录像路径</label><br>
|
||
<label><input class="encryptedFields" type="checkbox" value="layout">布局</label>
|
||
</div>
|
||
</div>
|
||
<div class="item">
|
||
<button
|
||
style="width:10px;padding:0;margin:0;" id="init" class="btn">初始化</button>
|
||
<button
|
||
style="width:10px;padding:0;margin:0;" id="uninit" class="btn">反初始化</button>
|
||
</div>
|
||
</div>
|
||
<div class="module">
|
||
<div class="item">
|
||
|
||
<span style="width:50px;padding:0;margin:0;" class="label">布局：</span>
|
||
</div>
|
||
<div class="item">
|
||
<span class="label">设置布局:</span>
|
||
<select id="setlayout" 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">
|
||
|
||
<button style="width:10px;padding:0;margin:0;" id="SetLayout" class="btn">设置布局</button>
|
||
|
||
<button style="width:10px;padding:0;margin:0;" id="GetLayout" class="btn">获取布局</button>
|
||
</div>
|
||
<div class="item">
|
||
|
||
<span style="width:50px;padding:0;margin:0;" class="label">预览：</span>
|
||
</div>
|
||
<div class="item">
|
||
<span class="label">预览模式：</span>
|
||
<select id="PlayType" onchange="UpdatePlayTypeValue()" value="0">
|
||
<option value="0" selected>空闲窗口预览</option>
|
||
<option value="1">选中窗口预览</option>
|
||
<option value="2">指定窗口预览</option>
|
||
</select>
|
||
</div>
|
||
<div class="item" id="PreviewWndId" style="display: none;">
|
||
<span class="label">窗口ID：</span>
|
||
<select id="playWndId" value="0">
|
||
</select>
|
||
</div>
|
||
<div class="item"><span class="label">监控点编号：</span><input id="cameraIndexCode" type="text" value=""></div>
|
||
<div class="item">
|
||
<span class="label">主子码流标识：</span>
|
||
<select id="streamMode" value="0">
|
||
<option value="0">主码流</option>
|
||
<option value="1">子码流</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">是否启用GPU硬解：</span>
|
||
<select id="gpuMode" value="0">
|
||
<option value="0">不启用</option>
|
||
<option value="1">启用</option>
|
||
</select>
|
||
</div>
|
||
<div class="item">
|
||
|
||
<button style="width:20px;padding:0;margin:0;" id="startPreview" class="btn">预览</button>
|
||
|
||
<button style="width:;padding:0;margin:0;" id="stopAllPreview" class="btn">停止全部预览</button>
|
||
</div>
|
||
<div class="item">
|
||
|
||
<span style="width:50px;padding:0;margin:0;" class="label">抓图：</span>
|
||
</div>
|
||
<div class="item">
|
||
<span class="label">抓图模式：</span>
|
||
<select id="SnapType" onchange="UpdateSnapTypeValue()" value="0">
|
||
<option value="0" selected>选中窗口抓图</option>
|
||
<option value="1">指定窗口抓图</option>
|
||
</select>
|
||
</div>
|
||
<div class="item" id="SnapShotWndId" style="display: none;">
|
||
<span class="label">窗口ID：</span>
|
||
<select id="SnapWndId" value="0">
|
||
</select>
|
||
</div>
|
||
<div class="item">
|
||
|
||
<span style="padding:0;margin:0;" class="label">抓图绝对路径：</span>
|
||
<input id="snapName" type="text" value="d:\SnapDir\test.jpg">
|
||
</div>
|
||
<div class="item">
|
||
|
||
<button style="width:10px;padding:0;margin:0;" id="SnapPic" class="btn">预览抓图</button>
|
||
</div>
|
||
</div>
|
||
<!--字符叠加 -->
|
||
<div class="module" style="height:50xp;padding:10;margin:10;">
|
||
<div class="item">
|
||
<span style="width:100px;padding:0;margin:0;" class="label">字符叠加：</span>
|
||
</div>
|
||
<div class="item">
|
||
<span class="label">叠加模式：</span>
|
||
<select id="SetOSDType" onchange="UpdateSetOSDTypeValue()" value="0">
|
||
<option value="0" selected>选中窗口叠加</option>
|
||
<option value="1">指定窗口叠加</option>
|
||
</select>
|
||
</div>
|
||
<div class="item" id="SetOSDWndId" style="display: none;">
|
||
<span class="label">窗口ID：</span>
|
||
<select id="osdWndId" value="0">
|
||
</select>
|
||
</div>
|
||
<div class="item">
|
||
<span class="label">起点X坐标：</span><input id="Xsite" type="text" value="0" maxlength="4"
|
||
onkeyup="JavaScript:textbox(this, 0, 1000)" placeholder="请输入0~1000的数字">
|
||
<span class="label">起点Y坐标：</span><input id="Ysite" type="text" value="0" maxlength="4"
|
||
onkeyup="JavaScript:textbox(this, 0, 1000)" placeholder="请输入0~1000的数字">
|
||
<span class="label" style="width:150px;padding:0;margin:0;">字体RGB颜色：</span>
|
||
<input id="RColor" type="text" style="width:50px;padding:0;margin:0;" value="255" maxlength="3"
|
||
onkeyup="JavaScript:textbox(this, 0, 255)">
|
||
<input id="GColor" type="text" style="width:50px;padding:0;margin:0;" value="0" maxlength="3"
|
||
onkeyup="JavaScript:textbox(this, 0, 255)">
|
||
<input id="BColor" type="text" style="width:50px;padding:0;margin:0;" value="0" maxlength="3"
|
||
onkeyup="JavaScript:textbox(this, 0, 255)">
|
||
<span class="label">待叠加字符串：</span><textarea id="OSDText" type="text" style="width:320px;height:100px;"
|
||
value="20"></textarea>
|
||
</div>
|
||
<div class="item">
|
||
|
||
<button style="width:;padding:0;margin:0;" id="setOSDText" class="btn">叠加字符</button>
|
||
</div>
|
||
|
||
</div>
|
||
<fieldset class="cbInfoDiv">
|
||
<legend>返回值信息</legend>
|
||
<div id="cbInfo" class="cbInfo"></div>
|
||
<button id="clear">清空</button>
|
||
</fieldset>
|
||
</div>
|
||
<div id="word" style="width:100%;height:100%;display: none;text-align: center;">
|
||
<span style="font-weight: bold;font-size: 50px;color: #fff;">摄像头</span>
|
||
</div>
|
||
</body>
|
||
|
||
<script type="text/javascript">
|
||
var oWebControl = null;// 插件对象
|
||
var bIE = (!!window.ActiveXObject || 'ActiveXObject' in window);// 是否为IE浏览器
|
||
var pubKey = '';
|
||
|
||
var iLastCoverLeft = 0;
|
||
var iLastCoverTop = 0;
|
||
var iLastCoverRight = 0;
|
||
var iLastCoverBottom = 0;
|
||
var initCount = 0;
|
||
|
||
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;
|
||
}
|
||
}
|
||
|
||
function UpdatePlayTypeValue() {
|
||
var sel = document.getElementById("PlayType");
|
||
var selectedId = sel.selectedIndex;
|
||
var v = sel.options[selectedId].value;
|
||
if (2 == v) {
|
||
//获取布局，并显示标签和窗口选择下拉框
|
||
document.getElementById("PreviewWndId").style.display = "";//显示
|
||
oWebControl.JS_RequestInterface({
|
||
funcName: "getLayout"
|
||
}).then(function (oData) {
|
||
//分析窗口数
|
||
//{"errorCode":0,"errorModule":0,"responseMsg":{"code":0,"data":"{\n \"layout\": \"2x2\",\n \"wndNum\": 4\n}\n"},"sequence":"93298475-03d0-49c9-bc3a-a94ec696f983","uuid":"{c76078b4-4f19-4198-b68d-83df1d3d71a9}"}
|
||
|
||
//"{\n \"layout\": \"2x2\",\n \"wndNum\": 4\n}\n"
|
||
var Data = JSON.stringify(oData.responseMsg.data);
|
||
//"{ \"layout\": \"2x2\", \"wndNum\": 4}"
|
||
Data = Data.replace(/\\n/g, "");
|
||
//"{ "layout": "2x2", "wndNum": 4}"
|
||
Data = Data.replace(/\\/g, "");
|
||
//{ "layout": "2x2", "wndNum": 4}"
|
||
Data = Data.replace(/\"{/g, "{");
|
||
//{ "layout": "2x2", "wndNum": 4}"
|
||
Data = Data.replace(/}\"/g, "}");
|
||
var DataNum = JSON.parse(Data).wndNum;
|
||
|
||
createSelectOption(DataNum);
|
||
});
|
||
}
|
||
else {
|
||
//隐藏标签和窗口选择下拉框
|
||
document.getElementById("PreviewWndId").style.display = "none";//隐藏
|
||
}
|
||
}
|
||
|
||
function createSelectOption(wndNum) {
|
||
var _html = "";
|
||
//先清空之后再添加
|
||
$("#playWndId").empty();
|
||
for (var _i = 0; _i < wndNum; _i++) {
|
||
_html = _html + "<option value='" + (_i + 1) + "'>" + (_i + 1) + "</option>";
|
||
}
|
||
$("#playWndId").append(_html);
|
||
}
|
||
|
||
function UpdateSnapTypeValue() {
|
||
var sel = document.getElementById("SnapType");
|
||
var selectedId = sel.selectedIndex;
|
||
var v = sel.options[selectedId].value;
|
||
if (1 == v) {
|
||
//获取布局，并显示标签和窗口选择下拉框
|
||
document.getElementById("SnapShotWndId").style.display = "";//显示
|
||
oWebControl.JS_RequestInterface({
|
||
funcName: "getLayout"
|
||
}).then(function (oData) {
|
||
//分析窗口数
|
||
var Data = JSON.stringify(oData.responseMsg.data);
|
||
Data = Data.replace(/\\n/g, "");
|
||
Data = Data.replace(/\\/g, "");
|
||
Data = Data.replace(/\"{/g, "{");
|
||
Data = Data.replace(/}\"/g, "}");
|
||
var DataNum = JSON.parse(Data).wndNum;
|
||
|
||
createSnapSelectOption(DataNum);
|
||
});
|
||
}
|
||
else {
|
||
//隐藏标签和窗口选择下拉框
|
||
document.getElementById("SnapShotWndId").style.display = "none";//隐藏
|
||
}
|
||
}
|
||
|
||
function createSnapSelectOption(wndNum) {
|
||
var _html = "";
|
||
//先清空之后再添加
|
||
$("#SnapWndId").empty();
|
||
for (var _i = 0; _i < wndNum; _i++) {
|
||
_html = _html + "<option value='" + (_i + 1) + "'>" + (_i + 1) + "</option>";
|
||
}
|
||
$("#SnapWndId").append(_html);
|
||
}
|
||
|
||
function UpdateSetOSDTypeValue() {
|
||
var sel = document.getElementById("SetOSDType");
|
||
var selectedId = sel.selectedIndex;
|
||
var v = sel.options[selectedId].value;
|
||
if (1 == v) {
|
||
//获取布局，并显示标签和窗口选择下拉框
|
||
document.getElementById("SetOSDWndId").style.display = "";//显示
|
||
oWebControl.JS_RequestInterface({
|
||
funcName: "getLayout"
|
||
}).then(function (oData) {
|
||
//分析窗口数
|
||
var Data = JSON.stringify(oData.responseMsg.data);
|
||
Data = Data.replace(/\\n/g, "");
|
||
Data = Data.replace(/\\/g, "");
|
||
Data = Data.replace(/\"{/g, "{");
|
||
Data = Data.replace(/}\"/g, "}");
|
||
var DataNum = JSON.parse(Data).wndNum;
|
||
|
||
createSetOSDSelectOption(DataNum);
|
||
});
|
||
}
|
||
else {
|
||
//隐藏标签和窗口选择下拉框
|
||
document.getElementById("SetOSDWndId").style.display = "none";//隐藏
|
||
}
|
||
}
|
||
|
||
function createSetOSDSelectOption(wndNum) {
|
||
var _html = "";
|
||
//先清空之后再添加
|
||
$("#osdWndId").empty();
|
||
for (var _i = 0; _i < wndNum; _i++) {
|
||
_html = _html + "<option value='" + (_i + 1) + "'>" + (_i + 1) + "</option>";
|
||
}
|
||
$("#osdWndId").append(_html);
|
||
}
|
||
|
||
// 标签关闭
|
||
$(window).unload(function () {
|
||
// 此处请勿调反初始化
|
||
if (oWebControl != null) {
|
||
oWebControl.JS_RequestInterface({
|
||
funcName: "stopAllPreview"
|
||
}).then(function (oData) {
|
||
showCBInfo(JSON.stringify(oData ? oData.responseMsg : ''));
|
||
});
|
||
oWebControl.JS_Disconnect().then(function () { }, function () { });
|
||
}
|
||
});
|
||
|
||
// 窗口resize
|
||
$(window).resize(function () {
|
||
if (oWebControl != null) {
|
||
var iWidth = $(window).width();
|
||
var iHeight = $(window).height();
|
||
oWebControl.JS_Resize(iWidth, iHeight);
|
||
//setWndCover();
|
||
}
|
||
});
|
||
|
||
// 滚动条scroll
|
||
$(window).scroll(function () {
|
||
if (oWebControl != null) {
|
||
var iWidth = $(window).width();
|
||
var iHeight = $(window).height();
|
||
oWebControl.JS_Resize(iWidth, iHeight);
|
||
//setWndCover();
|
||
}
|
||
});
|
||
|
||
// 设置窗口遮挡
|
||
function setWndCover() {
|
||
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 > 700) ? 700 : iCoverLeft;
|
||
iCoverTop = (iCoverTop > 400) ? 400 : iCoverTop;
|
||
iCoverRight = (iCoverRight > 700) ? 700 : 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 getCamera() {
|
||
//请求摄像头参数
|
||
$.post(ext.contextPath + '/work/camera/getCamera.do', { id: "${param.cameraId}" }, function (data) {
|
||
console.log(data);
|
||
$("#appkey").val(data[0].appkey);
|
||
$("#secret").val(data[0].secret);
|
||
$("#ip").val(data[0].url);
|
||
//监控点编号
|
||
$("#cameraIndexCode").val(data[0].cameraindexcode);
|
||
initPlugin();
|
||
}, 'json');
|
||
}
|
||
|
||
// 初始化插件
|
||
function initPlugin() {
|
||
// console.log("appkey", $("#appkey").val());
|
||
// console.log("secret", $("#secret").val());
|
||
// console.log("ip", $("#ip").val());
|
||
// console.log("cameraIndexCode", $("#cameraIndexCode").val());
|
||
oWebControl = new WebControl({
|
||
szPluginContainer: "playWnd",
|
||
iServicePortStart: 15900,
|
||
iServicePortEnd: 15909,
|
||
cbConnectSuccess: function () {
|
||
setCallbacks();
|
||
oWebControl.JS_StartService("window", {
|
||
dllPath: "./VideoPluginConnect.dll"
|
||
//dllPath: "./DllForTest-Win32.dll"
|
||
}).then(function () {
|
||
//显示区域宽高跟随div宽高
|
||
var iWidth = $("#playWnd").width();
|
||
var iHeight = $("#playWnd").height();
|
||
oWebControl.JS_CreateWnd("playWnd", iWidth, iHeight).then(function () {
|
||
console.log("JS_CreateWnd success");
|
||
//插件启动成功，自动初始化
|
||
initial();
|
||
});
|
||
}, function () {
|
||
|
||
});
|
||
},
|
||
cbConnectError: function () {
|
||
console.log("cbConnectError");
|
||
oWebControl = null;
|
||
$("#playWnd").html("插件未启动，正在尝试启动，请稍候...");
|
||
WebControl.JS_WakeUp("VideoWebPlugin://");
|
||
initCount++;
|
||
if (initCount < 3) {
|
||
//3秒后自动尝试启动
|
||
setTimeout(function () {
|
||
initPlugin();
|
||
}, 3000)
|
||
} else {
|
||
$("#playWnd").html("插件启动失败，请检查插件是否安装！");
|
||
}
|
||
},
|
||
cbConnectClose: function () {
|
||
console.log("cbConnectClose");
|
||
oWebControl = null;
|
||
}
|
||
});
|
||
}
|
||
// 获取公钥
|
||
function 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()
|
||
}
|
||
})
|
||
}
|
||
|
||
// 设置窗口控制回调
|
||
function setCallbacks() {
|
||
oWebControl.JS_SetWindowControlCallback({
|
||
cbIntegrationCallBack: cbIntegrationCallBack
|
||
});
|
||
}
|
||
|
||
// 推送消息
|
||
function cbIntegrationCallBack(oData) {
|
||
showCBInfo(JSON.stringify(oData.responseMsg));
|
||
}
|
||
|
||
// RSA加密
|
||
function setEncrypt(value) {
|
||
var encrypt = new JSEncrypt();
|
||
encrypt.setPublicKey(pubKey);
|
||
return encrypt.encrypt(value);
|
||
}
|
||
//调用插件显示
|
||
function doViewCamera() {
|
||
setTimeout(initPlugin, 200);
|
||
//延时1秒初始化
|
||
setTimeout(initial, 1000);
|
||
//延时2秒预览
|
||
setTimeout(startPreviewClick, 2000);
|
||
}
|
||
|
||
//自动初始化参数方法
|
||
function initial() {
|
||
getPubKey(function () {
|
||
var appkey = $("#appkey").val();
|
||
var secret = setEncrypt($("#secret").val());
|
||
var ip = $("#ip").val();
|
||
var szPort = $("#port").val();
|
||
var snapDir = $("#snapDir").val();
|
||
var videoDir = $("#videoDir").val();
|
||
var layout = $("#layout").val();
|
||
var encryptedFields = ['secret'];
|
||
|
||
appkey = appkey.replace(/(^\s*)/g, "");
|
||
appkey = appkey.replace(/(\s*$)/g, "");
|
||
|
||
secret = secret.replace(/(^\s*)/g, "");
|
||
secret = secret.replace(/(\s*$)/g, "");
|
||
|
||
ip = ip.replace(/(^\s*)/g, "");
|
||
ip = ip.replace(/(\s*$)/g, "");
|
||
|
||
szPort = szPort.replace(/(^\s*)/g, "");
|
||
szPort = szPort.replace(/(\s*$)/g, "");
|
||
|
||
snapDir = snapDir.replace(/(^\s*)/g, "");
|
||
snapDir = snapDir.replace(/(\s*$)/g, "");
|
||
|
||
videoDir = videoDir.replace(/(^\s*)/g, "");
|
||
videoDir = videoDir.replace(/(\s*$)/g, "");
|
||
|
||
var port = parseInt(szPort);
|
||
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固定加密，其它根据用户勾选加密
|
||
if (value == 'ip') {
|
||
ip = setEncrypt(ip)
|
||
}
|
||
if (value == 'appkey') {
|
||
appkey = setEncrypt(appkey)
|
||
}
|
||
if (value == 'snapDir') {
|
||
snapDir = setEncrypt(snapDir)
|
||
}
|
||
if (value == 'videoDir') {
|
||
videoDir = setEncrypt(videoDir)
|
||
}
|
||
if (value == 'layout') {
|
||
layout = setEncrypt(layout)
|
||
}
|
||
}
|
||
})
|
||
encryptedFields = encryptedFields.join(",");
|
||
|
||
if (!appkey) {
|
||
showCBInfo("appkey不能为空！", 'error');
|
||
return
|
||
}
|
||
if (!$("#secret").val()) {
|
||
showCBInfo("secret不能为空！", 'error');
|
||
return
|
||
}
|
||
if (!ip) {
|
||
showCBInfo("ip不能为空！", 'error');
|
||
return
|
||
}
|
||
if (!$("#port").val()) {
|
||
showCBInfo("端口不能为空！", 'error');
|
||
return
|
||
} else if (!/^([0-9]|[1-9]\d{1,3}|[1-5]\d{4}|6[0-5]{2}[0-3][0-5])$/.test($("#port").val())) {
|
||
showCBInfo("端口填写有误！", 'error');
|
||
return
|
||
}
|
||
/* console.log({
|
||
appkey: appkey,
|
||
secret: secret,
|
||
ip: ip,
|
||
playMode: 0, // 预览
|
||
port: port,
|
||
snapDir: snapDir,
|
||
videoDir: videoDir,
|
||
layout: layout,
|
||
enableHTTPS: enableHttps,
|
||
encryptedFields: encryptedFields
|
||
})*/
|
||
|
||
oWebControl.JS_RequestInterface({
|
||
funcName: "init",
|
||
argument: JSON.stringify({
|
||
appkey: appkey,
|
||
secret: secret,
|
||
ip: ip,
|
||
playMode: 0, // 预览
|
||
port: port,
|
||
snapDir: snapDir,
|
||
videoDir: videoDir,
|
||
layout: layout,
|
||
enableHTTPS: enableHttps,
|
||
encryptedFields: encryptedFields
|
||
})
|
||
}).then(function (oData) {
|
||
showCBInfo(JSON.stringify(oData ? oData.responseMsg : ''));
|
||
});
|
||
});
|
||
//自动预览
|
||
setTimeout(startPreviewClick(), 2000);
|
||
|
||
}
|
||
// 初始化
|
||
$("#init").click(function () {
|
||
getPubKey(function () {
|
||
var appkey = $("#appkey").val();
|
||
var secret = setEncrypt($("#secret").val());
|
||
var ip = $("#ip").val();
|
||
var szPort = $("#port").val();
|
||
var snapDir = $("#snapDir").val();
|
||
var videoDir = $("#videoDir").val();
|
||
var layout = $("#layout").val();
|
||
var encryptedFields = ['secret'];
|
||
|
||
appkey = appkey.replace(/(^\s*)/g, "");
|
||
appkey = appkey.replace(/(\s*$)/g, "");
|
||
|
||
secret = secret.replace(/(^\s*)/g, "");
|
||
secret = secret.replace(/(\s*$)/g, "");
|
||
|
||
ip = ip.replace(/(^\s*)/g, "");
|
||
ip = ip.replace(/(\s*$)/g, "");
|
||
|
||
szPort = szPort.replace(/(^\s*)/g, "");
|
||
szPort = szPort.replace(/(\s*$)/g, "");
|
||
|
||
snapDir = snapDir.replace(/(^\s*)/g, "");
|
||
snapDir = snapDir.replace(/(\s*$)/g, "");
|
||
|
||
videoDir = videoDir.replace(/(^\s*)/g, "");
|
||
videoDir = videoDir.replace(/(\s*$)/g, "");
|
||
|
||
var port = parseInt(szPort);
|
||
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固定加密，其它根据用户勾选加密
|
||
if (value == 'ip') {
|
||
ip = setEncrypt(ip)
|
||
}
|
||
if (value == 'appkey') {
|
||
appkey = setEncrypt(appkey)
|
||
}
|
||
if (value == 'snapDir') {
|
||
snapDir = setEncrypt(snapDir)
|
||
}
|
||
if (value == 'videoDir') {
|
||
videoDir = setEncrypt(videoDir)
|
||
}
|
||
if (value == 'layout') {
|
||
layout = setEncrypt(layout)
|
||
}
|
||
}
|
||
})
|
||
encryptedFields = encryptedFields.join(",");
|
||
|
||
if (!appkey) {
|
||
showCBInfo("appkey不能为空！", 'error');
|
||
return
|
||
}
|
||
if (!$("#secret").val()) {
|
||
showCBInfo("secret不能为空！", 'error');
|
||
return
|
||
}
|
||
if (!ip) {
|
||
showCBInfo("ip不能为空！", 'error');
|
||
return
|
||
}
|
||
if (!$("#port").val()) {
|
||
showCBInfo("端口不能为空！", 'error');
|
||
return
|
||
} else if (!/^([0-9]|[1-9]\d{1,3}|[1-5]\d{4}|6[0-5]{2}[0-3][0-5])$/.test($("#port").val())) {
|
||
showCBInfo("端口填写有误！", 'error');
|
||
return
|
||
}
|
||
console.log({
|
||
appkey: appkey,
|
||
secret: secret,
|
||
ip: ip,
|
||
playMode: 0, // 预览
|
||
port: port,
|
||
snapDir: snapDir,
|
||
videoDir: videoDir,
|
||
layout: layout,
|
||
enableHTTPS: enableHttps,
|
||
encryptedFields: encryptedFields
|
||
})
|
||
|
||
oWebControl.JS_RequestInterface({
|
||
funcName: "init",
|
||
argument: JSON.stringify({
|
||
appkey: appkey,
|
||
secret: secret,
|
||
ip: ip,
|
||
playMode: 0, // 预览
|
||
port: port,
|
||
snapDir: snapDir,
|
||
videoDir: videoDir,
|
||
layout: layout,
|
||
enableHTTPS: enableHttps,
|
||
encryptedFields: encryptedFields
|
||
})
|
||
}).then(function (oData) {
|
||
showCBInfo(JSON.stringify(oData ? oData.responseMsg : ''));
|
||
});
|
||
})
|
||
});
|
||
|
||
//设置当前布局
|
||
$("#SetLayout").click(function () {
|
||
var layout = $("#setlayout").val();
|
||
|
||
oWebControl.JS_RequestInterface({
|
||
funcName: "setLayout",
|
||
argument: JSON.stringify({
|
||
layout: layout
|
||
})
|
||
}).then(function (oData) {
|
||
showCBInfo(JSON.stringify(oData ? oData.responseMsg : ''));
|
||
UpdatePlayTypeValue();
|
||
UpdateSnapTypeValue();
|
||
UpdateSetOSDTypeValue();
|
||
});
|
||
})
|
||
|
||
//获取当前布局
|
||
$("#GetLayout").click(function () {
|
||
oWebControl.JS_RequestInterface({
|
||
funcName: "getLayout"
|
||
}).then(function (oData) {
|
||
showCBInfo(JSON.stringify(oData ? oData.responseMsg : ''));
|
||
UpdatePlayTypeValue();
|
||
UpdateSnapTypeValue();
|
||
UpdateSetOSDTypeValue();
|
||
});
|
||
})
|
||
|
||
//抓图
|
||
$("#SnapPic").click(function () {
|
||
var snapName = $("#snapName").val();
|
||
var wndId = 0; //选中窗口抓图
|
||
|
||
snapName = snapName.replace(/(^\s*)/g, "");
|
||
snapName = snapName.replace(/(\s*$)/g, "");
|
||
|
||
var sel = document.getElementById("SnapType");
|
||
var selectedId = sel.selectedIndex;
|
||
var v = sel.options[selectedId].value;
|
||
if (1 == v)//指定窗口抓图
|
||
{
|
||
wndId = parseInt($("#SnapWndId option:selected").val(), 10);
|
||
}
|
||
else if (0 == v) //选中窗口抓图
|
||
{
|
||
wndId = 0;
|
||
}
|
||
|
||
oWebControl.JS_RequestInterface({
|
||
funcName: "snapShot",
|
||
argument: JSON.stringify({
|
||
name: snapName,
|
||
wndId: wndId
|
||
})
|
||
}).then(function (oData) {
|
||
showCBInfo(JSON.stringify(oData ? oData.responseMsg : ''));
|
||
});
|
||
})
|
||
var startPreviewClick = function () {
|
||
var cameraIndexCode = $("#cameraIndexCode ").val();
|
||
var streamMode = +$("#streamMode").val();
|
||
var transMode = +$("#transMode").val();
|
||
var gpuMode = +$("#gpuMode").val();
|
||
var wndId = -1; //默认为空闲窗口回放
|
||
|
||
cameraIndexCode = cameraIndexCode.replace(/(^\s*)/g, "");
|
||
cameraIndexCode = cameraIndexCode.replace(/(\s*$)/g, "");
|
||
|
||
var sel = document.getElementById("PlayType");
|
||
var selectedId = sel.selectedIndex;
|
||
var v = sel.options[selectedId].value;
|
||
if (2 == v)//指定窗口回放
|
||
{
|
||
wndId = parseInt($("#playWndId option:selected").val(), 10);
|
||
}
|
||
else if (1 == v) //选中窗口回放
|
||
{
|
||
wndId = 0;
|
||
}
|
||
|
||
if (!cameraIndexCode) {
|
||
showCBInfo("监控点编号不能为空！", 'error');
|
||
return
|
||
}
|
||
|
||
oWebControl.JS_RequestInterface({
|
||
funcName: "startPreview",
|
||
argument: JSON.stringify({
|
||
cameraIndexCode: cameraIndexCode,
|
||
streamMode: streamMode,
|
||
transMode: transMode,
|
||
gpuMode: gpuMode,
|
||
wndId: wndId
|
||
})
|
||
}).then(function (oData) {
|
||
showCBInfo(JSON.stringify(oData ? oData.responseMsg : ''));
|
||
});
|
||
};
|
||
// 视频预览
|
||
$("#startPreview").click(startPreviewClick)
|
||
|
||
//字符叠加
|
||
$("#setOSDText").click(function () {
|
||
var text = $("#OSDText").val();
|
||
var x = +$("#Xsite").val();
|
||
var y = +$("#Ysite").val();
|
||
var ColorR = parseInt($("#RColor").val());
|
||
var ColorG = parseInt($("#GColor").val());
|
||
var ColorB = parseInt($("#BColor").val());
|
||
var Color = 65536 * ColorB + 256 * ColorG + ColorR;
|
||
var wndId = 0;
|
||
|
||
var sel = document.getElementById("SetOSDType");
|
||
var selectedId = sel.selectedIndex;
|
||
var v = sel.options[selectedId].value;
|
||
if (1 == v)//指定窗口字符叠加
|
||
{
|
||
wndId = parseInt($("#osdWndId option:selected").val(), 10);
|
||
}
|
||
else //空闲窗口字符叠加
|
||
{
|
||
wndId = 0;
|
||
}
|
||
|
||
oWebControl.JS_RequestInterface({
|
||
funcName: "drawOSD",
|
||
argument: JSON.stringify({
|
||
text: text,
|
||
x: x,
|
||
y: y,
|
||
color: Color,
|
||
wndId: wndId
|
||
})
|
||
}).then(function (oData) {
|
||
showCBInfo(JSON.stringify(oData ? oData.responseMsg : ''));
|
||
});
|
||
})
|
||
|
||
// 停止预览
|
||
$("#stopAllPreview").click(function () {
|
||
oWebControl.JS_RequestInterface({
|
||
funcName: "stopAllPreview"
|
||
}).then(function (oData) {
|
||
showCBInfo(JSON.stringify(oData ? oData.responseMsg : ''));
|
||
});
|
||
})
|
||
|
||
// 反初始化
|
||
function uninit() {
|
||
oWebControl.JS_RequestInterface({
|
||
funcName: "uninit"
|
||
}).then(function (oData) {
|
||
showCBInfo(JSON.stringify(oData ? oData.responseMsg : ''));
|
||
});
|
||
}
|
||
$("#uninit").click(uninit)
|
||
|
||
|
||
// 显示回调信息
|
||
function showCBInfo(szInfo, type) {
|
||
if (type === 'error') {
|
||
szInfo = "<div style='color: red;'>" + 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('');
|
||
})
|
||
|
||
// 格式化时间
|
||
function dateFormat(oDate, fmt) {
|
||
var o = {
|
||
"M+": oDate.getMonth() + 1, //月份
|
||
"d+": oDate.getDate(), //日
|
||
"h+": oDate.getHours(), //小时
|
||
"m+": oDate.getMinutes(), //分
|
||
"s+": oDate.getSeconds(), //秒
|
||
"q+": Math.floor((oDate.getMonth() + 3) / 3), //季度
|
||
"S": oDate.getMilliseconds()//毫秒
|
||
};
|
||
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;
|
||
}
|
||
|
||
function textbox(obj, min, max) {
|
||
obj.value = obj.value.replace(/[^\d]/g, '');
|
||
if (parseInt(obj.value) == obj.value && parseInt(obj.value) >= min && parseInt(obj.value) <= max) { }
|
||
else {
|
||
if (parseInt(obj.value) < min) {
|
||
obj.value = min;
|
||
}
|
||
if (parseInt(obj.value) > max) {
|
||
obj.value = max;
|
||
}
|
||
}
|
||
}
|
||
//自动执行第一步
|
||
$(function () {
|
||
//背景色
|
||
document.body.style.backgroundColor = "#" + '${param.backgroundColor}';
|
||
//启动插件
|
||
if ('${param.videoType}' == "switch") {
|
||
getCamera();
|
||
document.getElementById("playWnd").style.height = document.documentElement.offsetHeight + "px";
|
||
document.getElementById("playWnd").style.width = document.documentElement.offsetWidth + "px";
|
||
// setTimeout(function () {
|
||
// // console.log(getComputedStyle(window.parent.frameElement, null));
|
||
// console.log(getComputedStyle(window.parent.document.getElementById('${param.fId}'), null));
|
||
// console.log(window.parent.document.getElementById('${param.fId}'));
|
||
// console.log(getComputedStyle(window.parent.document.getElementById('${param.fId}'), null).width);
|
||
// console.log(getComputedStyle(window.parent.document.getElementById('${param.fId}'), null).height);
|
||
// console.log(getComputedStyle(window.parent.document.getElementById('${param.fId}'), null).left);
|
||
// console.log(getComputedStyle(window.parent.document.getElementById('${param.fId}'), null).right);
|
||
// console.log('--------------------------')
|
||
// console.log($('#'+'${param.fId}', window.parent.document).position().top);
|
||
// console.log($('#'+'${param.fId}', window.parent.document).position().left);
|
||
// // console.log(getComputedStyle(window.parent.frameElement, null).left);
|
||
// }, 1000);
|
||
// console.log("fId",'${param.fId}');
|
||
var frameId = '#'+'${param.fId}';
|
||
document.getElementById("playWnd").style.position = "absolute";
|
||
document.getElementById("playWnd").style.top = $(frameId, window.parent.document).position().top + 'px';
|
||
document.getElementById("playWnd").style.left = $(frameId, window.parent.document).position().left + "px";
|
||
}else{
|
||
$('#word').show();
|
||
$('#playWnd').remove();
|
||
$('#operate').remove();
|
||
//document.getElementById('word').style.display = 'block';
|
||
}
|
||
})
|
||
</script> |