Vue中预览HIKVSION海康威视的NVR(网络硬盘录像机)中多个通道(摄像机)的视频

骑猪看日落 2023-09-30 13:04 43阅读 0赞

## 场景 ##

SpringBoot+Vue+HIKVSION实现摄像头多选并多窗口预览(插件版)：

[SpringBoot+Vue+HIKVSION实现摄像头多选并多窗口预览(插件版)\_霸道流氓气质的博客-CSDN博客][SpringBoot_Vue_HIKVSION_-CSDN]

上面实现的在Vue中直接通过单个摄像头的Ip、端口、用户名、密码来预览

摄像头的视频，这里将两个摄像头装在海康威视网络硬盘录像机，即NVR中。

怎样在Vue中进行预览。

去海康威视官网下载web开发包

具体参考上面的博客。

根据其官方文档的说明，Web控件既适应于单个摄像头的预览，也适用于NVR等设备的预览，预览接口和流程是一致的。

![7b0e2f86896a984f361685f2e45d59a3.png][]

注：

博客：  
[霸道流氓气质的博客\_CSDN博客-C\#,架构之路,SpringBoot领域博主][CSDN_-C_SpringBoot]  
关注公众号  
霸道的程序猿  
获取编程相关电子书、教程推送与免费下载。

## 实现 ##

1、要实现浏览器能访问NVR中的摄像头的视频，要保证NVR连接了网络，并配置了ip，以及需要访问视频的电脑的网络和nvr网络互通。

在使用Vue进行对接前，先使用海康官方的CH\_WEB3.0控件开发包中demo/cn下的demo.html或者demo-easy.html测试预览视频的效果

因为此款摄像头只能用插件加兼容模式预览视频，所以使用支持兼容模式的某60浏览器

![44bde497d643ead1f89cb49e94117838.png][]

安装了插件后会提示是否允许阻止的内容，点击允许

![3bd0a68515201033112822241c68f369.png][]

![1fdb9e54bf43117849504cdad361d7a7.png][]

2、然后配置nvr的ip、端口号、用户名、密码等信息

![64223ce45644e471fbb7203de61a6fb9.png][]

登录成功之后会有提示并且显示通道列表，这里Camera 01和02就是代表的有两个摄像头。

3、选择摄像头1,点击预览

![a0e5726cabbde94ff8f91350c1d63ae3.png][]

点击第二个预览格再下拉选中摄像头2点击预览

![9ff3109575243b805b24f391c907391c.png][]

4、需要注意的是，在进行预览时要选择预览的码流类型为子码流

那样视频会比主码流流畅。然后浏览器要切换兼容模式

![f221726d5abd274138b62237d6e4591a.png][]

5、在Vue中实现

首先在前一个页面中获取nvr的ip,因为这里的端口、用户名和密码都是统一配置的，所以不再配置和获取。

下面是在按钮的点击事件中，即methods中

//NVR视频预览，传递通道号
            nvrPreview(channelNum){
                let self = this;
                //校验NvrIP是否配置正确
                if(self.nvrIp){
                    let openVideoData = [];
                    let hkvInfo = {
                        ip: self.nvrIp, //海康威视摄像头/硬盘录像机的ip地址
                        port: "80", //海康威视摄像头/硬盘录像机的端口
                        username: "admin", //海康威视摄像头/硬盘录像机的用户名
                        password: "你自己的密码", //海康威视摄像头/硬盘录像机的密码
                        channels: [channelNum], //海康威视摄像头/硬盘录像机的通道
                        nvrPrechannel: channelNum, //NVR预览通道
                    };
                    openVideoData.push(hkvInfo);
                    let routeUrl = this.$router.resolve({
                    path: "/carNvrVideo",
                    query: {
                        videoData: JSON.stringify(openVideoData),
                        },
                    });
                    window.open(routeUrl.href, "_blank");
                }else{
                    //提示未配置
                    this.$message({
                    message: '当前车辆nvrip未配置',
                    type: 'warning'
                    });
                }
            },

6、配置路由跳转参考前面博客。

这里预览基本和上面单个预览的代码一致，优化的地方是

在调用预览方法时多传递了码流类型iStreamType这个字段，指定为子码流，这样预览更流畅。

这里传递了通道id参数，1就代表1号通道，即摄像头1。

startRealPlay(szDeviceIdentify, iWndIndex, iChannelID) {
          var that = this;
          WebVideoCtrl.I_StartRealPlay(szDeviceIdentify, {
            iRtspPort: that.iRtspPort,
            iWndIndex: iWndIndex,
            iChannelID: iChannelID,
            bZeroChannel: that.bZeroChannel,
            iStreamType: 2,//码流类型，2为子码流
            success: function () {
              //   that.$notify({
              //     title: "成功",
              //     message: "开始预览通道" + iChannelID + "成功",
              //     type: "success",
              //   });
            },
            error(status, xmlDoc2) {
              console.log(xmlDoc2); //不能删除
              // that.$notify({
              //   title: "失败",
              //   message: "开始预览通道" + iChannelID + "失败",
              //   type: "error",
              // });
              if (status === 403) {
                console.log("szInfo 设备不支持Websocket取流！");
              } else {
                console.log("开始预览失败 ", status, xmlDoc2);
              }
            },
          });
        },

预览可以参考官方开发文档传参

![a17c1eb32f6d6c420852d0e33d1d9798.png][]

7、之前发现在预览前先验证是否切换了兼容模式，然后切换之后如果配置的Ip或者用户名等不正确，即

登录失败时所提示的代码仍然是Vue的ElementUI的语法，在兼容模式中无法执行，所以会导致在预览时如果

登录失败就会网页无响应。所以将其登录失败的回调方法中的提示消息由Vue的代码修改为js的alert代码

async 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: (xmlDoc) => {
                //TODO 获取通道信息
                that.getChannelInfo();
                that.getDevicePort(that.hkvInfo.ip + "_" + that.hkvInfo.port);
                that.loginLoading = false;
                this.clickStartRealPlay();
              },
              error: function () {
                that.loginLoading = false;
                alert("当前摄像头配置不对或不在线，登录失败");
                window.opener=null;
                window.open('','_self');
                window.close();
              },
            }
          );
        },

