vue3+vite+ts引入海康威视监控_vue3接入海康威视

2401_85124347

于 2024-06-18 22:40:02 发布

阅读量765

点赞数 11

文章标签： javascript vue.js 前端

本文链接：https://blog.csdn.net/2401_85124347/article/details/139785407

版权

        state.oWebControl
          .JS\_CreateWnd(state.id, state.idWidth, state.idHeight)
          .then(() => {
            //JS\_CreateWnd创建视频播放窗口，宽高可设定
            init(); // 创建播放实例成功后初始化
          });
      },
      function () {
        console.log("启动失败");
        // 启动插件服务失败
      }
    );
},
cbConnectError: function () {
  // 创建WebControl实例失败
  state.oWebControl = null;
  console.log("插件未启动，正在尝试启动，请稍候...");
  WebControl.JS\_WakeUp("VideoWebPlugin://"); // 程序未启动时执行error函数，采用wakeup来启动程序
  state.initCount++;
  if (state.initCount < 3) {
    setTimeout(function () {
      initPlugin();
    }, 3000);
  } else {
    console.log("插件启动失败，请检查插件是否安装！");
  }
},
cbConnectClose: function (bNormalClose) {
  // 异常断开：bNormalClose = false
  // JS\_Disconnect正常断开：bNormalClose = true
  console.log("cbConnectClose");
  state.oWebControl = null;
  console.log("插件未启动，正在尝试启动，请稍候...");
  WebControl.JS\_WakeUp("VideoWebPlugin://");
  state.initCount++;
  if (state.initCount < 3) {
    setTimeout(function () {
      initPlugin();
    }, 3000);
  } else {
    console.log("插件启动失败，请检查插件是否安装！");
  }
},

});
};
// 设置窗口控制回调
const setCallbacks = () => {
state.oWebControl.JS_SetWindowControlCallback({
cbIntegrationCallBack: cbIntegrationCallBack,
});
};

// 推送消息
const cbIntegrationCallBack = (oData) => {
console.log(oData, “–oData”);
};

//初始化
const init = () => {
getPubKey(() => {
// 请自行修改以下变量值
var appkey = “”; //综合安防管理平台提供的appkey，必填
var secret = setEncrypt(“”); //综合安防管理平台提供的secret，必填
var ip = “”; //综合安防管理平台IP地址，必填
var playMode = 0; //初始播放模式：0-预览，1-回放
var port = 444; //综合安防管理平台端口，若启用HTTPS协议，默认443
var snapDir = “D:\SnapDir”; //抓图存储路径
var videoDir = “D:\VideoDir”; //紧急录像或录像剪辑存储路径
var layout = “1x1”; //playMode指定模式的布局
var enableHTTPS = 1; //是否启用HTTPS协议与综合安防管理平台交互，这里总是填1
var encryptedFields = “secret”; //加密字段，默认加密领域为secret
var showToolbar = window.location.href.indexOf(“monitorMore”) == -1 ? 0 : 1; //是否显示工具栏，0-不显示，非0-显示
var showSmart = 1; //是否显示智能信息（如配置移动侦测后画面上的线框），0-不显示，非0-显示
var buttonIDs = “0,16,256,257,258,259,260,512,513,514,515,516,517,768,769”; //自定义工具条按钮
// 请自行修改以上变量值

state.oWebControl
  .JS\_RequestInterface({
    funcName: "init",
    argument: JSON.stringify({
      appkey: appkey, //API网关提供的appkey
      secret: secret, //API网关提供的secret
      ip: ip, //API网关IP地址
      playMode: playMode, //播放模式（决定显示预览还是回放界面）
      port: port, //端口
      snapDir: snapDir, //抓图存储路径
      videoDir: videoDir, //紧急录像或录像剪辑存储路径
      layout: layout, //布局
      enableHTTPS: enableHTTPS, //是否启用HTTPS协议
      encryptedFields: encryptedFields, //加密字段
      showToolbar: showToolbar, //是否显示工具栏
      showSmart: showSmart, //是否显示智能信息
      buttonIDs: buttonIDs, //自定义工具条按钮
    }),
  })
  .then(function (oData: any) {
    console.log(oData, "oData");
    state.oWebControl.JS\_Resize(state.idWidth, state.idHeight); // 初始化后resize一次，规避firefox下首次显示窗口后插件窗口未与DIV窗口重合问题
  });

});
};

//获取公钥
const getPubKey = (callback: any) => {
state.oWebControl
.JS_RequestInterface({
funcName: “getRSAPubKey”,
argument: JSON.stringify({
keyLength: 1024,
}),
})
.then((oData: { responseMsg: { data: string } }) => {
console.log(oData);
if (oData.responseMsg.data) {
state.pubKey = oData.responseMsg.data;
callback();
}
});
};

