<!doctype html>
<html>
<head>
<title></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" />
</head>
<style>
body {
margin: 0px;
}
</style>
<body>
<div>
<div id="divPlugin" class="plugin"></div>
<fieldset class="playback" style="display: none">
<legend>回放</legend>
<table width="100%" cellpadding="0" cellspacing="3" border="0">
<tr>
<td class="tt">码流类型</td>
<td>
<select id="record_streamtype" class="sel">
<option value="1">主码流</option>
<option value="2">子码流</option>
</select>
</td>
</tr>
<tr>
<td class="tt">开始时间</td>
<td>
<input id="starttime" type="text" class="txt" value="2013-12-10 00:00:00" />（时间格式：2013-11-11 12:34:56）
</td>
</tr>
<tr>
<td class="tt">结束时间</td>
<td>
<input id="endtime" type="text" class="txt" value="2013-12-11 23:59:59" />
<input type="button" class="btn" value="搜索" />
</td>
</tr>
<tr>
<td colspan="2">
<div id="searchdiv" class="searchdiv">
<table id="searchlist" class="searchlist" cellpadding="0" cellspacing="0" border="0"></table>
</div>
</td>
</tr>
<tr>
<td colspan="2">
<input type="button" class="btn2" value="开始回放" onclick="clickStartPlayback();" />
<input type="button" class="btn2" value="停止回放" onclick="clickStopPlayback();" />
<input id="transstream" type="checkbox" class="vtop" /> 启用转码码流
</td>
</tr>
</table>
</fieldset>
</div>
</body>
<script src="jquery-1.7.1.min.js"></script>
<script src="codebase/webVideoCtrl.js"></script>
<script>
function invockIframeMethod(msg) {
// 是用widow调用vue绑定的vueDefinedMyProp方法
window.parent['vueDefined'](msg);
}
const channelMap = [
{iChannelID: 2, ip: "192.168.1.64"},
{iChannelID: 1, ip: "192.168.1.63"},
];
const oLiveView = {
iProtocol: 1, // protocol 1：http, 2:https
szIP: "192.168.1.63", // protocol ip
szPort: "8000", // protocol port
szUsername: "admin", // device username
szPassword: "1234qwer", // device password
iStreamType: 1, // stream 1：main stream 2：sub-stream 3：third stream 4：transcode stream
iChannelID: 2, // channel no
bZeroChannel: false // zero channel
};
$(function () {
// 检查插件是否已经安装过
const iRet = WebVideoCtrl.I_CheckPluginInstall();
if (-1 == iRet) {
alert("您还未安装过插件，双击开发包目录里的WebComponentsKit.exe安装！");
return;
}
// 获取窗体大小并设置控件大小
const winHeight = document.documentElement.clientHeight;
const winWidth = document.documentElement.clientWidth;
$(".plugin").attr("style", "width: " + winWidth + "px; height: " + winHeight + "px;");
const oPlugin = {
iWidth: 590, // plugin width
iHeight: 420 // plugin height
};
// 初始化插件参数及插入插件
WebVideoCtrl.I_InitPlugin(oPlugin.iWidth, oPlugin.iHeight, {
bWndFull: true,//是否支持单窗口双击全屏，默认支持 true:支持 false:不支持
iWndowType: 2,
cbInitPluginComplete: function () {
WebVideoCtrl.I_InsertOBJECTPlugin("divPlugin");
// 检查插件是否最新
if (-1 == WebVideoCtrl.I_CheckPluginVersion()) {
alert("检测到新的插件版本，双击开发包目录里的WebComponentsKit.exe升级！");
return;
}
// 登录设备
login();
}
});
// 关闭浏览器
$(window).unload(function () {
WebVideoCtrl.I_Stop();
});
});
// 登录设备
function login() {
// 登录设备
WebVideoCtrl.I_Login(oLiveView.szIP, oLiveView.iProtocol, oLiveView.szPort, oLiveView.szUsername, oLiveView.szPassword, {
success: function (xmlDoc) {
startPlayReal(null, channelMap[0].ip);
},
error: function (xmlDoc) {
var ec = WebVideoCtrl.I_GetLastError()
alert(oLiveView.szIP + ":" + oLiveView.szPort + " " + oLiveView.szUsername+ " " + oLiveView.szPassword + "登录失败，请检查设备IP和登录密码");
}
});
}
// 开始预览
function startPlayReal(obj,ip) {
clickStopPlayback();
WebVideoCtrl.I_ChangeWndNum(1);
if (null !== obj) {
oLiveView.szIP = obj.ip;
oLiveView.szUsername = obj.username;
oLiveView.szPassword = obj.password;
oLiveView.iChannelID = 1;
// oLiveView.iChannelID = obj.channel;
}
var channel;
for(var i=0; i<channelMap.length; i++) {
if(channelMap[i].ip === ip){
channel = channelMap[i].iChannelID
}
}
oLiveView.iChannelID = channel;
const szDeviceIdentify = oLiveView.szIP + "_" + oLiveView.szPort;
//alert(szDeviceIdentify);
console.log(oLiveView);
setTimeout(function () {
WebVideoCtrl.I_StartRealPlay(szDeviceIdentify, {
iStreamType: oLiveView.iStreamType,
iChannelID: oLiveView.iChannelID,
bZeroChannel: oLiveView.bZeroChannel
});
}, 1000);
}
// 停止预览
function stopPlayReal() {
var oWndInfo = WebVideoCtrl.I_GetWindowStatus(0),
szInfo = "";
if (oWndInfo != null) {
WebVideoCtrl.I_Stop({
success: function () {
szInfo = "停止预览成功！";
//showOPInfo(oWndInfo.szDeviceIdentify + " " + szInfo);
},
error: function () {
szInfo = "停止预览失败！";
//showOPInfo(oWndInfo.szDeviceIdentify + " " + szInfo);
}
});
}
}
var g_iSearchTimes = 0
var startInit
function search(iType, startTime, endTime) {
startInit = startTime;
var szDeviceIdentify = oLiveView.szIP,
iChannelID = parseInt(oLiveView.iChannelID, 10),
// bZeroChannel = $("#channels option").eq($("#channels").get(0).selectedIndex).attr("bZero") == "true" ? true : false,
iStreamType = parseInt(oLiveView.iStreamType, 10),
szStartTime = startTime,
szEndTime = endTime;
if (null == szDeviceIdentify) {
return;
}
// if (bZeroChannel) {// 零通道不支持录像搜索
// return;
// }
if (0 == iType) {// 首次搜索
//$("#searchlist").empty();
g_iSearchTimes = 0;
}
WebVideoCtrl.I_RecordSearch(szDeviceIdentify, iChannelID, szStartTime, szEndTime, {
iStreamType: iStreamType,
iSearchPos: g_iSearchTimes * 40,
success: function (xmlDoc) {
if ("MORE" === $(xmlDoc).find("responseStatusStrg").eq(0).text()) {
for(var i = 0, nLen = $(xmlDoc).find("searchMatchItem").length; i < nLen; i++) {
var szPlaybackURI = $(xmlDoc).find("playbackURI").eq(i).text();
if(szPlaybackURI.indexOf("name=") < 0) {
break;
}
var szStartTime = $(xmlDoc).find("startTime").eq(i).text();
var szEndTime = $(xmlDoc).find("endTime").eq(i).text();
var szFileName = szPlaybackURI.substring(szPlaybackURI.indexOf("name=") + 5, szPlaybackURI.indexOf("&size="));
var objTr = $("#searchlist").get(0).insertRow(-1);
var objTd = objTr.insertCell(0);
objTd.id = "downloadTd" + i;
objTd.innerHTML = g_iSearchTimes * 40 + (i + 1);
objTd = objTr.insertCell(1);
objTd.width = "30%";
objTd.innerHTML = szFileName;
objTd = objTr.insertCell(2);
objTd.width = "30%";
objTd.innerHTML = (szStartTime.replace("T", " ")).replace("Z", "");
objTd = objTr.insertCell(3);
objTd.width = "30%";
objTd.innerHTML = (szEndTime.replace("T", " ")).replace("Z", "");
objTd = objTr.insertCell(4);
objTd.width = "10%";
objTd.innerHTML = "<a href='javascript:;' onclick='clickStartDownloadRecord(" + (i + g_iSearchTimes * 40) + ");'>下载</a>";
$("#downloadTd" + (i + g_iSearchTimes * 40)).data("fileName", szFileName);
$("#downloadTd" + (i + g_iSearchTimes * 40)).data("playbackURI", szPlaybackURI);
}
g_iSearchTimes++;
search(1,szStartTime,szEndTime);// 继续搜索
} else if ("OK" === $(xmlDoc).find("responseStatusStrg").eq(0).text()) {
var iLength = $(xmlDoc).find("searchMatchItem").length;
for(var i = 0; i < iLength; i++) {
var szPlaybackURI = $(xmlDoc).find("playbackURI").eq(i).text();
if(szPlaybackURI.indexOf("name=") < 0) {
break;
}
var szStartTime = $(xmlDoc).find("startTime").eq(i).text();
var szEndTime = $(xmlDoc).find("endTime").eq(i).text();
var szFileName = szPlaybackURI.substring(szPlaybackURI.indexOf("name=") + 5, szPlaybackURI.indexOf("&size="));
var objTr = $("#searchlist").get(0).insertRow(-1);
var objTd = objTr.insertCell(0);
objTd.id = "downloadTd" + i;
objTd.innerHTML = g_iSearchTimes * 40 + (i + 1);
objTd = objTr.insertCell(1);
objTd.width = "30%";
objTd.innerHTML = szFileName;
objTd = objTr.insertCell(2);
objTd.width = "30%";
objTd.innerHTML = (szStartTime.replace("T", " ")).replace("Z", "");
objTd = objTr.insertCell(3);
objTd.width = "30%";
objTd.innerHTML = (szEndTime.replace("T", " ")).replace("Z", "");
objTd = objTr.insertCell(4);
objTd.width = "10%";
objTd.innerHTML = "<a href='javascript:;' onclick='clickStartDownloadRecord(" + (i + g_iSearchTimes * 40) + ");'>下载</a>";
$("#downloadTd" + (i + g_iSearchTimes * 40)).data("fileName", szFileName);
$("#downloadTd" + (i + g_iSearchTimes * 40)).data("playbackURI", szPlaybackURI);
}
//showOPInfo(szDeviceIdentify + " 搜索录像文件成功！");
invockIframeMethod("0搜索录像文件成功！");
clickStartPlayback(startInit, szEndTime);
} else if("NO MATCHES" === $(xmlDoc).find("responseStatusStrg").eq(0).text()) {
setTimeout(function() {
//showOPInfo(szDeviceIdentify + " 没有录像文件！");
invockIframeMethod("1没有录像文件！");
}, 50);
}
},
error: function (status, xmlDoc) {
//showOPInfo(szDeviceIdentify + " 搜索录像文件失败！", status, xmlDoc);
invockIframeMethod("-1搜索录像文件失败！");
}
});
};
// 开始回放
function clickStartPlayback(startTime, endTime) {
var oWndInfo = WebVideoCtrl.I_GetWindowStatus(0),
szDeviceIdentify = oLiveView.szIP,
iRtspPort = parseInt(oLiveView.szPort, 10),
iStreamType = parseInt(oLiveView.iStreamType, 10),
// bZeroChannel = $("#channels option").eq($("#channels").get(0).selectedIndex).attr("bZero") == "true" ? true : false,
iChannelID = parseInt(oLiveView.iChannelID, 10),
szStartTime = startTime,
szEndTime = endTime,
szInfo = "",
bChecked = false,
iRet = -1;
if (null == szDeviceIdentify) {
return;
}
// if (bZeroChannel) {// 零通道不支持回放
// return;
// }
var startPlayback = function () {
if (bChecked) {// 启用转码回放
var oTransCodeParam = {
TransFrameRate: "14",// 0：全帧率，5：1，6：2，7：4，8：6，9：8，10：10，11：12，12：16，14：15，15：18，13：20，16：22
TransResolution: "1",// 255：Auto，3：4CIF，2：QCIF，1：CIF
TransBitrate: "19"// 2：32K，3：48K，4：64K，5：80K，6：96K，7：128K，8：160K，9：192K，10：224K，11：256K，12：320K，13：384K，14：448K，15：512K，16：640K，17：768K，18：896K，19：1024K，20：1280K，21：1536K，22：1792K，23：2048K，24：3072K，25：4096K，26：8192K
};
WebVideoCtrl.I_StartPlayback(szDeviceIdentify, {
iRtspPort: iRtspPort,
iStreamType: iStreamType,
iChannelID: iChannelID,
szStartTime: szStartTime,
szEndTime: szEndTime,
oTransCodeParam: oTransCodeParam,
success: function () {
szInfo = "开始回放成功！";
showOPInfo(szDeviceIdentify + " " + szInfo);
},
error: function (status, xmlDoc) {
if (403 === status) {
szInfo = "设备不支持Websocket取流！";
} else {
szInfo = "开始回放失败！";
}
showOPInfo(szDeviceIdentify + " " + szInfo);
}
});
} else {
WebVideoCtrl.I_StartPlayback(szDeviceIdentify, {
iRtspPort: iRtspPort,
iStreamType: iStreamType,
iChannelID: iChannelID,
szStartTime: szStartTime,
szEndTime: szEndTime,
success: function () {
szInfo = "0开始回放成功！";
//showOPInfo(szDeviceIdentify + " " + szInfo);
invockIframeMethod(szInfo);
},
error: function (status, xmlDoc) {
if (403 === status) {
szInfo = "-1设备不支持Websocket取流！";
} else {
szInfo = "-1开始回放失败！";
}
//showOPInfo(szDeviceIdentify + " " + szInfo);
invockIframeMethod(szInfo);
}
});
}
};
if (oWndInfo != null) {// 已经在播放了，先停止
WebVideoCtrl.I_Stop({
success: function () {
startPlayback();
}
});
} else {
startPlayback();
}
};
// 停止回放
function clickStopPlayback() {
var oWndInfo = WebVideoCtrl.I_GetWindowStatus(0),
szInfo = "";
if (oWndInfo != null) {
WebVideoCtrl.I_Stop({
success: function () {
szInfo = "停止回放成功！";
//showOPInfo(oWndInfo.szDeviceIdentify + " " + szInfo);
invockIframeMethod(szInfo);
},
error: function () {
szInfo = "停止回放失败！";
//showOPInfo(oWndInfo.szDeviceIdentify + " " + szInfo);
//invockIframeMethod(szInfo);
}
});
}
}
</script>
</html>
