vue2播放海康视频，利用海康H5player

标签：视频 wss JS 海康 地址 vue2 H5player js

一、H5视频播放器开发包地址

1、https://open.hikvision.com/download/5c67f1e2f05948198c909700?type=20

 2、内容

 3、主要用demo里面的文件

 4、demo可以用来测试获取的视频流是不是可以播放，如果用vue开发过，应该有安装的node,在当前页面右键-->在终端中打开

 （1）两者的不同在于，http.js测试ws格式的视频流，如果生产环境是http的地址，则用这个测试，本地测试可以用这个；https.js用来测试wss格式的视频流，这个对应的是https的生产环境。

  （2）下面是打开的测试wss的demo, https://localhost:9091/demo.html(这个链接对应上面)=》http =>ws； https:wss

 5、将demo里面的文件拷贝在vue2项目中，在src同级目录中添加public文件夹，如果有这个文件夹，在下面新建一个文件夹（h5player），将对应的红色框里面的文件拷贝过来

 6、在public文件夹下面的index.html文件中加上对插件的引入。同级目录下的js文件

 7、查询视频接口；如果获取wss格式的视频流，需要给protocol传wss,获取ws格式的视频流，则传ws

 8、显示视频位置

 <div id="player" class="video" /> 9、需要初始化插件相关信息  mounted(){     this.init()     this.initPlayer()   },  //  初始化界面大小，不同尺寸的浏览器调整窗口大小    init() {       // 设置播放容器的宽高并监听窗口大小变化       window.addEventListener('resize', () => {         if( this.player !== null){           this.player.JS_Resize();         }    }）   // 初始化播放器     initPlayer(){       this.player = new window.JSPlugin({         // 需要英文字母开头 必填         szId: 'player',         // 必填,引用H5player.min.js的js相对路径,填写的是public下的路径         szBasePath: '/h5player',         openDebug: true,         iMaxSplit: 1,// 我只展示一个视频信息         iCurrentSplit: 1,         // 样式         oStyle: {           border: '#343434',           borderSelect: '#FFCC00',           background: '#000'         }       })

 10、展示视频

    videoInfo(videoUrl,data){       const _this = this       const param = {         playURL: videoUrl,         // 1：高级模式  0：普通模式，高级模式支持所有         mode: 1       }     // 播放视频           _this.player1.JS_Play(videoUrl, param, 0).then(             () => { 　　　　// 由于我只用了一个位置播放，老在左上角展示，所以我重新调整了大小               _this.player1.JS_Resize();},             e => { console.error(e) }           )          // 调整窗口           _this.player1.JS_ArrangeWindow(1).then(             () => {},             e => { console.error(e) }           )           // 插件报错给出提示，要不界面没有反映           _this.player1.JS_SetWindowControlCallback({             // 插件错误回调             pluginErrorHandler(iWindIndex, iErrorCode, oError) {               _this.$publicmethod.showMessage("获取视频信息失败，请您稍后重试！", _this.$publicmethod.ErrorType)             },           });

11、部署生产环境需要有相关的配置，添加nginx的配置信息

（1）修改nginx配置信息

（2）在海康的运管中心添加一个线路，提供生产环境的ip以及nginx的端口给海康人员，让他们添加一个线路；海康开发人员都知道！

 （3）将生产环境的证书和密钥上传到海康的运管中心系统，上传证书。添加并下发，下发到所有的系统中，然后重启服务即可！

 

 三、问题汇总

1、wss返回的地址是nginx+内网地址和端口，需要在获取到视频地址的接口中，将内网地址替换成外网地址，要不报错！（websocket连接报错502）

2、如果生产环境用的是域名，需要将获取到的地址的ip替换成域名，要不提示不是可信任证书，在console中可以看到ERR_CERT相关报错

 

标签：视频,wss,JS,海康,地址,vue2,H5player,js
From： https://www.cnblogs.com/flyShare/p/18206450