vue集成海康威视摄像头webVideoCtrl.js

最新推荐文章于 2024-06-14 14:01:21 发布
置顶 最新推荐文章于 2024-06-14 14:01:21 发布
阅读量3.7w 收藏 109
点赞数 22
分类专栏： vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yushi6310/article/details/88549363
版权

项目上需要在web页面上集成海康威视摄像头监控页面，通过与海康威视sdk开发联系，获得了一份demo，码云地址（包含demo与vue） 具体海康的demo与vue的demo，请移步码云，https://gitee.com/yushi6310/webVideoCtrl
在这里插入图片描述
demo中的结构目录

├── cn
│   ├── demo-easy.html
│   ├── demo.html
│   ├── demo-iframe.html
│   ├── demo.js
│   ├── demo-requirejs.html
│   ├── demo-seajs.html
│   ├── iframe.html
│   └── sfy_demo.html
├── codebase
│   ├── jsPlugin-1.0.0.min.js
│   ├── playctrl
│   │   ├── AudioRenderer.js
│   │   ├── Decoder.js
│   │   ├── Decoder.js.mem
│   │   ├── DecodeWorker.js
│   │   └── SuperRender.js
│   ├── transform
│   │   ├── SystemTransform.js
│   │   ├── SystemTransform.js.mem
│   │   └── systemTransform-worker.min.js
│   ├── WebComponentsKit.exe
│   └── webVideoCtrl.js
├── demo.css
├── index.html
├── jquery-1.7.1.min.js
├── require-2.3.3.min.js
└── sea-3.0.1.min.js

这个demo有浏览器要求，建议使用ie11

直接打开demo，配置摄像头的相关信息（ip地址啥的），可以直接在浏览器上实时预览摄像头信息，
但 在vue中直接引用webVideoCtrl.js时，实时预览失败，同时控制摄像头转动的功能也是失败的 ，经过几天的排查，修改部分webVideoCtrl.js源码，在vue中终于可以使用了
修改后的代码下载
修改后的webVideoCtrl.js代码

请在index.html中将这个js文件引进来

在这里插入图片描述

下面介绍vue中引用webVideoCtrl.js

<template>
  <div>
    <el-row>
      <el-col :span="12">
        <div id="divPlugin" class="plugin"></div>
        <br/>
        <div>
          <el-form :inline="true" :model="hkvInfo" class="demo-form-inline">
            <el-row>
              <el-col>
                <el-form-item label="ip">
                  <el-input v-model="hkvInfo.ip" placeholder="ip"></el-input>
                </el-form-item>
                <el-form-item label="port">
                  <el-input v-model="hkvInfo.port" placeholder="port"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col>
                <div>
                  <el-form-item label="username">
                    <el-input v-model="hkvInfo.username" placeholder="username"></el-input>
                  </el-form-item>
                  <el-form-item label="password">
                    <el-input v-model="hkvInfo.password" placeholder="password"></el-input>
                  </el-form-item>
                </div>
              </el-col>
            </el-row>
            <el-row>
              <el-col>
                <el-form-item>
                  <el-button type="primary" :loading="loginLoading" @click="onLogin">登录</el-button>
                  <el-button type="primary" :loading="startPlayLoading" @click="clickStartRealPlay">开始预览</el-button>
                  <el-button type="primary" @click="clickStopRealPlay">停止预览</el-button>
                  <el-button type="primary" @click="onLogout">退出</el-button>
                </el-form-item>

              </el-col>
            </el-row>
          </el-form>
        </div>
        <div>
          <label>数字通道列表: </label>
          <el-tag type="success" class="my-tag" v-for="(item,index) in hkvInfo.channels" :key="index">{{item}}</el-tag>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="el-button-group ">
          <div class="el-button primary" @mousedown="mouseDownPTZControl(5)" @mouseup="mouseUpPTZControl">左上</div>
          <div class="el-button primary" @mousedown="mouseDownPTZControl(1)" @mouseup="mouseUpPTZControl">向上</div>
          <div class="el-button primary" @mousedown="mouseDownPTZControl(7)" @mouseup="mouseUpPTZControl">右上</div>
        </div>
        <br/>
        <div class="el-button-group ">
          <div class="el-button primary" @mousedown="mouseDownPTZControl(3)" @mouseup="mouseUpPTZControl">向左</div>
          <div class="el-button primary" @mousedown="mouseDownPTZControl(9)" @mouseup="mouseUpPTZControl">自动</div>
          <div class="el-button primary" @mousedown="mouseDownPTZControl(4)" @mouseup="mouseUpPTZControl">向右</div>
        </div>
        <br/>
        <div class="el-button-group ">
          <div class="el-button primary" @mousedown="mouseDownPTZControl(6)" @mouseup="mouseUpPTZControl">左下</div>
          <div class="el-button primary" @mousedown="mouseDownPTZControl(2)" @mouseup="mouseUpPTZControl">向下</div>
          <div class="el-button primary" @mousedown="mouseDownPTZControl(8)" @mouseup="mouseUpPTZControl">右下</div>
        </div>
      </el-col>
    </el-row>


  </div>
