2024年前端最新VUE3对接海康威视监控接口，实现实时查看监控。_vue3使用海康(1)，2024年最新公司四轮面试

结尾

学习html5、css、javascript这些基础知识，学习的渠道很多，就不多说了，例如，一些其他的优秀博客。但是本人觉得看书也很必要，可以节省很多时间，常见的javascript的书，例如：javascript的高级程序设计，是每位前端工程师必不可少的一本书，边看边用，了解js的一些基本知识，基本上很全面了，如果有时间可以读一些，js性能相关的书籍，以及设计者模式，在实践中都会用的到。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

环境搭建

1. 海康官网下载H5开发包
2. 请后端同事配合部署好OpenAPI安全认证库

项目集成

1. 将开发包里面的bin文件夹整个复制到项目public下
2. 在vue项目里找到index.html文件直接引入h5player.min.js
3. 插入一个监控的容器

<div id='H5Video'></div> // 这里的id是什么初始化的szID就填什么

4. 初始化监控

const initCamera = () => {

  const { JSPlugin } = window;
  curIndex = 0; // 当前窗口下标
  myPlugin = new JSPlugin({
    szId: "H5Video", // 监控容器的ID 需要英文字母开头 必填
    szBasePath: "/public/bin", // 必填,引用H5player.min.js的js相对路径这里的路径要和index.html的路径一致
    // 当容器div#play_window有固定宽高时，可不传iWidth和iHeight，窗口大小将自适应容器宽高
    // 分屏播放，默认最大分屏4*4
    openDebug: true,
    // 分屏播放
    iMaxSplit: 1,
    iCurrentSplit: 1,
    // 设置样式
    oStyle: {
      border: "#FFF",
      borderSelect: "#FFCC00",
      background: "#000",
    },
  });
  initPlugin()
}
function initPlugin() {
  myPlugin.JS_SetWindowControlCallback({
    windowEventSelect(iWindIndex) {
      // 插件选中窗口回调
      console.log("windowSelect callback: ", iWindIndex);
    },
    pluginErrorHandler(iWindIndex, iErrorCode, oError) {
      // 插件错误回调
      console.error(`window-${iWindIndex}, errorCode: ${iErrorCode}`, oError);
    },
    windowEventOver(iWindIndex) {
      // 鼠标移过回调
      console.log("鼠标移过回调", iWindIndex);
    },
    windowEventOut(iWindIndex) {
      // 鼠标移出回调
      console.log("鼠标移出回调", iWindIndex);
    },
    windowFullCcreenChange(bFull) {
      // 全屏切换回调
      console.log("全屏切换回调", bFull);
    },
    firstFrameDisplay(iWndIndex, iWidth, iHeight) {
      // 首帧显示回调
      console.log("首帧显示回调", iWndIndex, iWidth, iHeight);


### 最后

由于篇幅限制，pdf文档的详解资料太全面，细节内容实在太多啦，所以只把部分知识点截图出来粗略的介绍，每个小节点里面都有更细化的内容！

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**

![](https://img-blog.csdnimg.cn/img_convert/b7c2eca6cdbd00402950c8ef7719b920.webp?x-oss-process=image/format,png)

![](https://img-blog.csdnimg.cn/img_convert/8396054500beede83709483d3e412da2.webp?x-oss-process=image/format,png)




[外链图片转存中...(img-Ovom0us5-1715592303107)]

[外链图片转存中...(img-myJ6XWt1-1715592303108)]