• Hikvison对接NVR实现WEB无插件开发包实现前端视频预览(html、vue、nginx代理)

    场景

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

    Vue中预览HIKVSION海康威视的NVR(网络硬盘录像机)中多个通道(摄像机)的视频_霸道流氓气质的博客-CSDN博客_海康nvr网页预览

    在上面进行NVR视频预览时采用的是WEB控件开发包，需要电脑安装插件，并且需要浏览器在

    兼容模式下预览。

    除此之外，还有另一种无插件开发包的方式

     

    截止目前是WEB无插件开发包V3.2

    WEB3.2无插件版本开发包，支持高版本谷歌、火狐浏览器，同时需要设备支持Websocket取流。无插件版本需要使用nginx代理服务器。

    按照说明可知，需要NVR支持websocket取流。

    验证NVR是否支持websocket取流

    这里的NVR型号为:DS-8664n-k16

     

    登录到NVR的web页面-配置-系统设置-网络-高级配置-启用websocket

     

    如果有启用WebSokcet选项，则代表可以，为了进一步验证，下载上面的官方demo。

     

    按照官方提供的说明，运行nginx的代理

     

    修改nginx目录下的配置文件

     

    这里只是简单修改了端口号为8000

    然后点击start.bat启动nginx,访问

    http://127.0.0.1:8000/cn/demo.html

    输入NVR对应的地址、用户名、密码等信息，然后点击登录和开始预览

     

    如果官方demo能预览成功，那么就可以使用无插件开发包了。

    注：

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

    实现

    1、在demo.html中能实现预览的基础上，只需要根据自己的需要改造即可，

    对应的demo以及接口文档说的很清楚。

    那么怎么将demo的示例与现有项目进行结合，比如前后端分离的SpringBoot+Vue的项目。

    若依前后端分离版本地搭建开发环境并运行项目的教程：

    若依前后端分离版手把手教你本地搭建环境并运行项目_霸道流氓气质的博客-CSDN博客_前后端分离项目本地运行

    在基于Vue的项目上进行代码改造

     

    后台存储摄像头的相关信息，最需要的就是通道号，拿其来进行预览时传参用

     

    选中摄像头时点击预览按钮，传递通道号参数至预览页面。

    前面流程可参考

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

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

    然后根据官方demo引入需要的js等文件

     

    下面主要是预览页面的代码

    1. <template>
    2.   <el-dialog
    3.     title="视频监控"
    4.     :visible.sync="videoOpen"
    5.     width="800px"
    6.     :append-to-body=false
    7.     @close="videoClose"
    8.     class="video_box"
    9.     :modal=false
    10.   >
    11.     <!-- 摄像头 -->
    12.     <!--视频窗口展示-->
    13.     <div id="playWnd" class="playWnd" ref="playWnd"></div>
    14.   </el-dialog>
    15. </template>
    16.  
    17. <script>
    18. const g_iWndIndex = 0; //可以不用设置这个变量，有窗口参数的接口中，不用传值，开发包会默认使用当前选择窗口
    19. export default {
    20.   name: "HkVideo1",
    21.   components: {},
    22.   props: {
    23.     channelId: "",
    24.   },
    25.   watch: {},
    26.   data() {
    27.     return {
    28.       isLogin: false,
    29.       videoOpen: false,
    30.       szDeviceIdentify: "", // 设备标识（IP_Port）
    31.       ip: "NVR的ip",
    32.       port: "80",
    33.       username: "NVR的用户名",
    34.       password: "NVR的密码",
    35.     };
    36.   },
    37.   created() {},
    38.   mounted() {},
    39.   destroyed() {},
    40.   methods: {
    41.     // 创建播放实例
    42.     async initPlugin() {
    43.  
    44.       let iRet = window.WebVideoCtrl.I_CheckPluginInstall();
    45.  
    46.       if (-1 == iRet) {
    47.         alert("您还未安装过插件，请安装WebComponentsKit.exe！");
    48.         this.$confirm("是否下载WebComponentsKit.exe插件？", "提示", {
    49.           confirmButtonText: "确定",
    50.           cancelButtonText: "取消",
    51.           type: "warning",
    52.         }).then(() => {
    53.           window.location.href = "/static/HK_3.2/WebComponentsKit.exe";
    54.         });
    55.  
    56.         return;
    57.       }
    58.       // 初始化插件参数及插入插件
    59.       window.WebVideoCtrl.I_InitPlugin(800, 600, {
    60.         bWndFull: true, //是否支持单窗口双击全屏，默认支持 true:支持 false:不支持
    61.         iPackageType: 2,
    62.         //szColorProperty:"plugin-background:0000ff; sub-background:0000ff; sub-border:00ffff; sub-border-select:0000ff",   //2:PS 11:MP4
    63.         iWndowType: 1,
    64.         bNoPlugin: true,
    65.         // 窗口选中事件回调
    66.         cbSelWnd: (xmlDoc) => {
    67.           var szInfo = "当前选择的窗口编号：" + g_iWndIndex;
    68.           console.log(szInfo);
    69.         },
    70.         // 窗口双击事件回调
    71.         cbDoubleClickWnd: (iWndIndex, bFullScreen) => {
    72.           var szInfo = "当前放大的窗口编号：" + iWndIndex;
    73.           if (!bFullScreen) {
    74.             szInfo = "当前还原的窗口编号：" + iWndIndex;
    75.           }
    76.           console.log(szInfo);
    77.         },
    78.         // 插件事件回调
    79.         cbEvent: (iEventType, iParam1, iParam2) => {
    80.           if (2 == iEventType) {
    81.             // 回放正常结束
    82.             console.log("窗口" + iParam1 + "回放结束！");
    83.           } else if (-1 == iEventType) {
    84.             console.log("设备" + iParam1 + "网络错误！");
    85.           } else if (3001 == iEventType) {
    86.             this.clickStopRecord(g_szRecordType, iParam1);
    87.           }
    88.         },
    89.         cbRemoteConfig: () => {
    90.           console.log("关闭远程配置库！");
    91.         },
    92.         // 插件初始化完成回调
    93.         cbInitPluginComplete: () => {
    94.           this.$nextTick(() => {
    95.             console.log('窗口', this.$refs.playWnd)
    96.             let isInit = window.WebVideoCtrl.I_InsertOBJECTPlugin('playWnd');
    97.             console.log('isInit', isInit)
    98.  
    99.             // 检查插件是否最新
    100.             if (-1 == window.WebVideoCtrl.I_CheckPluginVersion()) {
    101.               alert("检测到新的插件版本，请对WebComponentsKit.exe进行升级！");
    102.               return;
    103.             } else this.clickLogin();
    104.           })
    105.         },
    106.       });
    107.     },
    108.  
    109.     // 登录
    110.     clickLogin() {
    111.       let { ip, port, username, password } = this;
    112.  
    113.       if ("" == ip || "" == port) {
    114.         return;
    115.       }
    116.  
    117.       this.szDeviceIdentify = ip + "_" + port;
    118.  
    119.       let iRet = window.WebVideoCtrl.I_Login(ip, 1, port, username, password, {
    120.         success: (xmlDoc) => {
    121.           setTimeout(() => {
    122.             this.getChannelInfo();
    123.             this.getDevicePort();
    124.           }, 10);
    125.         },
    126.         error: (status, xmlDoc) => {
    127.           console.log(" 登录失败！", status, xmlDoc);
    128.         },
    129.       });
    130.  
    131.       if (-1 == iRet) {
    132.         this.clickStartRealPlay();
    133.       }
    134.     },
    135.     // 获取通道
    136.     getChannelInfo() {
    137.       if (null == this.szDeviceIdentify) {
    138.         return;
    139.       }
    140.  
    141.       // 模拟通道
    142.       window.WebVideoCtrl.I_GetAnalogChannelInfo(this.szDeviceIdentify, {
    143.         async: false,
    144.         success: (xmlDoc) => {
    145.         },
    146.         error: (status, xmlDoc) => {
    147.           console.log(" 获取模拟通道失败！");
    148.         },
    149.       });
    150.       // 数字通道
    151.       window.WebVideoCtrl.I_GetDigitalChannelInfo(this.szDeviceIdentify, {
    152.         async: false,
    153.         success: (xmlDoc) => {
    154.         },
    155.         error: (status, xmlDoc) => {
    156.           console.log(" 获取数字通道失败！");
    157.         },
    158.       });
    159.       // 零通道
    160.       window.WebVideoCtrl.I_GetZeroChannelInfo(this.szDeviceIdentify, {
    161.         async: false,
    162.         success: (xmlDoc) => {
    163.         },
    164.         error: (status, xmlDoc) => {
    165.           console.log(" 获取零通道失败！");
    166.         },
    167.       });
    168.     },
    169.     // 获取端口
    170.     getDevicePort() {
    171.       if (null == this.szDeviceIdentify) {
    172.         return;
    173.       }
    174.  
    175.       this.port = window.WebVideoCtrl.I_GetDevicePort(this.szDeviceIdentify);
    176.       if (this.port != null) {
    177.         this.clickStartRealPlay();
    178.         return true
    179.       } else {
    180.         console.log(" 获取端口失败！");
    181.         return false
    182.       }
    183.     },
    184.     // 开始预览
    185.     clickStartRealPlay(iStreamType) {
    186.       let wndInfo = window.WebVideoCtrl.I_GetWindowStatus(g_iWndIndex);
    187.  
    188.       let iChannelID = this.channelId; // 通道列表
    189.       let bZeroChannel = false; // 是否播放零通道(下拉框)
    190.       let szInfo = "";
    191.  
    192.       if ("undefined" === typeof iStreamType) {
    193.         iStreamType = 2; // 1主码流 2子码流 3第三码流 4转码码流
    194.       }
    195.  
    196.       if (null == this.szDeviceIdentify) {
    197.         return;
    198.       }
    199.       let startRealPlay = () => {
    200.         window.WebVideoCtrl.I_StartRealPlay(this.szDeviceIdentify, {
    201.           iRtspPort: 554,
    202.           iStreamType: iStreamType,
    203.           iChannelID: iChannelID,
    204.           bZeroChannel: bZeroChannel,
    205.           success: () => {
    206.             szInfo = "开始预览成功！";
    207.             console.log(szInfo);
    208.           },
    209.           error: (status, xmlDoc) => {
    210.             if (403 === status) {
    211.               szInfo = "设备不支持Websocket取流！";
    212.             } else {
    213.               szInfo = "开始预览失败！";
    214.             }
    215.             this.$message.error(szInfo);
    216.           },
    217.         });
    218.       };
    219.  
    220.       if (wndInfo != null) {
    221.         // 已经在播放了，先停止
    222.         window.WebVideoCtrl.I_Stop({
    223.           success: () => {
    224.             startRealPlay();
    225.           },
    226.         });
    227.       } else {
    228.         startRealPlay();
    229.       }
    230.     },
    231.     // 停止预览
    232.     clickStopRealPlay() {
    233.       let oWndInfo = window.WebVideoCtrl.I_GetWindowStatus(g_iWndIndex),
    234.         szInfo = "";
    235.  
    236.       if (oWndInfo != null) {
    237.         window.WebVideoCtrl.I_Stop({
    238.           success: () => {
    239.             szInfo = "停止预览成功！";
    240.             console.log(szInfo);
    241.           },
    242.           error: () => {
    243.             szInfo = "停止预览失败！";
    244.             console.log(szInfo);
    245.           },
    246.         });
    247.       }
    248.     },
    249.     // 全屏
    250.     clickFullScreen() {
    251.       window.WebVideoCtrl.I_FullScreen(true);
    252.     },
    253.     // 停止录像
    254.     clickStopRecord(szType, iWndIndex) {
    255.       if ("undefined" === typeof iWndIndex) {
    256.         iWndIndex = g_iWndIndex;
    257.       }
    258.       var oWndInfo = window.WebVideoCtrl.I_GetWindowStatus(iWndIndex),
    259.         szInfo = "";
    260.  
    261.       if (oWndInfo != null) {
    262.         window.WebVideoCtrl.I_StopRecord({
    263.           success: () => {
    264.             if ("realplay" === szType) {
    265.               szInfo = "停止录像成功！";
    266.             } else if ("playback" === szType) {
    267.               szInfo = "停止剪辑成功！";
    268.             }
    269.             showOPInfo(oWndInfo.szDeviceIdentify + " " + szInfo);
    270.           },
    271.           error: () => {
    272.             if ("realplay" === szType) {
    273.               szInfo = "停止录像失败！";
    274.             } else if ("playback" === szType) {
    275.               szInfo = "停止剪辑失败！";
    276.             }
    277.             showOPInfo(oWndInfo.szDeviceIdentify + " " + szInfo);
    278.           },
    279.         });
    280.       }
    281.     },
    282.     // 查看摄像
    283.     videoChange() {
    284.       this.videoOpen = true;
    285.       this.$nextTick(() => {
    286.         if(!this.isLogin) {
    287.           this.isLogin = true
    288.           this.initPlugin()
    289.         } else {
    290.           this.clickStartRealPlay();
    291.         }
    292.       });
    293.     },
    294.     // 关闭摄像头弹窗
    295.     videoClose() {
    296.       this.videoOpen = false;
    297.       console.log(this.isLogin)
    298.       this.clickStopRealPlay();
    299.     },
    300.   },
    301. };
    302. </script>
    303.   <style scoped lang="scss">
    304. .video_box {
    305.   width: 100%;
    306.   height: 100%;
    307. }
    308.  
    309. .plugin {
    310.   width: 100%;
    311.   height: 100%;
    312. }
    313.  
    314. .playWnd {
    315.   width: 800px;
    316.   height: 600px;
    317.   margin: 0;
    318. }
    319.  
    320. .video_box {
    321.   ::v-deep .el-dialog__body {
    322.     padding: 0 !important;
    323.   }
    324. }
    325. </style>

    2、关于nginx代理

    查看官方示例nginx配置文件中

     

    需要做两部分的代理。最前面的

    1.         location / {
    2.             root   "../webs";
    3.             index  index.html index.htm;
    4.         }

    是其示例demo的静态页面的代理，对应自己的Vue的dist包的代理

    对应的线上要改成

    1.     location / {
    2.       root C:\dist;
    3.       try_files $uri $uri/ /index.html;
    4.       index index.html index.htm;
    5.     }

    剩下两个代理一个是接口代理，比如调用登录接口时进行反向代理

    1. ​
    2.  location ~ /ISAPI|SDK/ {
    3.      if ($http_cookie ~ "webVideoCtrlProxy=(.+)") {
    4.   proxy_pass http://$cookie_webVideoCtrlProxy;
    5.   break;
    6.      }
    7.  }
    8.  
    9. ​

    这个意思大概是如果是ISAPI或者SDK开头的请求，波浪线代表不忽略大小写，就被被代理到下面的地址。

    但是这里会疑问为什么代理配置文件中没有配置任何关于nvr的ip地址的配置，那我代理时是怎么请求接口的。

    这里是在中间加一个nginx进行转发，nginx通过请求中的Cookie找到NVR的Ip地址进行转发，包括预览时获取视频流

    也是通过这种方式进行websocket代理并获取视频流。

    类似如下这张流程图。

     

    所以只要按照官方的nginx的配置文件将自己项目的nginx配置文件进行修改即可

    下面提供一个改造之后项目的nginx的配置文件示例

    1. ​
    2. worker_processes 1;
    3. events {
    4.   worker_connections 1024;
    5. }
    6. http {
    7.   include mime.types;
    8.   default_type application/octet-stream;
    9.   sendfile on;
    10.   keepalive_timeout 65;
    11.   map $http_upgrade $connection_upgrade {
    12.     default upgrade;
    13.     '' close;
    14.   }
    15.   server {
    16.     listen 90;
    17.     server_name localhost;
    18.  
    19.     client_max_body_size 300M;
    20.  
    21.     #websocket相关配置
    22.     proxy_http_version 1.1;
    23.     proxy_set_header Upgrade $http_upgrade;
    24.     proxy_set_header Connection "upgrade";
    25.     proxy_set_header X-real-ip $remote_addr;
    26.     proxy_set_header X-Forwarded-For $remote_addr;
    27.  
    28.    
    29.     location / {
    30.       root D:\font\dist;
    31.       try_files $uri $uri/ /index.html;
    32.       index index.html index.htm;
    33.     }
    34.     location /prod-api/ {
    35.       proxy_set_header Host $http_host;
    36.       proxy_set_header X-Real-IP $remote_addr;
    37.       proxy_set_header REMOTE-HOST $remote_addr;
    38.       proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    39.       proxy_pass http://服务器ip:8888/;
    40.     }
    41.     location ~ /ISAPI|SDK/ {
    42.       if ($http_cookie ~ "webVideoCtrlProxy=(.+)") {
    43.  proxy_pass http://$cookie_webVideoCtrlProxy;
    44.  break;
    45.       }
    46.     }
    47.  
    48.     location ^~ /webSocketVideoCtrlProxy {
    49.      #web socket
    50.      proxy_http_version 1.1;
    51.      proxy_set_header Upgrade $http_upgrade;
    52.      proxy_set_header Connection "upgrade";
    53.      proxy_set_header Host $host;
    54.  
    55.      if ($http_cookie ~ "webVideoCtrlProxyWs=(.+)") {
    56.   proxy_pass http://$cookie_webVideoCtrlProxyWs/$cookie_webVideoCtrlProxyWsChannel?$args;
    57.   break;
    58.      }
    59.      if ($http_cookie ~ "webVideoCtrlProxyWss=(.+)") {
    60.   proxy_pass http://$cookie_webVideoCtrlProxyWss/$cookie_webVideoCtrlProxyWsChannel?$args;
    61.   break;
    62.      }
    63.     }
    64.  
    65.     error_page 500 502 503 504 /50x.html;
    66.     location = /50x.html {
    67.       root html;
    68.     }
    69.   }
    70. }
    71.  
    72. ​

    前后端项目使用Nginx代理可以参考

    若依前后端分离版本，Windows下使用Nginx代理的方式进行部署(全流程，图文教程)：

    若依前后端分离版本，Windows下使用Nginx代理的方式进行部署(全流程，图文教程)_霸道流氓气质的博客-CSDN博客

    预览效果

     

  • 相关阅读:
    网页大作业代码自取【HTML+CSS制作美味糖果网站】
    为什么要做LiveVideoStack课程？
    web网页大作业：基于html设计与实现的茶文化网站12页（带psd）
    业务架构·应用架构·数据架构实战~业务驱动的应用架构设计
    【人脸识别】face_recognition 库的使用
    SpringBoot vue云办公系统
    C++语法——右值引用、移动构造和赋值、万能引用和转发、move和forward底层实现
    js返回上一页和刷新页面
    神经网络的三种训练方法,神经网络训练全过程
    【JAVA UI】abilitySlice或ability以Action方式跳转
  • 原文地址：https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/127717532