</template>


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

  export default {

    data() {
      return {
        hkvInfo: {
          ip: '1.1.1.1',//海康威视摄像头/硬盘录像机的ip地址
          port: '81',//海康威视摄像头/硬盘录像机的端口
          username: 'admin',//海康威视摄像头/硬盘录像机的用户名
          password: 'admin12345',//海康威视摄像头/硬盘录像机的密码
          channels: [],//海康威视摄像头/硬盘录像机的通道
        },
        mySelectWnd: 0,//当前选中的窗口
        g_bPTZAuto: false,
        iProtocol: 1,
        loginLoading: false,
        startPlayLoading: false,
        iStreamType: 1,
        bZeroChannel: false,
        iRtspPort: 0
      }
    },
    created: function () {
    },
    mounted: function () {
      this.videoInitPlugin(); // 初始化video界面
    },

    destroyed: function () {
      this.clickStopRealPlay();
      this.onLogout();
    },
    methods: {
      onLogin() {
        var that = this;
        that.loginLoading = true;

        // 登录设备
        WebVideoCtrl.I_Login(that.hkvInfo.ip, that.iProtocol, that.hkvInfo.port, that.hkvInfo.username, that.hkvInfo.password, {
          async: false,
          success: function (xmlDoc) {
            // console.log('xmlDoc2', xmlDoc);//不能删除
            //TODO 获取通道信息
            that.getChannelInfo();
            that.getDevicePort(that.hkvInfo.ip + "_" + that.hkvInfo.port);
            that.loginLoading = false;

            that.$message({
              showClose: true,
              message: '登录成功',
              type: 'success'
            });
          },
          error: function () {
            that.loginLoading = false;
            that.$message({
              showClose: true,
              message: '登录失败',
              type: 'error'
            });
          }
        });
      },
      onLogout() {
        this.hkvInfo.channels = [];
        var szDeviceIdentify = this.hkvInfo.ip + "_" + this.hkvInfo.port;
        var iRet = WebVideoCtrl.I_Logout(szDeviceIdentify);
        if (0 == iRet) {
          this.$message({
            showClose: true,
            message: '退出成功',
            type: 'success'
          });
        } else {
          this.$message({
            showClose: true,
            message: '退出失败',
            type: 'error'
          });
        }
      },
      clickStartRealPlay() {
        // 开始预览
        var that = this;
        that.startPlayLoading = true;
        var szDeviceIdentify = that.hkvInfo.ip + "_" + that.hkvInfo.port;

        var j = that.hkvInfo.channels.length > 4 ? 4 : that.hkvInfo.channels.length;
        for (var i = 0; i < j; i++) {
          setTimeout(that.startRealPlay(szDeviceIdentify, i, that.hkvInfo.channels[i]), 500);
        }
        that.startPlayLoading = false;
      },
      videoInitPlugin: function () {
        var iRet = WebVideoCtrl.I_CheckPluginInstall();
        if (iRet === -1) {
          alert('您还未安装过插件，双击开发包目录里的WebComponentsKit.exe安装');
          return;
        }
        this.initPlugin()
      },
      initPlugin: function () {
        var that = this;

        WebVideoCtrl.I_InitPlugin(500, 300, {
          bWndFull: true,//是否支持单窗口双击全屏，默I_CheckPluginInstall
          iWndowType: 2,
          myCbSelWnd: function (xmlStr) { //自己新增的方法
            var jsonObj = that.$x2js.xml2js(xmlStr);
            var szInfo = "当前选择的窗口编号：" + jsonObj.RealPlayInfo.SelectWnd;
            this.mySelectWnd = jsonObj.RealPlayInfo.SelectWnd;
            console.log(szInfo);
          },
          cbInitPluginComplete: function () {
            WebVideoCtrl.I_InsertOBJECTPlugin("divPlugin");
            // 检查插件是否最新
            if (WebVideoCtrl.I_CheckPluginVersion() === -1) {
              alert("检测到新的插件版本，双击开发包目录里的WebComponentsKit.exe升级！");
              return;
            }
          }
        });
      },
      getDevicePort: function (szDeviceIdentify) {
        var oPort = WebVideoCtrl.I_GetDevicePort(szDeviceIdentify);
        this.iRtspPort = oPort.iRtspPort;
      },
      startRealPlay: function (szDeviceIdentify, iWndIndex, iChannelID) {
        var that = this;
        WebVideoCtrl.I_StartRealPlay(szDeviceIdentify, {
          iRtspPort: that.iRtspPort,
          iWndIndex: iWndIndex,
          iStreamType: 1,
          iChannelID: iChannelID,
          bZeroChannel: that.bZeroChannel,
          success: function () {
            that.$notify({
              title: '成功',
              message: '开始预览通道' + iChannelID + '成功',
              type: 'success'
            });
          },
          error: function (status, xmlDoc2) {
            console.log(xmlDoc2)//不能删除
            that.$notify({
              title: '失败',
              message: '开始预览通道' + iChannelID + '失败',
              type: 'error'
            });
            if (status === 403) {
              console.log("szInfo 设备不支持Websocket取流！");
            } else {
              console.log("开始预览失败 ", status, xmlDoc2);
            }
          }
        });
      },
      clickStopRealPlay: function () {
        var j = this.hkvInfo.channels.length > 4 ? 4 : this.hkvInfo.channels.length;
        for (var i = 0; i < j; i++) {
          setTimeout(this.stopRealPlay(i), 1000);
        }
      },
      stopRealPlay: function (iWndIndex) {
        var that = this;
        WebVideoCtrl.I_Stop({
          iWndIndex: iWndIndex,
          success: function () {
            that.$notify({
              title: '成功',
              message: '停止预览窗口' + iWndIndex + '成功',
              type: 'success'
            });
          },
          error: function () {
            that.$notify({
              title: '失败',
              message: '停止预览窗口' + iWndIndex + '失败',
              type: 'error'
            });
          }
        });
      },
      // 获取通道，实际上可以根据自己的项目，获取数字通道，模拟通道，零通道中的一个或多个，不用全部获取（提高效率）
      getChannelInfo: function () {
        var that = this;
        var szDeviceIdentify = this.hkvInfo.ip + "_" + this.hkvInfo.port;
        // debugger
        // 数字通道
        that.hkvInfo.channels = [];
        WebVideoCtrl.I_GetDigitalChannelInfo(szDeviceIdentify, {
            async: false,
            mysuccess: function (xmlStr) {
              console.log('mysuccess I_GetDigitalChannelInfo: ', xmlStr)
              var jsonObj = that.$x2js.xml2js(xmlStr)
              var list = jsonObj.InputProxyChannelStatusList.InputProxyChannelStatus;
              for (var x = 0; x < list.length; x++) {
                that.hkvInfo.channels.push(list[x].id);
              }
            },
            success: function (xmlDoc) {
            },
            error: function (status, xmlDoc) {
              console.log("获取数字通道失败");
            }
          }
        );
        // TODO 模拟通道
        // 模拟通道
        WebVideoCtrl.I_GetAnalogChannelInfo(szDeviceIdentify, {
          async: false,
          mysuccess: function (xmlStr) {
            var jsonObj = that.$x2js.xml2js(xmlStr);
            console.log("模拟通道mysuccess",xmlStr);
            var list = jsonObj.VideoInputChannelList.VideoInputChannel;
            for (var x = 0; x < list.length; x++) {
              that.hkvInfo.channels.push(list[x].id);
            }
          },
          success: function (xmlStr) {
            console.log("模拟通道success",xmlStr);
          },
          error: function (status, xmlDoc) {
            console.log("模拟通道error",xmlDoc);
          }
        });
        // TODO 零通道
      },
      mouseDownPTZControl: function (iPTZIndex) {
        var oWndInfo = WebVideoCtrl.I_GetWindowStatus(this.mySelectWnd);

        if (oWndInfo !== null) {
          if (iPTZIndex === 9 && this.g_bPTZAuto) {
            iPTZSpeed = 0;
          } else {
            this.g_bPTZAuto = false;
          }

          WebVideoCtrl.I_PTZControl(iPTZIndex, false, {
            iPTZSpeed: 4,
            mysuccess: function (xmlDoc) {
              console.log("I_PTZControl", xmlDoc);
              if (iPTZIndex === 9 && this.g_bPTZAuto) {
                console.log(oWndInfo.szDeviceIdentify + " 停止云台成功！");
              } else {
                console.log(oWndInfo.szDeviceIdentify + " 开启云台成功！");
              }
              if (iPTZIndex === 9) {
                this.g_bPTZAuto = !this.g_bPTZAuto;
              }
            },
            error: function (status, xmlDoc) {
              console.log(oWndInfo.szDeviceIdentify + " 开启云台失败！", status, xmlDoc);
            }
          });
        }
      },
      mouseUpPTZControl: function () {
        var oWndInfo = WebVideoCtrl.I_GetWindowStatus(this.mySelectWnd);

        if (oWndInfo !== null) {
          WebVideoCtrl.I_PTZControl(1, true, {
            success: function (xmlDoc) {
              console.log(oWndInfo.szDeviceIdentify + " 停止云台成功！", xmlDoc)
            },
            error: function (status, xmlDoc) {
              console.log(oWndInfo.szDeviceIdentify + " 停止云台失败！", status, xmlDoc);
            }
          });
        }
      },
      myDown(aa) {
        console.log('ddd', aa);
      }
    }
  }
