php对接海康视频教程_海康安防管理平台Web视频对接

海康安防管理平台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