位置: IT常识 - 正文

vue集成海康h5player实现播放(h5调用海康摄像头)

编辑:rootadmin
vue集成海康h5player实现播放 文章目录前言准备工作视频demo官方文档官方工具开源工具开始开发效果问题点前言

推荐整理分享vue集成海康h5player实现播放(h5调用海康摄像头),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:海康威视web插件,uniapp海康威视,海康 html,vue海康威视,vue集成海康威视nvr视频回放,vue集成海康web控制,vue集成海康威视nvr视频回放,vue海康威视,内容如对您有帮助,希望把文章链接给更多的朋友!

本篇章只针对官方提供个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支持

开始开发vue集成海康h5player实现播放(h5调用海康摄像头)

代码比较简单,就直接上了,先看代码

<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*4 iMaxSplit: 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 = this this.getPreviewUrl().then(res => { if (res.status !== 200) { _this.$message.warning('获取视频流失败!') return } let preUrl = res.data.data.url const param = { playURL: preUrl, // 1:高级模式 0:普通模式,高级模式支持所有 mode: 1 } // 索引默认0 if (!index) { index = 0 } _this.player.JS_Play(preUrl, param, index).then(() => { // 播放成功回调 console.log('播放成功') }, (err) => { console.log('播放失败') }) }) }, /** * 监控点更新 * @param data */ onChangeCode (data) { this.code = data this.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编码格式的视频的,所有,需要找一个方式,那就是使用官方提供的这个h5playerrtsp和rtmp比较麻烦,我是不想考虑的

然后这是ws流的对视频流的支持情况

我是个业余的前端,有什么不对还望指出

本文链接地址:https://www.jiuchutong.com/zhishi/287166.html 转载请保留说明!

上一篇:Vue项目线上发布,都有缓存不生效怎么办?(vue项目上线教程)

下一篇:Narrenmuehle(愚人磨坊风车),德国Dülken (© dpa picture alliance/Alamy)(愚人二部曲)

  • 增值税普通发票几个点
  • 购买方收取的违约金怎么入账
  • 财务报表中的应交税费包括什么
  • 已发货没开票分录
  • 分公司产生的费用怎么报销
  • 土地出让要不要交印花税吗
  • 税控服务费能抵扣吗
  • 装订凭证要如何写
  • 取得与收益相关的政府补助会计分录
  • 普通发票需要做分录吗?
  • 案例分析互联网巨头的战略计划
  • 购车合同起什么作用
  • 水利基金的计税基础是什么
  • 季初是什么意思
  • 废品残料回收入库
  • 信用证和银行承兑汇票的区别如何做分录
  • 应收账款待确认收入
  • 这个月只开了销项负数怎么办
  • 小规模纳税人月销售额不超过10万免征
  • 销项税现金流量表在附表中如何列示
  • 少付的运费如何做分录
  • 培训机构的收入有哪几方面
  • windows 10输入法
  • 新职工工资从什么时候起算
  • 跨年度暂估成本
  • linux安装tk
  • 赠送积分有两种形式
  • PHP:pg_unescape_bytea()的用法_PostgreSQL函数
  • 支付给代理机构的手续费计入
  • explore.exe
  • 投资者追加资本金属于什么
  • uniapp云打包收费
  • 从零开始吧
  • nbtstat命令的用法
  • 2019年4月1日降低城镇职工什么单位缴费比例
  • 微信公众号认证300元每年都要吗
  • 成本利润率算出的不含税吗
  • 劳务派遣差额征税政策
  • 国际货运代理需要什么样的人才
  • 预期报酬率和期初报酬率
  • 疫情期间增值税减免政策截止时间
  • 销售商品开票税目
  • 电商商品采购流程
  • 租房免租是什么意思
  • 期末留抵的税额怎么做分录
  • 电子退库纳税人是什么意思
  • 小规模收入不超过多少不用交税
  • 季度盈利弥补以前年度亏损的账务处理
  • 公司与公司之间劳务协议
  • 餐饮行业月末结转成本怎么算
  • 商业银行的存款有哪些种类
  • mysql 5.6新特性
  • windows命令操作
  • 怎样打开windows设置页面
  • u盘安装mac系统
  • windowsxp打不开
  • 怎样一键清空
  • linux怎么设置桌面
  • linux init.h
  • 检查linux是否安装了,可用哪些命令
  • js原生dialog
  • javascript entries
  • jquery mobile app案例
  • Python文件处理
  • Unity3D游戏开发标准教程
  • javascript总结笔记
  • node.js的安装方法
  • nodejs thrift
  • jquery删除dom
  • python函数判断
  • java图像对比
  • 税务稽查协查管理办法 国家税务总局
  • 成都税务局网上办事大厅
  • 怎么看有没有欠税
  • 车辆保险增值税税率是多少
  • 第2类医疗器械许可证代办
  • 重庆市电子税务局电话
  • 金米财税口碑如何?
  • 电子税务局如何解绑办税人员
  • 海宁到许村公交车路线
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设