海康安防管理平台Web视频对接
开发文档https://open.hikvision.com/download/5c67f1e2f05948198c909700?type=10
1.视频分为预览和回放
2.使用web端的需要安装插件 软件包里面有
3.使用iframe需要启动相依的插件
4.给得demo需要进行配置 key ip port 是的
要展示记录就是跑在vue上边
使用的是rtsp的视频流
由于控件展示的时候需要是需要js刷新的,所以在适配上,比较麻烦,所以就让某一个外部元素跟着浏览器的大小进行变化,视频控件跟着大小变化,海康的视频控件支持后期修改的操作回调
插件未启动,正在尝试启动,请稍候...
没有检测到插件,请安装插件后重启浏览器!
下载
data() {
return {
$,
// 控制窗口个数
camlength: "1x1",
// 插件没有启动的显示样式
lodingshow: false,
lodingres: false,
usefullData
}
},
created() {
// 加载播放实例
this.initPlugin();
// 监听resize事件,使插件窗口尺寸跟随DIV窗口变化
// vue 的onresize
$(window).resize(() => {
if (oWebControl != null) {
oWebControl.JS_Resize( $('.map').width(), $('.map').height() - 60);
}
});
},
// 页面结束的时候关闭显示窗口
destroyed() {
if (oWebControl != null) {
oWebControl.JS_HideWnd(); // 先让窗口隐藏,规避可能的插件窗口滞后于浏览器消失问题
oWebControl.JS_Disconnect().then(() => { // 断开与插件服务连接成功
},
() => { // 断开与插件服务连接失败
});
}
},
methods: {
// 修改布局 展示画面
refusePlay() {
// 获取区域列表下的摄像机列表 进行布局展示
SubordinateCam({
pageNo: 1,
pageSize: 1000,
regionIndexCode: this.$route.params.id
}).then(res => {
if (res.data.code == 0) {
let shuliang = res.data.data.list.length;
if (shuliang == 1 || shuliang == 0) {
this.camlength = "1x1"
} else if (shuliang > 1 && shuliang <= 4) {
this.camlength = "2x2"
} else if (shuliang > 4 && shuliang <= 9) {
this.camlength = "3x3"
} else if (shuliang > 9 && shuliang <= 16) {
this.camlength = "4x4"
} else if (shuliang > 16 && shuliang <= 25) {
this.camlength = "5x5"
}
// 设置摄像头的布局
oWebControl.JS_RequestInterface({
funcName: "setLayout",
argument: {layout: this.camlength}
}).then(() => {
// 有监控点就进行播放
if (res.data.data.list.length