//RSA加密
const setEncrypt = (value: string) => {
var encrypt = new JSEncrypt();
encrypt.setPublicKey(state.pubKey);
return encrypt.encrypt(value);
};

// 监听resize事件，使插件窗口尺寸跟随DIV窗口变化
window.addEventListener(“resize”, () => {
if (state.oWebControl != null) {
state.oWebControl.JS_Resize(state.idWidth, state.idHeight);
// setWndCover();
}
});

// 监听滚动条scroll事件，使插件窗口跟随浏览器滚动而移动
window.addEventListener(“scroll”, () => {
if (state.oWebControl != null) {
state.oWebControl.JS_Resize(state.idWidth, state.idHeight);
// setWndCover();
}
});

//视频预览功能
const previewClick = () => {
var cameraIndexCode = props.wsUrl as any; //获取输入的监控点编号值，必填
var streamMode = 0; //主子码流标识：0-主码流，1-子码流
var transMode = 1; //传输协议：0-UDP，1-TCP
var gpuMode = 0; //是否启用GPU硬解，0-不启用，1-启用
var wndId = -1; //播放窗口序号（在2x2以上布局下可指定播放窗口）

state.oWebControl.JS_RequestInterface({
funcName: “startPreview”,
argument: JSON.stringify({
cameraIndexCode: cameraIndexCode, //监控点编号
streamMode: streamMode, //主子码流标识
transMode: transMode, //传输协议
gpuMode: gpuMode, //是否开启GPU硬解
wndId: wndId, //可指定播放窗口
}),
});
console.log(state.oWebControl.JS_RequestInterface, " ------face");
console.log(“当前的编号”, cameraIndexCode);
console.log(“执行完成”);
};

onMounted(() => {
state.idWidth = document.getElementById(state.id)?.offsetWidth;
state.idHeight = document.getElementById(state.id)?.offsetHeight;
initPlugin();
setTimeout(() => {
previewClick();
}, 16000); //一般一个监控需要延迟2秒我这里需求显示8个所以需要延迟16秒具体看业务
});
onActivated(() => {
state.idWidth = document.getElementById(state.id)?.offsetWidth;
state.idHeight = document.getElementById(state.id)?.offsetHeight;
initPlugin();
setTimeout(() => {
previewClick();
}, 16000); //一般一个监控需要延迟2秒我这里需求显示8个所以需要延迟16秒具体看业务
});
onDeactivated(() => {
console.log(“销毁了”);
state.oWebControl.JS_HideWnd();
state.oWebControl.JS_Disconnect().then(
function () {

TCP协议

TCP 和 UDP 的区别？
TCP 三次握手的过程？
为什么是三次而不是两次、四次？
三次握手过程中可以携带数据么？
说说 TCP 四次挥手的过程
为什么是四次挥手而不是三次？
半连接队列和 SYN Flood 攻击的关系
如何应对 SYN Flood 攻击？
介绍一下 TCP 报文头部的字段
TCP 快速打开的原理(TFO)
说说TCP报文中时间戳的作用？
TCP 的超时重传时间是如何计算的？
TCP 的流量控制
TCP 的拥塞控制
说说 Nagle 算法和延迟确认？
如何理解 TCP 的 keep-alive？

浏览器篇

浏览器缓存?
说一说浏览器的本地存储？各自优劣如何？
说一说从输入URL到页面呈现发生了什么？
谈谈你对重绘和回流的理解
XSS攻击
CSRF攻击
HTTPS为什么让数据传输更安全？
实现事件的防抖和节流？
实现图片懒加载？

TCP 的拥塞控制

说说 Nagle 算法和延迟确认？
如何理解 TCP 的 keep-alive？

[外链图片转存中…(img-ucSdHZ80-1718721589861)]

浏览器篇

浏览器缓存?
说一说浏览器的本地存储？各自优劣如何？
说一说从输入URL到页面呈现发生了什么？
谈谈你对重绘和回流的理解
XSS攻击
CSRF攻击
HTTPS为什么让数据传输更安全？
实现事件的防抖和节流？
实现图片懒加载？

2401_85124347

关注

11
点赞
踩
24

收藏

觉得还不错? 一键收藏
0
评论
vue3+vite+ts引入海康威视监控_vue3接入海康威视

/index.html引入直接从window里面拿到sdkwsUrl: {type: String, //视频监控code},});id: “playWnd” + Math.random().toString(16).slice(2), //多个监控同时显示需要不同的id});//创建播放实例szPluginContainer: state.id, // 指定容器id。
复制链接

扫一扫