须知：
- 3.0开发包功能比较全，但是只支持ie浏览器，所以使用的功能相对来说较少的3.2开发包，开发包官网上可以下载，可自行下载，并按照要求引入文件。
- 我的项目需求是左侧显示摄像头树状列表，中间部分显示摄像头信息，摄像头要支持预览、截图、录像、回放、云台的功能。
- 本示例演示的是对接nvr预览通道视频，和直接对接摄像头也差不太多，可以参考。
引入3.2必要js文件
<!--web3.2控件包必要的js文件引入-->
<script src="./js/codebase/encryption/AES.js"></script>
<script src="./js/codebase/encryption/cryptico.min.js"></script>
<script src="./js/codebase/encryption/crypto-3.1.2.min.js"></script>
<script src="./js/codebase/webVideoCtrl.js"></script>全局的config配置文件
var CONFIG_OBJ = {
Video_Total:null, //web3.2插件的所有方法
NVR_Data:{
ip:"192.168.12.68",
port:80,
userName:"admin",
passWord:"ht123456",
szDeviceIdentify:null, //格式：iP_port
streamType:2, //码流类型 1主码流 2子码流 3第三码流 4转码码流
rtspPort:null, //RTSP端口
currentChannel:{}, //当前选择的通道
allChannel:[], //已登录的全部通道
}
};海康视频用到的相关方法，包括登录、预览、抓图、回放、录像、云台等功能
function showOPInfo(data,data1,data2) {
console.log(data,data1,data2)
}
function videoFunc() {
var that = this;
this.clickLogin = function clickLogin(paramObj) {
var szIP = paramObj.szIP,
szPort = paramObj.szPort,
szUsername = paramObj.szUsername,
szPassword = paramObj.szPassword;
if ("" == szIP || "" == szPort) {
return;
}
CONFIG_OBJ.NVR_Data.szDeviceIdentify = szIP + "_" + szPort;
var iRet = WebVideoCtrl.I_Login(szIP, 1, szPort, szUsername, szPassword, {
success: function () {
console.log(CONFIG_OBJ.NVR_Data.szDeviceIdentify + " 登录成功！");
that.getChannelInfo();
that.getDevicePort(paramObj.iWndIndex);
},
error: function (status, xmlDoc) {
console.log(CONFIG_OBJ.NVR_Data.szDeviceIdentify + " 登录失败！", status, xmlDoc);
}
});
if (-1 == iRet) {
showOPInfo(CONFIG_OBJ.NVR_Data.szDeviceIdentify + " 已登录过！");
that.getDevicePort(paramObj.iWndIndex);
}
};
// 窗口分割数
this.changeWndNum = function changeWndNum(iType) {
iType = parseInt(iType, 10);
WebVideoCtrl.I_ChangeWndNum(iType);
};
// 退出登录
this.clickLogout = function clickLogout() {
if (null == CONFIG_OBJ.NVR_Data.szDeviceIdentify) {
return;
}
var iRet = WebVideoCtrl.I_Logout(CONFIG_OBJ.NVR_Data.szDeviceIdentify);
if (0 == iRet) {
console.log("退出成功！");
CONFIG_OBJ.NVR_Data.szDeviceIdentify = null;
CONFIG_OBJ.NVR_Data.allChannel = [];
CONFIG_OBJ.NVR_Data.currentChannel = {};
CONFIG_OBJ.NVR_Data.rtspPort = null;
} else {
console.log("退出失败！");
}
};
//销毁
this.DestroyWorker = function DestroyWorker() {
WebVideoCtrl.I_DestroyWorker();
};
// 获取端口
this.getDevicePort = function getDevicePort(g_iWndIndex) {
showOPInfo("开始获取端口");
if (null == CONFIG_OBJ.NVR_Data.szDeviceIdentify) {
return;
}
var oPort = WebVideoCtrl.I_GetDevicePort(CONFIG_OBJ.NVR_Data.szDeviceIdentify);
showOPInfo(oPort);
if (oPort != null) {
//默认播放第一个通道的视频
// that.clickStartRealPlay(g_iWndIndex);
CONFIG_OBJ.NVR_Data.rtspPort = oPort.iRtspPort;
}
};
//获取通道
this.getChannelInfo = function getChannelInfo() {
// oSel = $("#channels").empty();
CONFIG_OBJ.NVR_Data.allChannel = [];
CONFIG_OBJ.NVR_Data.currentChannel = {};
if (null == CONFIG_OBJ.NVR_Data.szDeviceIdentify) {
return;
}
// 模拟通道
WebVideoCtrl.I_GetAnalogChannelInfo(CONFIG_OBJ.NVR_Data.szDeviceIdentify, {
async: false,
success: function (xmlDoc) {
var oChannels = $(xmlDoc).find("VideoInputChannel");
$.each(oChannels, function (i) {
var id = $(this).find("id").eq(0).text(),
name = $(this).find("name").eq(0).text();
if ("" == name) {
name = "Camera " + (i < 9 ? "0" + (i + 1) : (i + 1));
}
CONFIG_OBJ.NVR_Data.allChannel.push({
id:id,
name:name,
bZero:false
});
// oSel.append("<option value='" + id + "' bZero='false'>" + name + "</option>");
});
//默认选中第一个通道
CONFIG_OBJ.NVR_Data.currentChannel = CONFIG_OBJ.NVR_Data.allChannel[0];
showOPInfo(CONFIG_OBJ.NVR_Data.szDeviceIdentify + " 获取模拟通道成功！");
},
error: function (status, xmlDoc) {
showOPInfo(CONFIG_OBJ.NVR_Data.szDeviceIdentify + " 获取模拟通道失败！", status, xmlDoc);
}
});
// 数字通道
WebVideoCtrl.I_GetDigitalChannelInfo(CONFIG_OBJ.NVR_Data.szDeviceIdentify, {
async: false,
success: function (xmlDoc) {
var oChannels = $(xmlDoc).find("InputProxyChannelStatus");
$.each(oChannels, function (i) {
var id = $(this).find("id").eq(0).text(),
name = $(this).find("name").eq(0).text(),
ipAddress = $(this).find("ipAddress").eq(0).text(),
online = $(this).find("online").eq(0).text();
if ("false" == online) {// 过滤禁用的数字通道
return true;
}
if ("" == name) {
name = "IPCamera " + (i < 9 ? "0" + (i + 1) : (i + 1));
}
CONFIG_OBJ.NVR_Data.allChannel.push({
id:id,
name:name,
bZero:false,
ip:ipAddress
});
// oSel.append("<option value='" + id + "' bZero='false'>" + name + "</option>");
});
//默认选中第一个通道
CONFIG_OBJ.NVR_Data.currentChannel = CONFIG_OBJ.NVR_Data.allChannel[0];
showOPInfo(CONFIG_OBJ.NVR_Data.szDeviceIdentify + " 获取数字通道成功！");
},
error: function (status, xmlDoc) {
showOPInfo(CONFIG_OBJ.NVR_Data.szDeviceIdentify + " 获取数字通道失败！", status, xmlDoc);
}
});
// 零通道
WebVideoCtrl.I_GetZeroChannelInfo(CONFIG_OBJ.NVR_Data.szDeviceIdentify, {
async: false,
success: function (xmlDoc) {
var oChannels = $(xmlDoc).find("ZeroVideoChannel");
$.each(oChannels, function (i) {
var id = $(this).find("id").eq(0).text(),
name = $(this).find("name").eq(0).text();
if ("" == name) {
name = "Zero Channel " + (i < 9 ? "0" + (i + 1) : (i + 1));
}
if ("true" == $(this).find("enabled").eq(0).text()) {// 过滤禁用的零通道
CONFIG_OBJ.NVR_Data.allChannel.push({
id:id,
name:name,
bZero:true
});
// oSel.append("<option value='" + id + "' bZero='true'>" + name + "</option>");
}
});
//默认选中第一个通道
CONFIG_OBJ.NVR_Data.currentChannel = CONFIG_OBJ.NVR_Data.allChannel[0];
showOPInfo(CONFIG_OBJ.NVR_Data.szDeviceIdentify + " 获取零通道成功！");
},
error: function (status, xmlDoc) {
showOPInfo(CONFIG_OBJ.NVR_Data.szDeviceIdentify + " 获取零通道失败！", status, xmlDoc);
}
});
};
// 开始预览
this.clickStartRealPlay = function clickStartRealPlay(g_iWndIndex) {
var oWndInfo = WebVideoCtrl.I_GetWindowStatus(g_iWndIndex);
if (null == CONFIG_OBJ.NVR_Data.szDeviceIdentify) {
return;
}
var startRealPlay = function () {
WebVideoCtrl.I_StartRealPlay(CONFIG_OBJ.NVR_Data.szDeviceIdentify, {
iWndIndex: g_iWndIndex,
iRtspPort: CONFIG_OBJ.NVR_Data.rtspPort,
iStreamType: CONFIG_OBJ.NVR_Data.streamType,
iChannelID: CONFIG_OBJ.NVR_Data.currentChannel.id,
bZeroChannel: CONFIG_OBJ.NVR_Data.currentChannel.bZero,
success: function () {
console.log("开始预览成功！");
that.clickEnableEZoom(g_iWndIndex);
},
error: function (status, xmlDoc) {
if (403 === status) {
console.log("设备不支持Websocket取流！");
} else {
console.log("开始预览失败！");
}
}
});
};
if (oWndInfo != null) {// 已经在播放了，先停止
console.log("已经在播放了，先停止");
WebVideoCtrl.I_Stop({
success: function () {
startRealPlay();
},error:function () {
console.log("shibai")
}
});
} else {
startRealPlay();
}
};
//停止预览（防止多窗口预览同一视频退出登录未停止播放）
this.clickStopPreview = function clickStopPreview(windowIndex) {
WebVideoCtrl.I_Stop({
iWndIndex:windowIndex,
success: function () {
console.log("停止播放成功"+windowIndex)
}
});
};
// 抓图
this.clickCapturePic = function clickCapturePic(g_iWndIndex,fn) {
var oWndInfo = WebVideoCtrl.I_GetWindowStatus(g_iWndIndex);
if (oWndInfo != null) {
var szPicName = oWndInfo.szDeviceIdentify + "_" + new Date().getTime() + ".jpg";
WebVideoCtrl.I2_CapturePic(szPicName, {
bDateDir: true //是否生成日期文件
}).then(function(){
console.log("抓图成功");
fn(szPicName);
},function(){
console.log("抓图失败")
});
}
};
// 启用电子放大
this.clickEnableEZoom = function clickEnableEZoom(g_iWndIndex) {
var oWndInfo = WebVideoCtrl.I_GetWindowStatus(g_iWndIndex);
if (oWndInfo != null) {
var iRet = WebVideoCtrl.I_EnableEZoom(g_iWndIndex);
if (0 == iRet) {
console.log("启用电子放大成功");
} else {
console.log("启用电子放大失败");
}
}
};
// 开始录像
this.clickStartRecord = function clickStartRecord(g_iWndIndex) {
var oWndInfo = WebVideoCtrl.I_GetWindowStatus(g_iWndIndex);
if (oWndInfo != null) {
var szFileName = oWndInfo.szDeviceIdentify + "_" + new Date().getTime();
WebVideoCtrl.I_StartRecord(szFileName, {
bDateDir: true, //是否生成日期文件
success: function () {
console.log("开始录像成功！")
},
error: function () {
console.log("开始录像失败！")
}
});
}
};
// 停止录像
this.clickStopRecord = function clickStopRecord(g_iWndIndex) {
console.log("停止录像方法");
console.log(g_iWndIndex);
var oWndInfo = WebVideoCtrl.I_GetWindowStatus(g_iWndIndex);
console.log(oWndInfo);
if (oWndInfo != null) {
WebVideoCtrl.I_StopRecord({
success: function () {
console.log("停止录像成功！")
},
error: function () {
console.log("停止录像失败！")
}
});
}
};
this.g_bPTZAuto = false;
// 云台控制
this.mouseDownPTZControl = function mouseDownPTZControl(iPTZIndex,g_iWndIndex) {
showOPInfo("云台操作！");
console.log(iPTZIndex,g_iWndIndex);
var oWndInfo = WebVideoCtrl.I_GetWindowStatus(g_iWndIndex),
iPTZSpeed = 4;
console.log(oWndInfo);
if (oWndInfo != null) {
if (9 == iPTZIndex && this.g_bPTZAuto) {
iPTZSpeed = 0;// 自动开启后，速度置为0可以关闭自动
} else {
this.g_bPTZAuto = false;// 点击其他方向，自动肯定会被关闭
}
console.log(iPTZIndex)
WebVideoCtrl.I_PTZControl(iPTZIndex, false, {
iPTZSpeed: iPTZSpeed,
success: function (xmlDoc) {
if (9 == iPTZIndex && this.g_bPTZAuto) {
showOPInfo(oWndInfo.szDeviceIdentify + " 停止云台成功！");
} else {
showOPInfo(oWndInfo.szDeviceIdentify + " 开启云台成功！");
}
if (9 == iPTZIndex) {
this.g_bPTZAuto = !this.g_bPTZAuto;
}
},
error: function (status, xmlDoc) {
showOPInfo(oWndInfo.szDeviceIdentify + " 开启云台失败！", status, xmlDoc);
}
});
}
};
this.mouseUpPTZControl = function mouseUpPTZControl(g_iWndIndex) {
console.log("鼠标抬起")
console.log(g_iWndIndex)
var oWndInfo = WebVideoCtrl.I_GetWindowStatus(g_iWndIndex);
console.log(oWndInfo)
if (oWndInfo != null) {
WebVideoCtrl.I_PTZControl(1, true, {
success: function (xmlDoc) {
console.log("成功")
showOPInfo(oWndInfo.szDeviceIdentify + " 停止云台成功！");
},
error: function (status, xmlDoc) {
console.log("失败")
showOPInfo(oWndInfo.szDeviceIdentify + " 停止云台失败！", status, xmlDoc);
}
});
}
};
// 开始回放
this.clickStartPlayback = function clickStartPlayback(g_iWndIndex,startTime,endTime) {
var oWndInfo = WebVideoCtrl.I_GetWindowStatus(g_iWndIndex),
szDeviceIdentify = CONFIG_OBJ.NVR_Data.szDeviceIdentify,
iRtspPort = CONFIG_OBJ.NVR_Data.rtspPort,
iStreamType = CONFIG_OBJ.NVR_Data.streamType,
bZeroChannel = CONFIG_OBJ.NVR_Data.currentChannel.bZero,
iChannelID = CONFIG_OBJ.NVR_Data.currentChannel.id,
szStartTime = startTime,
szEndTime = endTime,
bChecked = false, //不启用转码码流
iRet = -1;
if (null == szDeviceIdentify) {
return;
}
if (bZeroChannel) {// 零通道不支持回放
return;
}
var startPlayback = function () {
WebVideoCtrl.I_StartPlayback(szDeviceIdentify, {
iRtspPort: iRtspPort,
iStreamType: iStreamType,
iChannelID: iChannelID,
szStartTime: szStartTime,
szEndTime: szEndTime,
success: function () {
console.log(szDeviceIdentify +"开始回放成功");
},
error: function (status, xmlDoc) {
if (403 === status) {
console.log(szDeviceIdentify +"设备不支持Websocket取流！");
} else {
console.log(szDeviceIdentify +"开始回放失败！");
}
}
});
};
if (oWndInfo != null) {// 已经在播放了，先停止
WebVideoCtrl.I_Stop({
success: function () {
startPlayback();
}
});
} else {
startPlayback();
}
};
// 停止回放
this.clickStopPlayback = function clickStopPlayback(g_iWndIndex){
var oWndInfo = WebVideoCtrl.I_GetWindowStatus(g_iWndIndex);
if (oWndInfo != null) {
WebVideoCtrl.I_Stop({
success: function () {
console.log("停止回放成功！");
},
error: function () {
console.log("停止回放失败！");
}
});
}
};
// 暂停回放
this.clickPause = function clickPause(g_iWndIndex) {
var oWndInfo = WebVideoCtrl.I_GetWindowStatus(g_iWndIndex);
if (oWndInfo != null) {
WebVideoCtrl.I_Pause({
success: function () {
console.log(oWndInfo.szDeviceIdentify + "暂停成功！");
},
error: function () {
console.log(oWndInfo.szDeviceIdentify + "暂停失败！");
}
});
}
};
//恢复回放
this.clickResume = function clickResume(g_iWndIndex) {
var oWndInfo = WebVideoCtrl.I_GetWindowStatus(g_iWndIndex);
if (oWndInfo != null) {
WebVideoCtrl.I_Resume({
success: function () {
console.log(oWndInfo.szDeviceIdentify + "恢复成功！");
},
error: function () {
console.log(oWndInfo.szDeviceIdentify + "恢复失败！");
}
});
}
};
// 慢放
this.clickPlaySlow = function clickPlaySlow(g_iWndIndex) {
var oWndInfo = WebVideoCtrl.I_GetWindowStatus(g_iWndIndex);
if (oWndInfo != null) {
WebVideoCtrl.I_PlaySlow({
success: function () {
console.log(oWndInfo.szDeviceIdentify + "慢放成功！");
},
error: function () {
console.log(oWndInfo.szDeviceIdentify + "慢放失败！");
}
});
}
};
// 快放
this.clickPlayFast = function clickPlayFast(g_iWndIndex) {
var oWndInfo = WebVideoCtrl.I_GetWindowStatus(g_iWndIndex);
if (oWndInfo != null) {
WebVideoCtrl.I_PlayFast({
success: function () {
showOPInfo(oWndInfo.szDeviceIdentify + "快放成功！");
},
error: function () {
showOPInfo(oWndInfo.szDeviceIdentify + "快放失败！");
}
});
}
}
}
export {videoFunc}
赋值全局变量
this.$url.Video_Total = new videoFunc();将海康视频封装一个组件，方便项目中多个位置使用到视频
<template>
<div :style="styleData">
<div class="video_warp" :id="video_warp"></div>
<el-upload
style="display: none"
:action="uploadUrl"
:data="uploadData"
accept="image/*"
:onSuccess="uploadSuccess">
<el-button id="upload_btn" size="small" type="primary">点击上传</el-button>
</el-upload>
</div>
</template>
<script>
export default {
name: "hik_video",
data(){
return{
g_iWndIndex:0,
//截图的上传地址
uploadUrl: this.$url.MANAGE_URL + '/monScreenshot/addImage',
uploadData: {
token: this.$store.state.token,
// screenshotDevice:null,
screenshotUser: this.$store.state.user.id,
region: this.$store.state.regionInfo.region,
regionId: this.$store.state.regionInfo.id
},
timer0:null,
timer1:null,
timer2:null,
timer3:null,
timer4:null,
timer5:null,
timer6:null,
timer7:null,
timer8:null,
replayArr:[], //记录当前正在回放的窗口
recordArr:[], //记录当前正在录像的窗口
}
},
props:{
video_warp:String,
styleData:Object,
iWndowType:Number
},
methods:{
//初始化视频
initPlugin(){
var that = this;
// 检查插件是否已经安装过
var iRet = window.WebVideoCtrl.I_CheckPluginInstall();
if (-1 == iRet) {
that.$message({
type: 'error',
message: '未安装插件，双击开发包目录里的WebComponentsKit.exe安装！'
});
return;
}
// 初始化插件参数及插入插件
WebVideoCtrl.I_InitPlugin("100%", "100%", {
//是否支持单窗口双击全屏，默认支持 true:支持 false:不支持
bWndFull: true,
iPackageType: 2,
//分屏类型：1- 1*1，2- 2*2，3- 3*3，4- 4*4，默认值为1，单画面
iWndowType: that.iWndowType,
//是否启用无插件
bNoPlugin: true,
//窗口选中事件回调函数，只包含一个字符串参数，里面的值是XML
cbSelWnd: function (xmlDoc) {
that.g_iWndIndex = parseInt($(xmlDoc).find("SelectWnd").eq(0).text(), 10);
that.$emit("changeIWndIndex",that.g_iWndIndex);
},
//插件初始化完成回调，必须要定义
cbInitPluginComplete: function () {
WebVideoCtrl.I_InsertOBJECTPlugin(that.video_warp);
that.initVideoOperate();
console.log("初始化完成");
// 检查插件是否最新
if (-1 == WebVideoCtrl.I_CheckPluginVersion()) {
that.$message({
type: 'error',
message: '检测到新的插件版本，双击开发包目录里的WebComponentsKit.exe升级！'
});
return;
}
}
});
},
//点击的当前窗口可能正在播放回放视频 将窗口号传递过去删除回放数组里的当前窗口号
deleteReplayWindow(data){
//如果当前窗口正在回放
if(this.replayArr.length && this.replayArr.indexOf(data) != -1){
//删除正在回放的视频
this.replayArr.splice(this.replayArr.indexOf(data),1);
}
},
//点击的当前窗口可能正在录制视频 将窗口号传递过去删除录制数组里的当前窗口号
deleteRecordWindow(data){
//如果当前窗口正在录像
if(this.recordArr.length && this.recordArr.indexOf(data) != -1){
//删除正在录制的视频
this.recordArr.splice(this.recordArr.indexOf(data),1);
}
$(".parent-wnd>div").eq(this.g_iWndIndex).find(".icon_record").attr("title","录制").removeClass("icon_record_stop");
$(".parent-wnd>div").eq(this.g_iWndIndex).find(".record_time_warp").hide(); //隐藏录像的计时器
this.$url.Video_Total.clickStopRecord(this.g_iWndIndex);
this.resetVideoTime();
},
//初始化视频的操作按钮
initVideoOperate(){
var that = this;
//动态拼接每个按钮
$(".parent-wnd>div").each(function (index,item) {
$(this).append('<div class="record_time_warp">'+
'<span class="record_icon"></span>'+
'<span class="record_time">00:00:00</span>'+
'</div>'+
'<div class="btn_warp">'+
'<span class="icon_control fr" title="云台控制"></span>'+
'<span class="icon_replay fr" title="回放操作栏"></span>'+
'<span class="icon_record fr" title="录制"></span>'+
'<span class="icon_carmera fr" title="抓图"></span>'+
'</div>'+
'<div class="control_btn_warp">' +
'<span class="control_lt"></span>'+
'<span class="control_t"></span>'+
'<span class="control_rt"></span>'+
'<span class="control_l"></span>'+
'<span class="control_auto"></span>'+
'<span class="control_r"></span>'+
'<span class="control_lb"></span>'+
'<span class="control_b"></span>'+
'<span class="control_rb"></span>'+
'</div>'+
'<div class="replay_warp">' +
'<input class="replay_time" type="text"
id="replay_time_'+index+'"
placeholder="请选择时间">'+
'<span class="start_replay">开始回放</span>'+
'<span class="stop_replay">停止回放</span>'+
'<span class="suspended_replay">暂停</span>'+
'<span class="restore_replay">恢复</span>'+
'<span class="slow_replay">慢放</span>'+
'<span class="fast_replay">快放</span>'+
'</div>');
laydate.render({
elem: '#replay_time_'+index,
type: 'datetime',
range: "~",
done:function () {
}
});
});
//video悬停事件
$(".parent-wnd>div").mouseenter(function () {
$(this).addClass("active");
});
$(".parent-wnd>div").mouseleave(function () {
$(this).removeClass("active");
});
//抓图事件
$(".icon_carmera").unbind("click").click(function () {
//截图成功后出上传截图文件弹框
that.$url.Video_Total.clickCapturePic(that.g_iWndIndex,function () {
that.$confirm('您是否将截图文件上传至服务器?', '提示', {
cancelButtonText: '取消',
confirmButtonText: '确定',
type: 'warning'
}).then(() => {
that.$message({
type: 'warning',
// message: '请在《下载》目录中选择截图文件！',
message: '请在目录中选择截图文件！',
duration: 6000,
offset:100
});
$("#upload_btn").click();
}).catch(() => {
that.$message({
type: 'warning',
message: '取消上传至服务器可能导致文件丢失,之后可在本地目录中重新上传！',
duration: 6000,
offset:100
});
});
});
});
//云台控制按钮点击事件
$(".icon_control").unbind("click").click(function () {
//当前窗口正在进行回放操作，不支持云台
if(that.replayArr.indexOf(that.g_iWndIndex) != -1){
that.$message.warning("预览回放视频暂不支持云台控制！");
return;
}
//如果当前的回放操作栏处于打开状态 将它关闭
if($(this).parent().find(".icon_replay").hasClass("icon_replay_check")){
$(this).parent().find(".icon_replay").removeClass("icon_replay_check");
$(this).parent().find(".icon_replay").attr("title","回放操作栏");
$(this).parent().parent().find(".replay_warp").hide();
}
//关闭云台控制
if($(this).hasClass("icon_control_check")){
$(this).attr("title","云台控制");
$(this).removeClass("icon_control_check");
$(this).parent().parent().find(".control_btn_warp").hide();
//开启云台控制
}else{
$(this).attr("title","关闭云台控制");
$(this).addClass("icon_control_check");
$(this).parent().parent().find(".control_btn_warp").show();
}
});
// 云台控制左上
$(".control_lt").unbind("mousedown").mousedown(function () {
that.$url.Video_Total.mouseDownPTZControl(5,that.g_iWndIndex);
});
$(".control_lt").unbind("mouseup").mouseup(function () {
that.$url.Video_Total.mouseUpPTZControl(that.g_iWndIndex);
});
// 云台控制上
$(".control_t").unbind("mousedown").mousedown(function () {
that.$url.Video_Total.mouseDownPTZControl(1,that.g_iWndIndex);
});
$(".control_t").unbind("mouseup").mouseup(function () {
that.$url.Video_Total.mouseUpPTZControl(that.g_iWndIndex);
});
// 云台控制右上
$(".control_rt").unbind("mousedown").mousedown(function () {
that.$url.Video_Total.mouseDownPTZControl(7,that.g_iWndIndex);
});
$(".control_rt").unbind("mouseup").mouseup(function () {
that.$url.Video_Total.mouseUpPTZControl(that.g_iWndIndex);
});
// 云台控制左
$(".control_l").unbind("mousedown").mousedown(function () {
that.$url.Video_Total.mouseDownPTZControl(3,that.g_iWndIndex);
});
$(".control_l").unbind("mouseup").mouseup(function () {
that.$url.Video_Total.mouseUpPTZControl(that.g_iWndIndex);
});
// 云台控制右
$(".control_r").unbind("mousedown").mousedown(function () {
that.$url.Video_Total.mouseDownPTZControl(4,that.g_iWndIndex);
});
$(".control_r").unbind("mouseup").mouseup(function () {
that.$url.Video_Total.mouseUpPTZControl(that.g_iWndIndex);
});
// 云台控制左下
$(".control_lb").unbind("mousedown").mousedown(function () {
that.$url.Video_Total.mouseDownPTZControl(6,that.g_iWndIndex);
});
$(".control_lb").unbind("mouseup").mouseup(function () {
that.$url.Video_Total.mouseUpPTZControl(that.g_iWndIndex);
});
// 云台控制下
$(".control_b").unbind("mousedown").mousedown(function () {
that.$url.Video_Total.mouseDownPTZControl(2,that.g_iWndIndex);
});
$(".control_b").unbind("mouseup").mouseup(function () {
that.$url.Video_Total.mouseUpPTZControl(that.g_iWndIndex);
});
// 云台控制右上
$(".control_rb").unbind("mousedown").mousedown(function () {
that.$url.Video_Total.mouseDownPTZControl(8,that.g_iWndIndex);
});
$(".control_rb").unbind("mouseup").mouseup(function () {
that.$url.Video_Total.mouseUpPTZControl(that.g_iWndIndex);
});
//打开回放栏的按钮
$(".icon_replay").unbind("click").click(function () {
//关闭回放操作栏
if($(this).hasClass("icon_replay_check")){
$(this).attr("title","回放操作栏");
$(this).removeClass("icon_replay_check");
$(this).parent().parent().find(".replay_warp").hide();
// that.$url.Video_Total.clickStopPlayback(that.g_iWndIndex);
//开启回放
}else{
//如果当前的云台操作栏处于打开状态 将它关闭
if($(this).parent().find(".icon_control").hasClass("icon_control_check")){
$(this).parent().find(".icon_control").removeClass("icon_control_check");
$(this).parent().find(".icon_control").attr("title","云台控制");
$(this).parent().parent().find(".control_btn_warp").hide();
}
//当前窗口正在进行录制视频操作，询问是否停止录制
if($(this).parent().find(".icon_record").hasClass("icon_record_stop")){
that.$confirm('当前正在进行录制操作，是否停止本次录制?', '提示', {
cancelButtonText: '取消',
confirmButtonText: '确定',
type: 'warning'
}).then(() => {
//停止录制
$(this).parent().find(".icon_record").attr("title","录制");
$(this).parent().find(".icon_record").removeClass("icon_record_stop");
$(this).parent().siblings(".record_time_warp").hide(); //隐藏录像的计时器
that.$url.Video_Total.clickStopRecord(that.g_iWndIndex);
that.resetVideoTime();
//打开回放操作栏
// $(this).parent().parent().find(".replay_warp").css("bottom",0);
//当前窗口正在进行云台控制操作，关闭云台操作面板
if($(this).parent().find(".icon_control").hasClass("icon_control_check")){
$(this).parent().find(".icon_control").removeClass("icon_control_check");
$(this).parent().find(".icon_control").attr("title","云台控制");
$(this).parent().parent().find(".control_btn_warp").hide();
}
//初始化日期时间
var szCurTime = that.dateFormat(new Date(), "yyyy-MM-dd");
$(this).parent().siblings(".replay_warp").find(".replay_time").val(szCurTime + " 00:00:00 ~ " + szCurTime + " 23:59:59");
$(this).attr("title","关闭回放操作栏");
$(this).addClass("icon_replay_check");
$(this).parent().parent().find(".replay_warp").show();
});
}else{
//打开回放操作栏
// $(this).parent().parent().find(".replay_warp").css("bottom",0);
//当前窗口正在进行云台控制操作，关闭云台操作面板
if($(this).parent().find(".icon_control").hasClass("icon_control_check")){
$(this).parent().find(".icon_control").removeClass("icon_control_check");
$(this).parent().find(".icon_control").attr("title","云台控制");
$(this).parent().parent().find(".control_btn_warp").hide();
}
//初始化日期时间
var szCurTime = that.dateFormat(new Date(), "yyyy-MM-dd");
$(this).parent().siblings(".replay_warp").find(".replay_time").val(szCurTime + " 00:00:00 ~ " + szCurTime + " 23:59:59");
$(this).attr("title","关闭回放操作栏");
$(this).addClass("icon_replay_check");
$(this).parent().parent().find(".replay_warp").show();
}
}
});
//开始回放
$(".start_replay").unbind("click").click(function () {
if(!$(this).parent().find(".replay_time").val()){
that.$message.warning("请选择开始时间结束时间");
return;
}
var startTime = $(this).parent().find(".replay_time").val().split("~")[0].trim();
var endTime = $(this).parent().find(".replay_time").val().split("~")[1].trim();
that.$url.Video_Total.clickStartPlayback(that.g_iWndIndex,startTime,endTime);
that.replayArr.push(that.g_iWndIndex); //存储正在回放的视频
});
//停止回放
$(".stop_replay").unbind("click").click(function () {
that.$url.Video_Total.clickStopPlayback(that.g_iWndIndex);
//当前窗口正在进行录制回放视频的操作，结束计时器和改变按钮
if(that.recordArr.indexOf(that.g_iWndIndex) != -1){
$(this).parent().siblings(".btn_warp").find(".icon_record").attr("title","录制");
$(this).parent().siblings(".btn_warp").find(".icon_record").removeClass("icon_record_stop");
$(this).parent().siblings(".record_time_warp").hide(); //隐藏录像的计时器
that.$url.Video_Total.clickStopRecord(that.g_iWndIndex);
that.resetVideoTime();
if(this.recordArr.length && this.recordArr.indexOf(that.g_iWndIndex) != -1){
this.recordArr.splice(this.recordArr.indexOf(that.g_iWndIndex),1);//删除正在录制的视频
}
}
if(this.replayArr.length && this.replayArr.indexOf(that.g_iWndIndex) != -1){
that.replayArr.splice(this.replayArr.indexOf(that.g_iWndIndex),1); //删除正在回放的视频
}
});
//暂停回放
$(".suspended_replay").unbind("click").click(function () {
that.$url.Video_Total.clickPause(that.g_iWndIndex);
});
//恢复回放
$(".restore_replay").unbind("click").click(function () {
that.$url.Video_Total.clickResume(that.g_iWndIndex);
});
//慢放
$(".slow_replay").unbind("click").click(function () {
that.$url.Video_Total.clickPlaySlow(that.g_iWndIndex);
});
//快放
$(".fast_replay").unbind("click").click(function () {
that.$url.Video_Total.clickPlayFast(that.g_iWndIndex);
});
//录制视频或停止录制
$(".icon_record").unbind("click").click(function () {
//停止录制
if($(this).hasClass("icon_record_stop")){
$(this).attr("title","录制");
$(this).removeClass("icon_record_stop");
$(this).parent().siblings(".record_time_warp").hide(); //隐藏录像的计时器
that.$url.Video_Total.clickStopRecord(that.g_iWndIndex);
that.resetVideoTime();
if(this.recordArr.length && this.recordArr.indexOf(that.g_iWndIndex) != -1){
that.recordArr.splice(this.recordArr.indexOf(that.g_iWndIndex),1); //删除正在录制的视频
}
//开始录制
}else{
$(this).attr("title","结束录制");
$(this).addClass("icon_record_stop");
$(this).parent().siblings(".record_time_warp").show(); //显示录像的计时器
that.$url.Video_Total.clickStartRecord(that.g_iWndIndex);
that['startVideoTime'+that.g_iWndIndex](); //调用计时器
that.recordArr.push(that.g_iWndIndex); //存储正在录制的视频
}
});
},
//选择回放时间后的回调
checkDate(index){
},
/**
* @description 文件上传成功钩子函数
* @date 2021/8/30
*/
uploadSuccess(res) {
if (res.code == 1) {
this.$message.success("上传成功!");
} else {
this.$message.closeAll();
this.$message({
type: 'error',
message: '上传失败!'
});
return;
}
},
/**
* @description 重置录制的时间的时分秒
* @date 2021/10/19
*/
resetVideoTime(){
window.clearInterval(this["timer"+this.g_iWndIndex]);
$('.record_time')[this.g_iWndIndex].innerHTML = '00:00:00';
},
/**
* @description 录制的时间的时分秒开始
* @date 2021/10/19
*/
startVideoTime0(){
var hour0 = 0;
var minute0 = 0;
var second0 = 0;
this.timer0 = setInterval(function () {
second0++;
if(second0 >= 60){
second0 = 0;
minute0 = minute0+1;
}
if(minute0 >= 60){
minute0 = 0;
hour0 = hour0+1;
}
$('.record_time')[0].innerHTML = (hour0>9?hour0:'0'+hour0)+':'+
(minute0>9?minute0:'0'+minute0)+':'+ (second0>9?second0:'0'+second0);
},1000);
},
startVideoTime1(){
var hour1 = 0;
var minute1 = 0;
var second1 = 0;
this.timer1 = setInterval(function () {
second1++;
if(second1 >= 60){
second1 = 0;
minute1 = minute1+1;
}
if(minute1 >= 60){
minute1 = 0;
hour1 = hour1+1;
}
$('.record_time')[1].innerHTML = (hour1>9?hour1:'0'+hour1)+':'+
(minute1>9?minute1:'0'+minute1)+':'+ (second1>9?second1:'0'+second1);
},1000);
},
startVideoTime2(){
var hour2 = 0;
var minute2 = 0;
var second2 = 0;
this.timer2 = setInterval(function () {
second2++;
if(second2 >= 60){
second2 = 0;
minute2 = minute2+1;
}
if(minute2 >= 60){
minute2 = 0;
hour2 = hour2+1;
}
$('.record_time')[1].innerHTML = (hour2>9?hour2:'0'+hour2)+':'+
(minute2>9?minute2:'0'+minute2)+':'+ (second2>9?second2:'0'+second2);
},1000);
},
startVideoTime3(){
var hour3 = 0;
var minute3 = 0;
var second3 = 0;
this.timer3 = setInterval(function () {
second3++;
if(second3 >= 60){
second3 = 0;
minute3 = minute3+1;
}
if(minute3 >= 60){
minute3 = 0;
hour3 = hour3+1;
}
$('.record_time')[1].innerHTML = (hour3>9?hour3:'0'+hour3)+':'+
(minute3>9?minute3:'0'+minute3)+':'+ (second3>9?second3:'0'+second3);
},1000);
},
startVideoTime4(){
var hour4 = 0;
var minute4 = 0;
var second4 = 0;
this.timer4 = setInterval(function () {
second4++;
if(second4 >= 60){
second4 = 0;
minute4 = minute4+1;
}
if(minute4 >= 60){
minute4 = 0;
hour4 = hour4+1;
}
$('.record_time')[1].innerHTML = (hour4>9?hour4:'0'+hour4)+':'+
(minute4>9?minute4:'0'+minute4)+':'+ (second4>9?second4:'0'+second4);
},1000);
},
startVideoTime5(){
var hour5 = 0;
var minute5 = 0;
var second5 = 0;
this.timer5 = setInterval(function () {
second5++;
if(second5 >= 60){
second5 = 0;
minute5 = minute5+1;
}
if(minute5 >= 60){
minute5 = 0;
hour5 = hour5+1;
}
$('.record_time')[1].innerHTML = (hour5>9?hour5:'0'+hour5)+':'+
(minute5>9?minute5:'0'+minute5)+':'+ (second5>9?second5:'0'+second5);
},1000);
},
startVideoTime6(){
var hour6 = 0;
var minute6 = 0;
var second6 = 0;
this.timer6 = setInterval(function () {
second6++;
if(second6 >= 60){
second6 = 0;
minute6 = minute6+1;
}
if(minute6 >= 60){
minute6 = 0;
hour6 = hour6+1;
}
$('.record_time')[1].innerHTML = (hour6>9?hour6:'0'+hour6)+':'+
(minute6>9?minute6:'0'+minute6)+':'+ (second6>9?second6:'0'+second6);
},1000);
},
startVideoTime7(){
var hour7 = 0;
var minute7 = 0;
var second7 = 0;
this.timer7 = setInterval(function () {
second7++;
if(second7 >= 60){
second7 = 0;
minute7 = minute7+1;
}
if(minute7 >= 60){
minute7 = 0;
hour7 = hour7+1;
}
$('.record_time')[1].innerHTML = (hour7>9?hour7:'0'+hour7)+':'+
(minute7>9?minute7:'0'+minute7)+':'+ (second7>9?second7:'0'+second7);
},1000);
},
startVideoTime8(){
var hour8 = 0;
var minute8 = 0;
var second8 = 0;
this.timer8 = setInterval(function () {
second8++;
if(second8 >= 60){
second8 = 0;
minute8 = minute8+1;
}
if(minute8 >= 60){
minute8 = 0;
hour8 = hour8+1;
}
$('.record_time')[1].innerHTML = (hour8>9?hour8:'0'+hour8)+':'+
(minute8>9?minute8:'0'+minute8)+':'+ (second8>9?second8:'0'+second8);
},1000);
},
// 格式化时间
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;
}
},
}
</script>
<style scoped lang="scss">
.video_warp /deep/{
width: 100%;
height: 100%;
/*点击录像后右上角的计时器*/
.parent-wnd>div>.record_time_warp{
/*width: 1rem;*/
padding:0 0.1rem;
line-height: 0.35rem;
background: #333;
position: absolute;
top: 0.05rem;
right: 0.05rem;
border-radius: 2px;
display: none;
.record_icon{
float: left;
width: 0.15rem;
height: 0.15rem;
background: url("../../assets/icon/video/recording.png") no-repeat center;
background-size: 100% 100%;
margin-top: 0.1rem;
margin-right: 0.03rem;
}
.record_time{
float: left;
color: #fff;
}
}
/*下方操作按钮的容器*/
.parent-wnd>div>.btn_warp{
width: 100%;
height: 0.50rem;
background: #333;
position: absolute;
bottom: -0.50rem;
left: 0;
border: none;
span{
float: right;
width: 0.25rem;
height:0.25rem;
margin-top: 0.13rem;
margin-right: 0.08rem;
cursor: pointer;
}
.icon_carmera{
background: url("../../assets/icon/video/camera.png") no-repeat;
background-size: 100% 100%;
}
.icon_replay{
background: url("../../assets/icon/video/replay.png") no-repeat;
background-size: 100% 100%;
}
.icon_replay.icon_replay_check{
background: url("../../assets/icon/video/replay_check.png") no-repeat;
background-size: 100% 100%;
}
.icon_position{
background: url("../../assets/icon/video/dingwei.png") no-repeat;
background-size: 100% 100%;
}
.icon_record{
background: url("../../assets/icon/video/record.png") no-repeat;
background-size: 100% 100%;
}
.icon_record.icon_record_stop{
background: url("../../assets/icon/video/stop_record.png") no-repeat;
background-size: 100% 100%;
}
.icon_control{
background: url("../../assets/icon/video/control.png") no-repeat;
background-size: 100% 100%;
}
.icon_control.icon_control_check{
background: url("../../assets/icon/video/control_check.png") no-repeat;
background-size: 100% 100%;
}
}
.parent-wnd>div.active>.btn_warp{
bottom: 0;
}
/*云台控制操作按钮的容器*/
.parent-wnd>div>.control_btn_warp{
width: 1.80rem;
overflow: hidden;
position: absolute;
bottom: 0.50rem;
right: 0.10rem;
border: none;
display: none;
span{
float: left;
width: 0.50rem;
height:0.50rem;
cursor: pointer;
margin-right: 0.10rem;
margin-bottom: 0.10rem;
}
span:first-child{
background: url("../../assets/icon/video/direction_lt.png") no-repeat center;
}
span:nth-child(2){
background: url("../../assets/icon/video/direction_top.png") no-repeat center;
}
span:nth-child(3){
background: url("../../assets/icon/video/direction_rt.png") no-repeat center;
}
span:nth-child(4){
background: url("../../assets/icon/video/direction_left.png") no-repeat center;
}
span:nth-child(5){
/*background: url("../../assets/icon/video/direction_center.png") no-repeat center;*/
}
span:nth-child(6){
background: url("../../assets/icon/video/direction_right.png") no-repeat center;
}
span:nth-child(7){
background: url("../../assets/icon/video/direction_lb.png") no-repeat center;
}
span:nth-child(8){
background: url("../../assets/icon/video/direction_bottom.png") no-repeat center;
}
span:nth-child(9){
background: url("../../assets/icon/video/direction_rb.png") no-repeat center;
}
}
/*回放操作按钮的容器*/
.parent-wnd>div>.replay_warp{
width: 3rem;
overflow: hidden;
position: absolute;
bottom: 0.50rem;
right: 0.10rem;
border: none;
display: none;
select{
width: 3rem;
height:0.30rem;
margin-bottom: 0.04rem;
border-color: #304e66;
background: #403f3f;
color: #fff;
}
input{
width: 3rem;
height:0.30rem;
margin-bottom: 0.04rem;
border:1px solid #304e66;
background: #403f3f;
color: #fff;
padding: 0 0.05rem;
}
span{
float: left;
width: 0.95rem;
height:0.33rem;
line-height: 0.33rem;
cursor: pointer;
margin-right: 0.05rem;
margin-bottom: 0.04rem;
background: #403f3f;
border: 1px solid #304e66;
color: #fff;
text-align: center;
}
}
}
</style>使用视频窗口的页面（引入海康组件）
<HikVideo ref="HikVideoRef"
@changeIWndIndex="changeIWndIndex"
:iWndowType="videoParam.iWndowType"
video_warp="video_warp"
:styleData="videoParam.styleData"
v-loading="loading"
element-loading-text="视频正在加载请稍候..."
element-loading-spinner="el-icon-loading"
element-loading-background="rgba(0, 0, 0, 0.8)"/>
<div class="control_btn">
<span @click="setVideoWindow(3)"></span>
<span @click="setVideoWindow(2)"></span>
<span @click="setVideoWindow(1)"></span>
</div>
import HikVideo from "@/components/common/hik_video" //引入上面的组件
//初始化视频
initVideo(){
this.$refs.HikVideoRef.initPlugin(); //初始化视频插件
//登录nvr
let obj = {
szIP: CONFIG_OBJ.NVR_Data.ip,
szPort: CONFIG_OBJ.NVR_Data.port,
szUsername:CONFIG_OBJ.NVR_Data.userName,
szPassword:CONFIG_OBJ.NVR_Data.passWord,
iWndIndex: 0
};
this.$url.Video_Total.clickLogin(obj); //登陆视频
},
//预览视频
//CONFIG_OBJ.NVR_Data.allChannel是在登录的时候查询到的通道号数组存在全局
//查到当前的摄像头的ip对应的通道号 执行预览方法
var tempArr = CONFIG_OBJ.NVR_Data.allChannel.filter((item1)=>{
return item1.ip == that.allCamera[0].ip;
});
//如果当前的摄像头ip对应的视频通道正常 执行开始预览方法
if(tempArr && tempArr.length){
CONFIG_OBJ.NVR_Data.currentChannel = tempArr[0];
that.$url.Video_Total.clickStartRealPlay(0);
}页面显示效果
遇到的坑：
1、确定客户提供的是IP地址还是监控点编号，或者是对接nvr。
提供IP地址的话不需要使用海康平台，使用web3.0控件开发包/web3.2控件开发包。
以上三种方式需要确认产品是否支持websockets协议，可以咨询 4008005998 的海康客服，如果不支持只能使用web3.0插件
web3.0：
功能全面但不支持谷歌浏览器
web3.2：
需要支持websocket取流
不支持直接将截图文件保存到对应的路径地址（ie对设置配置生效，谷歌不生效）
不支持双击全屏
不支持自动云台自转
不支持视频的快放慢放控制等（反正功能不太全）2、如果对接完成但是预览视频特别卡
将主码流换成子码流
streamType 1主码流 2子码流 3第三方码流 4转码码流3、单页面加载多个web3.2插件
需要使用iframe嵌套4、web对接海康平台调试v1.5.1插件，视频播放失败
要先安装VideoWebPlugin.exe，再运行webs.exe，再重新使用插件试一下5、调研web3.2回放失败问题
项目对接摄像头的话摄像头需要支持插卡功能，如果不支持插卡功能只能使用3.0插件查看回放视频
项目对接nvr的话，nvr需要支持websocket协议，摄像头支不支持都可以，nvr需要有硬盘，并且配置了计划模板（例如全天录制），
如果都满足依然查不到，浏览器登录nvr确认是否有回放视频，如果nvr里有但是控件查不到，确认对接方式
如果是对接nvr需要登录nvr的ip和端口通过通道查看，不能通过登录摄像头的ip和端口查看6、解决预览视频切换页面又返回来之后未加载
多个3.2插件时进入页面需要执行初始化控件、登录和开始预览，离开页面执行停止预览、退出登录和销毁控件7、web3.2对接网络球机，云台控制报错
登录设备之后需要增加调用I_GetAnalogChannelInfo获取通道信息，然后再控制云台8、V1.5.1插件 playMode传0和传1区分预览和回放，初始化更改播放模式必须销毁后重新初始化吗
必须反初始化 然后再重新初始化9、Web3.2录像功能不能正常使用，点击结束录制没有反应
分辨率的原因，大于1080P无插件开发包转封装录像不支持，nvr配置修改为1080P录像停止录像就正常了10、V1.5.1插件不能遮挡，只能在最上层
的确不能被遮挡，object标签只能在最上层显示11、一个项目里面多个页面里用到了web3.2控件，只登陆一次nvr，多次初始化视频，初始化之后不登录只预览，是否可行
不可以，重新初始化就需要重新登陆12、当当前页面退出的时候执行退出登录I_Logout的方法，但是在另一个页面初始化登陆成功之后进行预览的时候，会返回“已经在播放了，先停止”
需要先调用停止预览接口，再调用注销登录接口，并且停止预览之后增加调用I_DestroyWorker这个接口。13、视频可以使用https访问吗
如果nvr设备支持websockets（网页登录设备进配置网络服务配置里面查看），那可以使用HTTPS协议
如果不支持的话，只能使用HTTP协议，暂时不支持。（目前已提供新的开发包）14、使用iframe嵌套方式加载视频，v1.5.1平台插件加载不到容器内
通过oWebControl.JS_Resize更新一下位置15、demo只能通过nvr的ip+端口登录吗，通过域名登陆失败
多浏览器测试，在ie下可以正常查看16、登陆项目后确认项目中是否依次返回以下信息
如果没有返回如上图，查看海康视频可能遇到的问题以及排查和解决方法：
①、确认库里配置的nvr信息和视频信息在浏览器查看nvr是否正常
- 在用户登录后查看monDeviceNvr/selectByRegionId返回的nvr信息的ip和端口在浏览器中是否能正常打开。例如返回的ip是172.29.49.68，port（端口）是80，浏览器访问172.29.49.68:80可以正常打开nvr的登录界面，如下图：
- 不能正常打开上面页面的话，需要在信息管理/设备管理/NVR管理页面修改对应地区的正确的nvr的信息，可以正常打开说明nvr的IP端口信息无误，之后确认用户名和密码是否正确，在用户名输入返回的loginName字段，密码输入password字段，如果可以登录成功，如下图：
- 不能登录成功，需要在信息管理/设备管理/NVR管理页面修改对应地区的正确的nvr的信息，可以登陆成功说明nvr信息无误，查看nvr下的视频通道是否正常，双击左边的通道，加载成功如下图：
- 可以加载成功，说明nvr下的通道信息无误，到此说明nvr无问题
②、如果报错如下图的错，说明更新的时候将打包后的js文件夹（海康文件的文件夹）覆盖在了服务器上，js文件夹不能覆盖，需要先删除服务器上的js文件夹，再将文件覆盖上去，如果海康视频没有修改的话不要动js文件夹替换别的文件就可以了
③、如果不报（②）的错也确认了（①）没问题但仍然返回登陆失败
确认使用的是支持http的插件还是支持https的插件，两个互斥，如果使用的https的插件则必须访问https的页面，反之亦然。
④、如果（3、）确认修改了还是不显示，ip地址不能为localhost或者127.0.0.1，改为本机ip。
扫一扫
4038
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