8、还要注意在页面加载完之后要设置一个延迟初始化插件的代码

如果页面没加载完就初始化插件会报错。

mounted() {
        this.videoChange();
      },
      methods: {
        videoChange() {
          setTimeout(() => {
            this.videoInitPlugin(); // 初始化video界面
          }, 300);
        },

9、预览页面完整代码

<template>
      <div class="video_box">
        
        <div id="divPlugin" class="plugin"></div>
      </div>
    </template>
    
    <script>
    import { WebVideoCtrl } from "/static/webVideoCtrl.js";
    export default {
      name: "carNvrVideo",
      components: {},
      data() {
        return {
          szInfo: "",
          rowList: {},
          hkvInfo: {},
          mySelectWnd: 0, //当前选中的窗口
          g_bPTZAuto: false,
          iProtocol: 1,
          loginLoading: false,
          startPlayLoading: false,
          bZeroChannel: false,
          iRtspPort: 0,
          index: 0,
          iWndowType: null,
          videoData: [],
          ua: navigator.userAgent.toLocaleLowerCase(),
        };
      },
      created() {
    
        this.videoData = JSON.parse(this.$route.query.videoData);
        if (this.videoData.length <= 1) {
          this.iWndowType = 1;
        } else if (this.videoData.length > 1 && this.videoData.length <= 4) {
          this.iWndowType = 2;
        }
      },
      mounted() {
        this.videoChange();
      },
      destroyed() {
        this.clickStopRealPlay();
        this.onLogout();
      },
      methods: {
        videoChange() {
          setTimeout(() => {
            this.videoInitPlugin(); // 初始化video界面
          }, 300);
        },
        handleSelectionChange() {},
        submitForm() {},
        cancel() {},
        // 登录
        async 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: (xmlDoc) => {
                //TODO 获取通道信息
                that.getChannelInfo();
                that.getDevicePort(that.hkvInfo.ip + "_" + that.hkvInfo.port);
                that.loginLoading = false;
                this.clickStartRealPlay();
              },
              error: function () {
                that.loginLoading = false;
                alert("当前摄像头配置不对或不在线，登录失败");
                window.opener=null;
                window.open('','_self');
                window.close();
              },
            }
          );
        },
        // 退出
        onLogout() {
          this.videoData.forEach((element) => {
            var szDeviceIdentify = element.ip + "_" + element.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() {
          console.log("开始预览", this.index);
          // 开始预览
          var that = this;
          that.startPlayLoading = true;
          var szDeviceIdentify = that.hkvInfo.ip + "_" + that.hkvInfo.port;
          debugger
          that.startRealPlay(szDeviceIdentify, this.index, that.hkvInfo.nvrPrechannel);
          that.startPlayLoading = false;
        },
        startRealPlay(szDeviceIdentify, iWndIndex, iChannelID) {
          var that = this;
          WebVideoCtrl.I_StartRealPlay(szDeviceIdentify, {
            iRtspPort: that.iRtspPort,
            iWndIndex: iWndIndex,
            iChannelID: iChannelID,
            bZeroChannel: that.bZeroChannel,
            iStreamType: 2,//码流类型，2为子码流
            success: function () {
              //   that.$notify({
              //     title: "成功",
              //     message: "开始预览通道" + iChannelID + "成功",
              //     type: "success",
              //   });
            },
            error(status, xmlDoc2) {
              console.log(xmlDoc2); //不能删除
              // that.$notify({
              //   title: "失败",
              //   message: "开始预览通道" + iChannelID + "失败",
              //   type: "error",
              // });
              if (status === 403) {
                console.log("szInfo 设备不支持Websocket取流！");
              } else {
                console.log("开始预览失败 ", status, xmlDoc2);
              }
            },
          });
        },
        videoInitPlugin() {
          this.$nextTick(() => {
            var iRet = WebVideoCtrl.I_CheckPluginInstall();
            if (iRet === -1) {
              // alert("您还未安装过插件，双击开发包目录里的WebComponentsKit.exe安装");
              this.myFunction();
              return;
            }else{
               if (this.ua.match(/msie/) != null || this.ua.match(/trident/) != null) {
                  this.browserType = "IE";
                  this.initPlugin();
                } else {
                  this.$notify({
                    title: "失败",
                    message: "请在ie模式下查看摄像头",
                    type: "error",
                  });
                }
            }
           
          });
        },
        myFunction() {
          var r = confirm("您还未安装过插件，请下载后查看摄像!");
          if (r == true) {
            window.location.href = "/WebComponentsKit.exe";
          } else {
          }
        },
        initPlugin() {
          WebVideoCtrl.I_InitPlugin("100%", "100%", {
            bWndFull: true, //是否支持单窗口双击全屏，默I_CheckPluginInstall
            iWndowType: this.iWndowType, //默认展示几个摄像头1x1 2x2
            cbInitPluginComplete: function () {
              WebVideoCtrl.I_InsertOBJECTPlugin("divPlugin");
              // 检查插件是否最新
              if (WebVideoCtrl.I_CheckPluginVersion() === -1) {
                return;
              }
            },
          });
          for (var i = 0; i < this.videoData.length; i++) {
           
            this.hkvInfo = this.videoData[i];
            debugger
            this.index = i;
            this.onLogin();
          }
        },
        getDevicePort(szDeviceIdentify) {
          var oPort = WebVideoCtrl.I_GetDevicePort(szDeviceIdentify);
          this.iRtspPort = oPort.iRtspPort;
        },
    
        clickStopRealPlay: function () {
          for (var i = 0; i <= this.index; 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;
          // 数字通道
          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("获取数字通道失败");
            },
          });
          // 模拟通道
          WebVideoCtrl.I_GetAnalogChannelInfo(szDeviceIdentify, {
            async: false,
            mysuccess: function (xmlStr) {
              var jsonObj = that.$x2js.xml2js(xmlStr);
              console.log("模拟通道mysuccess", xmlStr);
              var id = jsonObj.VideoInputChannelList.VideoInputChannel.id;
              that.hkvInfo.channels.push(id);
            },
            success: function (xmlStr) {
              console.log("模拟通道success", xmlStr);
            },
            error: function (status, xmlDoc) {
              console.log("模拟通道error", xmlDoc);
            },
          });
          // TODO 零通道
        },
      },
    };
    </script>
    <style scoped>
    .video_box {
      width: 100%;
      height: 100%;
    }
    
    .plugin {
      width: 100%;
      height: 100%;
    }
    
    .my-tag {
      margin-left: 3px;
    }
    
    .my-group-btn {
      margin-top: 5px;
    }
    </style>

