1052 lines
39 KiB
Plaintext
1052 lines
39 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"%>
|
|||
|
|
<!DOCTYPE html>
|
|||
|
|
<html>
|
|||
|
|
|
|||
|
|
<head>
|
|||
|
|
<title>预览Demo</title>
|
|||
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
|||
|
|
<meta http-equiv="Pragma" content="no-cache" />
|
|||
|
|
<meta http-equiv="Cache-Control" content="no-cache, must-revalidate" />
|
|||
|
|
<meta http-equiv="Expires" content="0" />
|
|||
|
|
<%String contextPath = request.getContextPath();%>
|
|||
|
|
<%String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + request.getContextPath();%>
|
|||
|
|
<%String serverPath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort();%>
|
|||
|
|
<script type="text/javascript">
|
|||
|
|
var ext = ext || {};
|
|||
|
|
ext.contextPath = '<%=contextPath%>';
|
|||
|
|
ext.basePath = '<%=basePath%>';
|
|||
|
|
ext.serverPath = '<%=serverPath%>';
|
|||
|
|
</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"></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>
|
|||
|
|
</body>
|
|||
|
|
<%-- 引入jQuery --%>
|
|||
|
|
<script type="text/javascript" src="<%=contextPath%>/node_modules/jquery/dist/jquery.min.js" charset="utf-8"></script>
|
|||
|
|
<script type="text/javascript" src="<%=contextPath%>/node_modules/WebControl/jsencrypt.min.js"></script>
|
|||
|
|
<script type="text/javascript" src="<%=contextPath%>/node_modules/WebControl/jsWebControl-1.0.0.min.js"></script>
|
|||
|
|
|
|||
|
|
<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 initPlugin() {
|
|||
|
|
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() {
|
|||
|
|
$("#appkey").val('21131562');
|
|||
|
|
$("#secret").val('7LRY5ubS5tunJZm0I8IE')
|
|||
|
|
$("#ip").val('192.168.221.251')
|
|||
|
|
//监控点编号
|
|||
|
|
$("#cameraIndexCode").val('1d83239fb92442e685146de84952e0be')
|
|||
|
|
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 () {
|
|||
|
|
//启动插件
|
|||
|
|
initPlugin();
|
|||
|
|
})
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
</html>
|