VUE3对接海康威视监控接口，实现实时查看监控。

x__cc

已于 2023-06-14 17:36:58 修改

阅读量1.6k

点赞数 2

文章标签： vue.js 前端 javascript

于 2023-06-14 17:34:10 首次发布

本文链接：https://blog.csdn.net/cc_66666/article/details/131211907

版权

环境搭建

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

项目集成

将开发包里面的bin文件夹整个复制到项目public下
在vue项目里找到index.html文件直接引入h5player.min.js

插入一个监控的容器

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

初始化监控

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);
    },
    performanceLack(iWndIndex) {
      // 性能不足回调
      console.log("性能不足回调", iWndIndex);
    },
  });
  realplay();
}
async function realplay() {
  const res2 = await getCameraWs()  //后端同事提供的接口，获取ws地址
  let startTime, endTime;
  var playURL = res2.url; //获取到的监控点预览取流URL
  myPlugin
    .JS_Play(
      res2.url,
      {
        playURL, // 流媒体播放时必传
        mode: 1, // 解码类型：0=普通模式; 1=高级模式 默认为0
      },
      curIndex, //当前窗口下标
      // 回放参数
      startTime,
      endTime
    )
    .then(
      () => {
        console.info("JS_Play success");
        // do you want...
      },
      (err) => {
        console.info("JS_Play failed:", err);
        // do you want...
      }
    );
}