[SpringBoot_Vue_HIKVSION_-CSDN]: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/121180769
[7b0e2f86896a984f361685f2e45d59a3.png]: https://img-blog.csdnimg.cn/img_convert/7b0e2f86896a984f361685f2e45d59a3.png
[CSDN_-C_SpringBoot]: https://blog.csdn.net/badao_liumang_qizhi
[44bde497d643ead1f89cb49e94117838.png]: https://img-blog.csdnimg.cn/img_convert/44bde497d643ead1f89cb49e94117838.png
[3bd0a68515201033112822241c68f369.png]: https://img-blog.csdnimg.cn/img_convert/3bd0a68515201033112822241c68f369.png
[1fdb9e54bf43117849504cdad361d7a7.png]: https://img-blog.csdnimg.cn/img_convert/1fdb9e54bf43117849504cdad361d7a7.png
[64223ce45644e471fbb7203de61a6fb9.png]: https://img-blog.csdnimg.cn/img_convert/64223ce45644e471fbb7203de61a6fb9.png
[a0e5726cabbde94ff8f91350c1d63ae3.png]: https://img-blog.csdnimg.cn/img_convert/a0e5726cabbde94ff8f91350c1d63ae3.png
[9ff3109575243b805b24f391c907391c.png]: https://img-blog.csdnimg.cn/img_convert/9ff3109575243b805b24f391c907391c.png
[f221726d5abd274138b62237d6e4591a.png]: https://img-blog.csdnimg.cn/img_convert/f221726d5abd274138b62237d6e4591a.png
[a17c1eb32f6d6c420852d0e33d1d9798.png]: https://img-blog.csdnimg.cn/img_convert/a17c1eb32f6d6c420852d0e33d1d9798.png