</script>

<style scoped>
  .plugin {
    width: 500px;
    height: 300px;
  }

  .my-tag {
    margin-left: 3px;
  }

  .my-group-btn {
    margin-top: 5px;
  }
</style>

如果出现报错提示：
GetSelectWndInfo未定义等，相关报错信息，主要是你的js文件没有真正引入到你的项目中，请在index.html中也需要将这个js文件引进来

如果出现如下报错信息, 因为vue会对代码有严格的格式校验，直接引入js会报错，请在设置忽略对js的格式校验

在这里插入图片描述
是因为vue对js代码有格式校验，请设置忽略该js的校验，忽略方法如下：
在这里插入图片描述

如果报错说： addEventlistener的错误 提示is not a function， xxxxxxxx is not a function是因为你引用的不是我修改后的js代码

如果想显示多个摄像头录像信息，应该使用硬盘录像机

在这里插入图片描述

最终预览图片

在这里插入图片描述

如有疑问可以添加本人微信 yushi6310

yushi6310
关注
  • 22
    点赞
  • 踩
  • 109
    收藏
    觉得还不错? 一键收藏
  • 105
    评论
专栏目录
海康威视web无插件开发包webVideoCtrl.js+vue做网页开发
LAHM8963的博客
12-02 1万+
最近项目需要在网页上预览海康的摄像头实时画面，遇到一些问题和踩了一些坑，在这里梳理一下。 我本次前端开发使用的是vue-admin-template。 一、上来第一步，先不要着急开发，先看看公司的摄像头是否支持websock取流！。 这是海康客服发来的图片，可能页面显示不太一样，但是 【启用WebSocket】 这一项必须要有，如果没有，那就放弃使用web无插件开发包吧。 还有一种方法，就是启动开发包的demo，登录自己的摄像头，看看能...
vue中使用webVideoCtrl播放海康插件
mysunli的博客
01-02 1万+
最近公司有个监控视频的项目要用到webVideoCtrl插件来播放视频，研究了两天终于搞定。只需要传IP、用户名、密码、端口号即可播放，插件可在网上搜索下载。 新建文件夹来存放webVideoCtrl插件，然后在index.html中引进，如图： 这样就把所需的插件引进去了，我们可以愉快的写代码了。注意要安装WebComponents.exe。 贴出完整代码，子组件 ...
海康视频web页面demo
12-13
资源包含：demo.html，demo.js,codebase,WebComponents,webVideoCtrl.js和EXE文件
vue如何实时展示海康威视摄像头多画面？
最新发布
qq_19872493的博客
06-14 771
关于大屏视频监控有三种解决方案： https://juejin.cn/post/7369783680425852938 1.海康威视 优点：实时性强。多画面运行流畅，缺点：会覆盖在DOM最上方无法选中可能会导致样式挤压变形等样式问题 2.[flv视频流]+[nodeServer] 优点：可配置性强 缺点：服务端大流量稳定性不确定 3.rtsp视频流(默认带声音播放) 优点：插件稳定，可网页调试视频流； 缺点：需向后端发送rtsp地址
Vue 海康监控多屏幕展示 WebVideoCtrl 3.3.0
qq_38785028的博客
01-11 1998
将WebVideoCtrl.js 和jquery 引入index.html 中。封装一个WebVideo.js。
海康web3.2无插件开发指北
yj617的博客
01-04 8233
海康web3.2无插件开发指北
在web页面使用webVideoCtrl.js集成海康威视
weixin_44664066的博客
09-05 1953
使用的是webSDK3.3版本的集成包，在项目上接入海康威视的视频。
webVideoCtrl
05-08
海康摄像头webVideoCtrl源码在这
webVideoCtrl.js海康威视摄像vue引用脚本
03-14
vue集成原版的webVideoCtrl.js会出现报错，该资源修改了部分源码，用于支持vue，使用代码前请参考博客：https://blog.csdn.net/yushi6310/article/details/88549363
webVideoCtrl.js
04-27
自定义hk威视webVideoCtrl.js文件,用于vue项目时做的更改,其中的js文件引入的位置再博客中有写,嗯...就这些
HKVEDIO-VUECTRL:vue集成海康官方控件webVideoCtrl.js，运行在IE11环境下
03-26
海康web开发控件 在作者的项目基础上进行二次开发和改良...如果上面的步骤没有问题，可以在本地运行vue的代码（hkvVideoVue文件内的工程），将views / hkv.vue下的hkvInfo修改成自己的配置 运行命令： npm install np
webVideoCtrl 海康威视web开发 vue + elementUI demo
11-05
海康威视官方提供的web开发包 使用vue + elementUI实现，里面引用的海康的webVideoCtrl.js文件
webVideoCtrl.js 1.0.6-1.0.9-1.1.0.zip
03-19
海康威视是全球领先的以视频为核心的物联网解决方案提供商，致力于不断提升视频处理技术和视频分析技术，面向全球提供领先的监控产品和技术解决方案。 这个包里包含海康威视的web sdk 库文件 webVideoCtrl.js 和 依赖的jquery-1.7.1.min.js 包含的webVideoCtrl.js版本有： webVideoCtrl.1.0.6.js webVideoCtrl.1.0.9.js webVideoCtrl1.1.0.js
海康威视web插件3.2__20200616.zip
09-18
看不起哪些要积分要币的，下载个资源真费劲，懒得去官网注册下载的兄弟直接下载，官网地址：https://open.hikvision.com/download/5cda567cf47ae80dd41a54b3?type=10&id=4c945d18fa5f49638ce517ec32e24e24
vue.js和vue.min.js
06-13
Vue.js和Vue.min.js是两种版本的同一款前端JavaScript框架——Vue.js的实现。Vue.js由尤雨溪（Evan You）开发，旨在为构建用户界面提供简洁、易用且可扩展的工具。这两个文件在功能上是相同的，但它们在实际应用中...
海康威视WebSDK_V3.3.0 集成vue2项目避坑+解决方案
qq_43647376的博客
12-27 4117
海康威视，WEB插件，WebSDK_V3.3.0，插件销毁报错，插件生成报错
大华web二次开发调用WebVideoCtrl.js报错WebVideoCtrl未定义
weixin_52012102的博客
06-21 2030
大华web二次开发调用WebVideoCtrl.js报错WebVideoCtrl未定义问题描述：WebVideoCtrl未定义解决办法：在html文件中引用WebVideoCtrl.js文件时，需要在调用WebVideoCtrl.js中方法的js下面引入。不要在html的最后引用。 问题描述：WebVideoCtrl未定义 解决办法： 在html文件中引用WebVideoCtrl.js文件时，需要在调用WebVideoCtrl.js中方法的js下面引入。不要在html的最后引用。 ...
海康威视web3.0+vue项目使用(踩坑之路)ps:附webVideoCtrl.js文件
热门推荐
QueenLee1的博客
06-25 1万+
文章目录1.海康威视web3.02.vue项目应用3 运行环境 最近公司开发了一版监控视频的vue项目,我作为实现需求的前端真的是难为我了,各种调查后知道海康威视有web开发包,跟海康威视的SDK联系后发给我两个web二次开发包, CH_WEB3.0控件开发包V1.1.0_Win32 CH_WEB3.0控件开发包V1.1.0_Win64 看到开发包之后我还是很开心的,但是没想到,从此开始踏上了...
vue 引用webVideoCtrl.js
09-18
要在Vue中引用webVideoCtrl.js，你需要按照以下步骤进行操作： 1. 首先，在你的Vue项目中创建一个新的目录，用于存放第三方库和插件。可以将其命名为"static"或者其他你喜欢的名字。 2. 将webVideoCtrl.js文件复制到这个新创建的目录中。 3. 在你的Vue组件中，通过使用`import`语句引入webVideoCtrl.js。假设你的Vue组件名为"VideoPreview"，你可以在组件代码的顶部添加以下代码： ```javascript import webVideoCtrl from "@/static/webVideoCtrl.js"; ``` 这里的"@/static/webVideoCtrl.js"是webVideoCtrl.js文件所在的相对路径。根据实际情况进行调整。 4. 现在，你可以在Vue组件中使用webVideoCtrl.js提供的功能了。可以参考海康威视提供的文档或示例代码，使用webVideoCtrl对象来实现实时预览等功能。
评论 105
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值