环境搭建

首先，前往官网下载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、方向控制：

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

vue集成海康h5player实现播放
文章目录前言准备工作视频demo 官方文档官方工具开源工具开始开发效果问题点前言本篇章只针对官方提供个h5player工具,做播放和分屏demo. 当然本篇章也是针对已经接触了海康 ...
视频监控系统上云解决方案EasyCVR集成海康EHome私有协议系列——文件查找操作流程
视频监控系统采用云模式进行规划.建设和部署,实现了资源的共享.数据的融通.算力的提升:而开放的生态和业务的智能,让视频监控系统更好地为公安实战服务,让城市更安全.TSINGSEE青犀视频团队研发的Ea ...
视频联网云平台EasyCVR集成海康EHome协议：Ehome协议预览流程
之前我们讲了EasyCVR视频平台集成了海康EHome协议系统配置,EasyCVR集成海康EHome私有协议内容繁杂琐碎,测试内容众多,所以我们特地开辟一个系列,如果大家有兴趣,可以翻阅以往的博客了解 ...
视频监控系统视频上云解决方案EasyCVR集成海康EHome私有协议系列——通过流媒体服务开启语音对讲
TSINGSEE青犀视频团队研发的视频平台大多已经支持了语音对讲的功能,EasyCVR视频上云服务也能够在海康EHome协议下调用语音对讲(语音对讲操作流程),本文是语音对讲功能的一个拓展,将跟大家讲 ...
视频监控系统视频上云解决方案EasyCVR集成海康EHome私有协议系列——报警模块说明
视频联网云平台EasyCVR是一个集视频联网共享.存储.流媒体转发.视频转码.视频上云.智能分析统一等多种功能为一体的流媒体视频服务融合性平台.EasyCVR可以集成海康EHome私有协议,本文讲一下 ...
Springboot集成海康SDK(以海康USB_SDK为例)
新建Springboot项目 Pom文件  <parent><groupId>org.springframework ...
Android平台上集成海康SDK
在项目中需要接入海康设备,因此我们集成了海康Android版本SDK.它分为Device Network SDK和Player SDK.前者用于设备连接.网络通信:后者用于解码.播放. 在APP中,关 ...
Android平台上集成海康SDK（二）
Android平台上集成海康SDK 以上是我之前写的一篇Android平台上集成海康SDK的文章,其中对于Android平台上集成海康SDK.基于海康SDK进行二次开发基本上进行了详细地介绍. 这篇文 ...
海康NVR设备RTSP协议转RTMP协议
Title:海康NVR设备RTSP协议转RTMP协议 Date: 2017-10-17 Author: kagula 环境: [1]海康NVR设备型号为DS-7808N-E2/8P [2]Cent ...
C#使用WebService调用海康SDK实现抓图与录像实时下载
1.海康设备网络SDK下载下载地址:https://www.hikvision.com/cn/download_more_401.html 下载完毕解压后的目录结构如下: 2.代码实现通过参考&q ...

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

环境搭建

项目集成

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

最新文章

热门文章