vue集成海康h5player实现播放
文章目录
- 前言
- 准备工作
- 视频demo
- 官方文档
- 官方工具
- 开源工具
- 开始开发
- 效果
- 问题点
前言
本篇章只针对官方提供个h5player工具,做播放和分屏demo。
当然本篇章也是针对已经接触了海康视频对接的开发者。
准备工作
视频demo
官方文档
API https://open.hikvision.com/docs/docId?productId=5c67f20bb254d61550c2f63e&version=%2F658c4efa2595486c9ff140401628ff41&curNodeId=39e50b5c0aa84b47995614c9a102b75f
官方工具
https://open.hikvision.com/download/5c67f20bb254d61550c2f63e?type=10&id=53a1d2fe6a6f4b34b7aaccd37cd9c73d
开源工具
Dplayer:https://dplayer.diygod.dev/,这个支持的格式也很多,不过需要MSE支持
开始开发
代码比较简单,就直接上了,先看代码
<template><div id="app"><el-container><el-row><el-input v-model="code" placeholder="输入监控点编码" @change="onChangeCode"></el-input><el-button @click="onSubmit">默认预览</el-button><el-button @click="onTwoSubmit(2)">4分屏</el-button><el-button @click="onTwoSubmit(4)">16分屏</el-button><el-button @click="onTwoSubmit(8)">64分屏</el-button></el-row><el-row><div id="player" style="width: 800px;height: 800px;"></div></el-row></el-container></div>
</template>
// 请求工具
import http from '@/http/http2.js'
// 官方提供的播放工具
import '@/static/util/h5player.min.js'export default {name: 'hik',data () {return {// 监控点编码code: '',// 播放器对象player: null}},mounted () {// 页面加载初始化this.initPlayer()},methods: {/*** 初始化播放器*/initPlayer () {this.player = new window.JSPlugin({// 需要英文字母开头 必填szId: 'player',// 必填,引用H5player.min.js的js相对路径szBasePath: './static/util',// 当容器div#play_window有固定宽高时,可不传iWidth和iHeight,窗口大小将自适应容器宽高iWidth: 600,iHeight: 400,// 分屏播放,默认最大分屏4*4iMaxSplit: 16,iCurrentSplit: 1,// 样式oStyle: {border: '#343434',borderSelect: '#FFCC00',background: '#000'}})},/*** 获取取流连接* @returns {*}*/getPreviewUrl () {let tempCode = '61077001001320000018'if (this.code) {tempCode = this.code}const param = {'cameraIndexCode': tempCode,'streamType': 0,'protocol': 'ws','transmode': 1}
// 这里return http.post('/ay-video-manage/video/monitor/getRealTimeMonitorVideo', param)},/*** 播放*/play (index) {const _this = thisthis.getPreviewUrl().then(res => {if (res.status !== 200) {_this.$message.warning('获取视频流失败!')return}let preUrl = res.data.data.urlconst param = {playURL: preUrl,// 1:高级模式 0:普通模式,高级模式支持所有mode: 1}// 索引默认0if (!index) {index = 0}_this.player.JS_Play(preUrl, param, index).then(() => {// 播放成功回调console.log('播放成功')},(err) => {console.log('播放失败')})})},/*** 监控点更新* @param data*/onChangeCode (data) {this.code = datathis.play()},/*** 默认预览*/onSubmit () {this.play()},/*** 分屏,这里我太懒了,就循环了一个视频流*/onTwoSubmit (num) {const _this = this// 这里的分屏,是以列来算的,如果这里参数2,那么就是横竖两列,就是4格this.player.JS_ArrangeWindow(num).then(() => {// 循环取流for (let i = 0; i < num * num; i++) {_this.play(i)}},e => { console.error(e) })}}
}
这里用的js是海康工具里下的
下载之后,将/bin
目录下的文件复制到项目static
下,这个工具的说明文档(API)在上一层的doc下面
效果
问题点
- 官方提供的js文件不止一个,在初始化和播放时都会调用其他的js文件,那么就存在一个路径问题,我这里将所有的
js
都放在了src
同目录下的static
下了,然后在src
下,也有一个static
目录,不过里面只放了一个h5player.min.js
,这样在使用h5player.min.js
时就能调用到其他js, - 在初始化播放器时,需要设置js的相对路径属性
szBasePath
,所有的js都会添加这个路径前缀 - 海康视频,大部分是
h264
编码,但也会存在h265
的视频编码,如果使用hls
是播放不了h265
编码格式的视频的,所有,需要找一个方式,那就是使用官方提供的这个h5player
- rtsp和rtmp比较麻烦,我是不想考虑的
然后这是ws流的对视频流的支持情况
我是个业余的前端,有什么不对还望指出
vue集成海康h5player实现播放相关推荐
- 视频联网云平台EasyCVR集成海康EHome协议:Ehome协议预览流程
之前我们讲了EasyCVR视频平台集成了海康EHome协议系统配置,EasyCVR集成海康EHome私有协议内容繁杂琐碎,测试内容众多,所以我们特地开辟一个系列,如果大家有兴趣,可以翻阅以往的博客了解 ...
- 视频监控系统视频上云解决方案EasyCVR集成海康EHome私有协议系列——通过流媒体服务开启语音对讲
TSINGSEE青犀视频团队研发的视频平台大多已经支持了语音对讲的功能,EasyCVR视频上云服务也能够在海康EHome协议下调用语音对讲(语音对讲操作流程),本文是语音对讲功能的一个拓展,将跟大家讲 ...
- Android平台上集成海康SDK(二)
Android平台上集成海康SDK 以上是我之前写的一篇Android平台上集成海康SDK的文章,其中对于Android平台上集成海康SDK.基于海康SDK进行二次开发基本上进行了详细地介绍. 这篇文 ...
- Springboot集成海康SDK(以海康USB_SDK为例)
新建Springboot项目 Pom文件 <!--Spring boot 2.3.2--> <parent><groupId>org.springframework ...
- 视频监控系统上云解决方案EasyCVR集成海康EHome私有协议系列——文件查找操作流程
视频监控系统采用云模式进行规划.建设和部署,实现了资源的共享.数据的融通.算力的提升:而开放的生态和业务的智能,让视频监控系统更好地为公安实战服务,让城市更安全.TSINGSEE青犀视频团队研发的Ea ...
- 视频监控系统视频上云解决方案EasyCVR集成海康EHome私有协议系列——报警模块说明
视频联网云平台EasyCVR是一个集视频联网共享.存储.流媒体转发.视频转码.视频上云.智能分析统一等多种功能为一体的流媒体视频服务融合性平台.EasyCVR可以集成海康EHome私有协议,本文讲一下 ...
- Vue项目中使用海康安全生产平台播放监控视频
最近一直在做有关海康监控视频的项目,闲下来写下这篇文章,加深一下印象,同时也和大家交流一下经验,以便更好提升自己.废话不多说,开始正题.... 首先把海康插件引进到项目中来 然后在index.html ...
- Android平台上集成海康SDK
在项目中需要接入海康设备,因此我们集成了海康Android版本SDK.它分为Device Network SDK和Player SDK.前者用于设备连接.网络通信:后者用于解码.播放. 在APP中,关 ...
- vue+js+海康web开发包接入海康威视摄像头
一.登录海康开放平台下载web开发包,下载需要先登录海康账号,没有的需先注册一个. 海康开放平台web开发包下载地址:https://open.hikvision.com/download/5cda5 ...
最新文章
- Java线程池实现原理及其在美团业务中的实践
- C# DateTimePicker控件如何精确设置显示时分秒
- 6、spring拦截器
- 闯荡北京卖枣的临县人:同有一个“红枣美梦”(2张)
- Linux学习中压缩包格式有哪些?
- MacOS AElf Boilerplate开发体验
- jenkins搭建流水线项目
- java短除法获取二进制_Java十四天零基础入门-Java的数据类型介绍
- 跟随报文,开启一段奇妙之旅
- 实现Canvas2D绘图 使元素绕中心居中旋转
- ueditor php提交表单,ThinkPHP使用Ueditor的方法详解
- vueh5调用摄像头拍照_Vue2.0实现调用摄像头进行拍照功能 exif.js实现图片上传功能...
- Qt Embedded性能优化详解
- CSS盒模型(Box Model)
- firework.js
- MyEclipse 2014 之 安装JDK 7 与JRE 7 (二)
- 仿微信图片编辑 全网功能最全的图片编辑器
- 【干货】火山视频去水印下载使用介绍
- ESP32学习笔记(1)——搭建环境、编译烧写(Windows+VS Code)
- 微信小程序时代,小程序员的产品创意集合