位置: 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)(愚人二部曲)

  • iqoo8怎么设置锁屏密码(iqoo8怎么设置锁屏视频)

    iqoo8怎么设置锁屏密码(iqoo8怎么设置锁屏视频)

  • vivox70pro+晚上怎么拍夜景(vivo x7夜间模式)

    vivox70pro+晚上怎么拍夜景(vivo x7夜间模式)

  • mibox3s是什么设备(mibox4)

    mibox3s是什么设备(mibox4)

  • 蓝牙手表和手机最远距离是多少(蓝牙手表和手机的距离可以有多远)

    蓝牙手表和手机最远距离是多少(蓝牙手表和手机的距离可以有多远)

  • qq音乐绿钻刚开通可以退嘛(qq音乐绿钻还要付费)

    qq音乐绿钻刚开通可以退嘛(qq音乐绿钻还要付费)

  • 滴滴快车最迟多久付款(滴滴车最晚可以跑到几点)

    滴滴快车最迟多久付款(滴滴车最晚可以跑到几点)

  • 软件调试的任务是什么(软件调试的任务是发现并改正程序中的错误)

    软件调试的任务是什么(软件调试的任务是发现并改正程序中的错误)

  • 怎么购买超前点播(购买超前点播可以下载吗)

    怎么购买超前点播(购买超前点播可以下载吗)

  • 抖音好友列表怎么没了(抖音好友列表怎么关闭)

    抖音好友列表怎么没了(抖音好友列表怎么关闭)

  • ipad待机时间多久(ipad2020待机时长)

    ipad待机时间多久(ipad2020待机时长)

  • 小米手机突然重启咋回事(小米手机突然重启怎么办)

    小米手机突然重启咋回事(小米手机突然重启怎么办)

  • iphone下载需要验证又刷不出来(苹果下载需要验证什么意思)

    iphone下载需要验证又刷不出来(苹果下载需要验证什么意思)

  • windows是一个多任务操作系统指的是什么(windows是一个多任务操作,多任务指的是)

    windows是一个多任务操作系统指的是什么(windows是一个多任务操作,多任务指的是)

  • 苹果se和5s有什么区别(苹果se和5s哪个好)

    苹果se和5s有什么区别(苹果se和5s哪个好)

  • 星火直播有ios版吗(星火直播ios版 最新)

    星火直播有ios版吗(星火直播ios版 最新)

  • 淘宝怎么关掉帮买提示(淘宝帮忙怎么关闭)

    淘宝怎么关掉帮买提示(淘宝帮忙怎么关闭)

  • 小米cc9电池耐用吗(小米cc 9电池)

    小米cc9电池耐用吗(小米cc 9电池)

  • 58到家怎么接单(58到家怎么接单的流程)

    58到家怎么接单(58到家怎么接单的流程)

  • 小米9防水吗?(小米9防水到什么程度)

    小米9防水吗?(小米9防水到什么程度)

  • 如何取消订阅(如何取消订阅自动续费)

    如何取消订阅(如何取消订阅自动续费)

  • 苹果x怎么恢复微信聊天记录(苹果x怎么恢复出厂设置)

    苹果x怎么恢复微信聊天记录(苹果x怎么恢复出厂设置)

  • 充电线外面的橡胶开了(充电线外面的橡胶开了用黑色胶)

    充电线外面的橡胶开了(充电线外面的橡胶开了用黑色胶)

  • autonavi是什么文件夹

    autonavi是什么文件夹

  • vue3,使用watch监听props中的数据(vue watch监听vuex数据)

    vue3,使用watch监听props中的数据(vue watch监听vuex数据)

  • 极北朱顶雀的巢,芬兰拉普兰 (© Maximilian Buzun/Alamy)(朱顶雀的饲养)

    极北朱顶雀的巢,芬兰拉普兰 (© Maximilian Buzun/Alamy)(朱顶雀的饲养)

  • 企业所得税是含税价还是不含税价
  • 什么是离岛免税如何购买有哪些特殊规定
  • 印花税计提怎么计提
  • 房屋维修基金帐户怎么查
  • 教育培训学校怎么翻译
  • 小规模纳税人增值税优惠政策2023
  • 资本公积账务
  • 股东无偿借款给公司需要交税吗
  • 房贷抵税如何申请流程
  • 无形资产是金融性资产还是经营性资产
  • 捐赠支出和赞助支出的区别
  • 进口报关手续费
  • 零余额账户银行余额调节表
  • 企业汇算清缴补税原因
  • 地税税款未扣怎么处理
  • 公司改名字麻烦不
  • 开发票六位代码
  • 不动产公告期
  • 怎么进行现金流量分析
  • 企业的银行存款日记账属于
  • 公司年检需要什么资料
  • 收到进项税额发票怎么处理
  • 已认证抵扣的进项税额转出做账的会计处理
  • win10蓝牙鼠标已连接不显示
  • 农村合作社收到财政拨款怎么做分录
  • centos 6.5安装教程
  • 打开网页出现电脑标志
  • win7安装netframework4.5
  • 退货红冲发票要收回原发票吗
  • 如何把文档转换成二维码
  • scardsvr32.exe - scardsvr32是什么进程 有什么用
  • 摊销租赁费属于什么费用
  • 装修费预付款会计分录
  • 委托代销商品的科目编码
  • 置换土地如何做账务处理
  • 固定资产加速折旧方法
  • 金银首饰消费税计税依据
  • 收到金融服务费怎么转账给别人
  • 弃置费用预计负债递延所得税怎么处理
  • 实收资本挂在其他应收款怎么冲销
  • css获取id
  • 微信收款计入哪个科目
  • 票据带息和不带息
  • 利用python创建文件
  • 投资性房地产递延所得税负债为什么计入其他综合收益
  • 其他收益包含
  • 房屋租赁交的定金可以退吗
  • 如何快速删掉通讯录联系人
  • 兼职人员的个税怎么计算
  • 民间非营利组织财务管理制度
  • 人工费暂估怎么做分录
  • 从内地到香港坐飞机到国内
  • 应收外币科目在哪里设置
  • 年末资产减值损失可以税前扣除吗
  • 收购股权如何做分录
  • 六大类科目的借贷口诀余额怎么填
  • 怎样申请开发票
  • 平台使用费属于什么服务
  • 农业银行多级账簿可以代发工资吗
  • 息税前利润变动百分比计算公式
  • 企业经营规模小怎么办
  • mysql外键怎么写
  • mysql优化sql有哪些
  • window如何恢复系统
  • win7系统步骤
  • ,linux
  • window怎么样
  • win10系统局域网共享打印机设置
  • xp电脑开机自检怎么取消
  • win7旗舰版怎么改成专业版
  • win7系统自带网卡吗?
  • win10重启更新的时候强制关机后会发生啥
  • win7系统IE浏览器怎么去掉360导航
  • docker 开源项目
  • nodejs实战教程
  • Linux 中的time函数
  • javascript的理解
  • 微山湖到底属于哪里
  • 小规模印花税2023减半吗
  • 股权转让是否要交土地增值税
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设