海康威视web3.0+vue项目使用(踩坑之路)ps:附webVideoCtrl.js文件

最新推荐文章于 2024-07-31 17:02:05 发布

置顶

QueenLee1

最新推荐文章于 2024-07-31 17:02:05 发布

阅读量1.9w

点赞数 8

分类专栏：前端 vue 文章标签： vue 海康威视3.0 web

本文链接：https://blog.csdn.net/QueenLee1/article/details/93623756

版权

本文介绍了在Vue项目中整合海康威视web3.0控件的踩坑经历，包括安装WebComponentsKit.exe、解决demo.html预览问题、调整vue组件videoTab.vue、修改webVideoCtrl.js文件以避免引入错误，以及在babel.config.js中的调整。在项目完成后，作者提醒读者要仔细阅读官方文档并理解参数设置。运行环境包括Windows XP到Windows 10的部分版本及特定浏览器。作者分享了webVideoCtrl.js文件以帮助遇到相同问题的开发者。

摘要由CSDN通过智能技术生成

最近公司开发了一版监控视频的vue项目,我作为实现需求的前端真的是难为我了,各种调查后知道海康威视有web开发包,跟海康威视的SDK联系后发给我两个web二次开发包,

CH_WEB3.0控件开发包V1.1.0_Win32
CH_WEB3.0控件开发包V1.1.0_Win64

看到开发包之后我还是很开心的,但是没想到,从此开始踏上了踩坑之路.(坑真的是太多了!!!ToT)

1.海康威视web3.0

文件列表
在这里插入图片描述
首先,codebase/transform下面有一个WebComponentsKit.exe,把它安装到电脑上.打开demo.html,登录/预览. 第一个坑来了 ,有可能会提示什么什么…我记不住了,反正就是不好用,然后呢,打开web3.0 32位的包,把这里面的WebComponentsKit.exe安装上就可以了.
准备工作Ok了! 其他的demo我就不介绍了.直接进入正题吧!

2.vue项目应用

先放代码吧.新建videoTab.vue

 <div class="video-center">
      <div id="divPlugin" class="plugin"></div>
 </div>

<script>
  import {WebVideoCtrl} from '../../public/js/webVideoCtrl'

  export default {
    components: {},
    data() {
      return {
        value: 1,
        g_iWndIndex: 0,//当前选中的窗口
        g_bPTZAuto: false,
        pumpRoomName: "",
        cameraArray: [],
        webVideo: {},
        iWidth: 800,
        iHeight: 600,
        iProtocol: 1,
        szIP: "10.0.3.187",
        szPort: "80",
        szUsername: "admin",
        szPassword: "1111",
        iStreamType: 1,
        bZeroChannel: false,
        maskData: {
          maskShow: false,
          title: '提示',
          content: '失败',
          cancel: false
        },
      }
    },
    created: function () {

    },
    mounted: function () {
      this.videoInitPlugin();
    },
    destroyed: function () {
      for (var i = 0; i < this.cameraArray.length; i++) {
        WebVideoCtrl.I_Stop({iWndIndex: i});
      }
      var iRet = WebVideoCtrl.I_Logout(this.szIP);

      if (iRet !=&#