vue项目接入海康威视H5player.js 2.0版（回放示例）

概要

公司项目接入海康威视的球形监控设备，需要项目支持使用海康威视监控视频，以及视频回放等功能。项目要求无插件接入，使用户体验最佳。所以采用海康威视的h5player.js，因为接入时，海康威视的js版本已经2.0，在网上没找到其他博客，所以特此记录。

环境搭建

因为被环境问题搞了好几次，所以特别在此提醒各位同学，在开发之前一定先把环境调好（真的会被搞死的，搞得我头都大了）

首先确认自身项目所在环境（http还是https），在http环境下使用ws协议，在https环境下使用wss协议，两者有严格区分，如果乱用会出现取流失败（流链接无效不通的情况）
确认完成自身项目环境之后，请通知后台（或海康威视技术人员）更改取流协议格式，将ws改为wss协议（更改wss协议需要海康威视技术人员给打补丁）
下载h5player.js的demo包地址和跨域隔离方案地址。
按照demo代码进行项目集成

项目集成

将demo中的文件移至项目
将h5player.min.js引入index.html文件
页面引入
变量引入

注意看demo，我这里的变量很多改过，进入高级模式（普通模式播不了）
方法引入

  //  选择时间段   查看历史监控视频searchHistoryTime(){if (!!!this.beginTime||!!!this.endTime){this.$message({message: '请先选择开始时间或结束时间',type: 'warning'})return;}let t1 = new Date(this.beginTime).getTime();let t2 = new Date(this.endTime).getTime();if (t2 - t1<=0){this.$message({message: '开始时间不得大于结束时间！',type: 'warning'})return;}if (t2-t1>=259200000){this.$message({message: '时间区间不得超过3天！',type: 'warning'})return;}$get('/device/hkdevice/info/videoPlayBack',{beginTime:this.beginTime,endTime:this.endTime,cameraIndexCode:this.cameraIndexCode}).then(res=>{this.monitorHistoryUrl = res.data.data.url;this.init();this.createPlayer();this.playbackStart();})},init() {// 设置播放容器的宽高并监听窗口大小变化window.addEventListener('resize', () => {this.player.JS_Resize()})},createPlayer() {let szBasePath = '';//因为项目配置在二级域名，所以文件需改变路径if (process.env.NODE_ENV == "production") {szBasePath = '/bzsv/js/'}else{szBasePath = '/js/'}this.player = new window.JSPlugin({szId: 'player',szBasePath: szBasePath,iMaxSplit: 4,iCurrentSplit: 1,openDebug: true,oStyle: {borderSelect: IS_MOVE_DEVICE ? '#000' : '#FFCC00',}})// 事件回调绑定this.player.JS_SetWindowControlCallback({windowEventSelect: function (iWndIndex) {  //插件选中窗口回调console.log('windowSelect callback: ', iWndIndex);},pluginErrorHandler: function (iWndIndex, iErrorCode, oError) {  //插件错误回调console.log('pluginError callback: ', iWndIndex, iErrorCode, oError);},windowEventOver: function (iWndIndex) {  //鼠标移过回调//console.log(iWndIndex);},windowEventOut: function (iWndIndex) {  //鼠标移出回调//console.log(iWndIndex);},windowEventUp: function (iWndIndex) {  //鼠标mouseup事件回调//console.log(iWndIndex);},windowFullCcreenChange: function (bFull) {  //全屏切换回调console.log('fullScreen callback: ', bFull);},firstFrameDisplay: function (iWndIndex, iWidth, iHeight) {  //首帧显示回调console.log('firstFrame loaded callback: ', iWndIndex, iWidth, iHeight);},performanceLack: function () {  //性能不足回调console.log('performanceLack callback: ');}});},/* 回放 */playbackStart() {let { player, mode, playback } = this,index = player.currentWindowIndex,playURL = this.monitorHistoryUrl,{ startTime, endTime } = playbackstartTime = this.beginTime.slice(0,19);endTime = this.endTime.slice(0,19);startTime += 'Z'endTime += 'Z'console.log('111111111111111')console.log(playURL, mode, index, startTime, endTime)player.JS_Play(playURL, { playURL, mode }, index, startTime, endTime).then(() => {console.log('playbackStart success')this.playback.rate = 1},e => { console.error(e) })},

问题及解决方案

1，打完wss补丁之后

2，出现<丢失现象

解决方案为：
只要console里面出现Uncaught SyntaxError: Unexpected token ‘<‘ 就是new JSPlugin的szBasePath不对导致的
确认h5player.min.js的整个bin目录是否都在，且未改变目录结构，并保证静态引入 h5player.min.js 的路径和 szBasePath 的路径一致，如下图：
注意：无论“静态引入”、“动态加载” 还是“szBasePath”，都是运行环境路径，而不是项目开发结构路径

vue项目接入海康威视H5player.js 2.0版（回放示例）相关推荐

Vue项目接入海康威视智能应用平台监控摄像头全过程分享
最近项目需要对接天目慧眼系统(基于海康威视智能应用平台),获取几个监控点的摄像头并展示在前端,这里用到的api就两个:/api/resource/v1/cameras分页获取监控点资源./api/vi ...
vue项目接入腾讯im
vue项目接入腾讯im 查看文档先安装SDK依赖在项目脚本里引入模块添加监听事件用户登录发送消息查看文档首先贴上文档地址 https://cloud.tencent.com/docume ...
Vue项目中利用pdf.js实现pdf内容滑选文字展示与搜索功能
Vue项目中利用pdf.js实现pdf内容滑选文字展示与搜索功能需求:在pdf中鼠标滑动选中一段文字,将选中文字展示到input框中(pdf在iframe中) 完成效果: 关于pdf的引用:我是直接 ...
vue 项目中使用three.js实现vr360度全景图片预览
vue 项目中使用three.js实现vr360度全景图片预览当前demo使用的three.js为0.115.0版本项目中安装three npm install three 安装完成再组件如下导入 ...
Vue.js 2.0版
Vue.js 2.0版升级,更改了好多方法或指令 new Vue({el:'#demo',data:{msg:"vue2.0"} }) v-model lazy number de ...
VUE项目学习（三）：win10版nginx部署vue项目
VUE项目学习(三):win10版nginx部署vue项目 niginx的安装和启停操作参照博客:https://blog.csdn.net/qq_26666947/article/details/1 ...
前端Vue项目调用页面web3.js:连接metaMask钱包,(查询钱包ETH余额,查询代币余额,ETH转账,代币转账,代币授权,查询授权数量,计算价格)等功能
这里分享下相关文档 1.web3.js中文文档 https://learnblockchain.cn/docs/web3.js/getting-started.html 2.metamask官方文档: ...
vue项目中使用flv.js实时播放断流重连关闭断流开发心得
第一次碰这个东西肯定会碰壁的,问百度人都问傻了(关键还骗人),其中心酸不必多描述,只为成长后来项目更新采用的是EasyPlayer插件文章地址: VUE项目中优雅使用EasyPlayer 后端是流 ...
vue项目如何减少app.js和vender.js的体积
配置webpack中externals来减少打包后vendor.js的体积在日常的项目开发中,我们会用到各种第三方库来提高效率,但随之带来的问题就是打包后的vendor.js体积过大,导致加载时空白 ...

vue项目接入海康威视H5player.js 2.0版（回放示例）

概要

环境搭建

项目集成

问题及解决方案

vue项目接入海康威视H5player.js 2.0版（回放示例）相关推荐

最新文章

热门文章