Vue 集成海康h5player，实现ws协议的实时监控播放

环境搭建

首先，前往官网下载h5player.js的demo包：

海康开放平台海康威视合作生态致力打造一个能力开放体系、两个生态圈，Hikvision AI Cloud开放平台是能力开放体系的核心内容。它是海康威视基于多年在视频及物联网核心技术积累之上，融合AI、大数据、云计算等技术，为合作伙伴提供的一个二次开发及创新的平台。https://open.hikvision.com/download/5c67f20bb254d61550c2f63e?type=10&id=53a1d2fe6a6f4b34b7aaccd37cd9c73d

项目集成

1、将包中的demo文件移至项目，vue3.0放在public文件夹下，vue2.0放在static文件夹下；

2、将h5player.min.js引入到index.html文件；

3、参考“H5playerV2.1.2开发指南”文档进行相应功能的开发；

        3.1、定义页面元素代码与页面样式代码，定义页面全局变量player：

         

        

        3.2、初始化配置，并在页面mouted初始化时调用该方法：

        

        3.3、获取后台接口请求到的视频流地址，调用视频播放方法，实现视频监控的播放：

        

         

        3.4、抓拍：

        

        3.5、全屏：

        

        3.6、方向控制：

                         ​​​​​​​