uni-app引入海康威视h5player实现视频监控的播放
uni-app引入海康威视h5player实现视频监控的播放
- 知识储备
- 工具下载
- webplayer.html
- h5player.vue
- 视频时效
- 传递参数为中文
- webview 返回上一页
- 在H5环境中使用window.postMessage通信,webview向uni-app应用发送消息
- uni-app中不使用webview、直接在.vue中播放视频
知识储备
- uni-app web-view组件相关知识:点击学习。
- 海康威视相关工具下载:点击跳转下载。
- web-view组件不全屏显示:uni-app web-view 如果设置不全屏 不自动铺满。
工具下载
首先下载海康威视h5player的demo
在uni-app项目中static文件夹下创建文件目录,我命名为h5player
将demo中bin文件夹下的文件原封不动复制到h5player文件夹中,txt文件可以删除
h5player根目录下新建webplayer.html文件
引入h5player.min.js
<script src="./h5player.min.js"></script>
webplayer.html
在webplayer.html文件中,新增样式,宽高根据自己的需求调整
<style type="text/css">html,body {/* width: 100%; *//* height: 100%; */margin: auto;overflow: hidden;background-color: #000;-webkit-user-select: none;user-select: none;}.myplayer {width: 100%;height: 2.21rem;}
</style>
在页面创建dom元素
<div id="play_window" class="myplayer"></div>
获取url中参数的方法
//取url中的参数值
function GetQueryString(name) {var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");var r = window.location.search.substr(1).match(reg);if (r != null) return unescape(r[2]);return null;
}
初始化插件
// 初始化插件
var myPlugin = new JSPlugin({szId: 'play_window', //需要英文字母开头 必填szBasePath: './', // 必填,引用H5player.min.js的js相对路径
})
获取视频播放流以后,开始播放,播放成功后抓图本地存储
// 获取视频播放流
var playURL = GetQueryString("cameraUrl")
// 有视频流地址以后,才进行播放
if(playURL){// 窗口下标var curIndex = 0;// 获取监控点唯一标识,方便作为抓图存储的keyvar cameraIndexCode = GetQueryString("cameraIndexCode")// 视频预览myPlugin.JS_Play(playURL, {playURL,mode: 1}, curIndex).then(() => {console.info('JS_Play success 播放成功');// do you want...// 抓图var fileName = 'img';var fileType = 'JPEG';//不进行下载,数据回调myPlugin.JS_CapturePicture(curIndex, fileName, fileType,imageData => {console.info('JS_CapturePicture success 抓图成功'); //2.1.0开始全是base64,之前的版本存在blob或者是base64// do you want...plus.storage.setItem(cameraIndexCode,imageData);})}, (err) => {console.info('JS_Play failed:', err);// do you want...});
}
h5player.vue
在uni-app应用内,pages页面中需要用到视频播放的页面,创建web-view组件
web-view组件的src需要动态改变,所以存储在data数据里
因为web-view组件默认就是占据整个视口的高宽,所以我们需要设置web-view的宽高,调整位置
// 设置web-view的宽高,调整位置
setHeight(){var height = 350; //定义动态的高度变量,如高度为定值,可以直接写var currentWebview = this.$scope.$getAppWebview(); //获取当前web-viewsetTimeout(function() {var wv = currentWebview.children()[0];wv.setStyle({ //设置web-view距离顶部的距离以及自己的高度,单位为pxtop:300 , //此处是距离顶部的高度,应该是你页面的头部height: height , //webview的高度scalable: false, //webview的页面是否可以缩放,双指放大缩小,})}, 500); //如页面初始化调用需要写延迟
},
获取视频流地址,在 web-view 中只需要通过 URL 就可以向 H5 进行传参,通过url将数据传入webplayer.html就可以播放监控视频了
// 获取视频流
previewURLs(){this.$api.previewURLs(this.cameraIndexCode,res=>{this.cameraUrl = res.data.url;console.log("previewURLs",this.cameraUrl);this.webURL="../../../static/h5player/webplayer.html?cameraIndexCode="+this.cameraIndexCode+"&cameraUrl="+this.cameraUrl});
},
这就是在uni-app应用内嵌入h5页面,如果我们还要在uni-app应用页面中,添加其他组件模块,记得避开h5页面,web-view组件的层级是最高的。
视频时效
获取的视频播放地址如果是有时效的,还要开启一个定时器,定时刷新获取url
// 视频流地址失效后,重新刷新获取地址
onReady() {// 定时获取视频播放流this.timer = setInterval(() => {this.previewURLs();}, 100000)
},
onHide() {// 关闭负荷趋势定时器if(this.timer) { clearInterval(this.timer); this.timer = null; }
},
这种处理方式不太合适,可以配置为没有时效的链接
传递参数为中文
传入web-view的数据如果是中文,需要进行编码然后传入,否则会出现乱码
//这里对要传入到webview中的参数进行encodeURIComponent编码否则中文乱码
this.url+=encodeURIComponent(data.data)
webview 返回上一页
webview 返回上一页的时候,改变传入的参数就要重新打开一个页面,返回的时候就要多次返回。可以先关闭webview然后跳转页面,具体参考:https://blog.csdn.net/z14322/article/details/125702942。
在H5环境中使用window.postMessage通信,webview向uni-app应用发送消息
应用端uni-app代码:
onLoad: function() {window.addEventListener('message', function(e) { // 监听 message 事件console.log(e.origin);console.log("从" + e.origin + "收到消息: " + e.data);});
}
网页webview代码:
//向uniapp发送信息
function sendMsgToUniapp(value) {parent.postMessage(value, "*");
}
更多内容可以参考:https://blog.csdn.net/liu2004051957/article/details/126886897。
uni-app中不使用webview、直接在.vue中播放视频
createPlayerIns() {this.playerIns = new window.JSPlugin({szId: 'play_window', //需要英文字母开头 必填szBasePath: '/static/h5player/',iMaxSplit: 1,iCurrentSplit: 1,bSupporDoubleClickFull:false,openDebug:true,oStyle: {border: "#f00",borderSelect: "#FFCC00",background: "#000"}})
},
playVideo() {let playURL = this.cameraUrl;alert(playURL)this.playerIns.JS_Play(playURL, {playURL,mode: 1}, 0).then(() => {alert("成功播放视频")}, (err) => {alert('视频播放失败:' + playURL + JSON.stringify(err));});
},
新增的文件仍然放在static中
在index.html中引入h5player.min.js
uni-app引入海康威视h5player实现视频监控的播放相关推荐
- QT开发小计:五、引入海康威视SDK开发视频监控系统环境搭建步骤及代码示例
1.新建项目: 标题 2.修改项目配置文件 .pro 增加内容: 3.导入头文件(*.h) 项目目录,新建文件夹 [include],从海康SDK把头文件拷出来 4.导入静态链接库文件(*.lib) ...
- 使用手机摄像头实现视频监控实时播放
使用手机摄像头实现视频监控实时播放 一.概述 视频监控实时播放的原理与目前较为流行的直播是一致的,所以采用直播的架构实现视频监控实时播放,流程图如下: #mermaid-svg-mUiqq5ywjTx ...
- vue项目接入视频监控系列-------播放器的选择
在智慧城市发展迅速的今天,视频监控接入web平台的需求似乎成了不可或缺和潮流.博主准备对自己开发视频监控项目的经历做个记录,整理成一个系列的文章. 在前端发展迅速的今天,h5的出现让在web平台实现无 ...
- 视频监控实时接入——以海康威视为例(2023.2.16)
海康威视实时视频监控接入学习 2023.2.16 引言 1.视频协议简介 1.1 RTSP--Real Time Streaming Protocol(实时流传输协议) 1.2 RTMP--Real ...
- 在app和h5页面中播放视频监控
本文章向大家介绍app和h5播放实时视频监控. 我是把我们公司的小程序做成app但是在播放视频监控这一块出现了问题,app和h5页面不支持live-player(小程序原生标签)后台报错组件注册失败, ...
- 视频监控成AI芯片主战场,海康威视和大华股份占据半壁江山
来源:MEMS 概要:图像和视频的人工智能处理,是目前AI芯片商业化前景最乐观的赛道,也是玩家们弯道超车的最佳机会. 图像和视频的人工智能处理,是目前AI芯片商业化前景最乐观的赛道,也是玩家们弯道超 ...
- 海康威视视频监控的实现
首先商家会给我们api 大家一定要认真看不然真的不明白呜呜呜 api里面双击下载这些功能 注意:这些appKey的是根据密钥来的 必须认真看文档拿到这个token就是下面这个形式生成的 搞了好久终于 ...
- 2018 年视频监控企业竞争力分析 海康威视连续七年蝉联全球第一
视频监控是安防行业的核心 近年来,随着我国政府对平安城市." 雪亮工程 " 以及金融和交通运输等领域的重视,对于安防产品的需求不断提升,安防市场规模也在随之不断扩大.视频监控是整个 ...
- uniApp 实现微信小程序和app视频播放flv格式视频监控
测试要在真机测试,微信开发者工具不能测试 video 支持 App平台: 支持本地视频(mp4/flv).网络视频地址(mp4/flv/m3u8)及流媒体(rtmp/hls/rtsp). 小程序: l ...
最新文章
- mysql怎么实现事务序列化_MySQL 架构 - 事务处理
- CSS之box-shadow
- junit 验证日志输出_JUnit规则–引发异常时执行附加验证
- golang开发效率神器汇总
- python当输入0时结束_python输入-1时结束-女性时尚流行美容健康娱乐mv-ida网
- Elasticsearch Java Low Level REST Client(读取响应)
- WCF在多个服务中使用事物
- 计划策略(planning strategy)
- Manjaro使用教程
- City2vec:一种学习人口迁徙网络知识的新方法
- Matlab读取图像数据并写入TXT
- 废旧手机改造成好玩的天气暗示相框
- Android通过百度api地址经纬度获取文字位置信息
- 域名过户操作流程及常见问题
- ftp服务器wu-ftpd配置详解
- 赢在云端:VMware跨云架构,让“云”卷“云”舒自由可控!——访VMware公司大中华区高级技术总监李刚
- load forecasting(一)
- ppt图片设计素材下载网站搭建模板
- bro流量分析(改名zeek)ips
- 祝贺绝影签售,另声援
热门文章
- FPGA基础之内置逻辑门
- JavaWeb学习记录 JspSmartUpload应用
- CodeGear RAD Studio 2009 RTM V12.0.3170.16989 绿化完全版
- 计算机汇编语言教程pdf,计算机汇编语言入门.pdf
- Dell G3 搭建深度学习环境(Ubuntu16.04)
- lua(3)-string字符串math数学库
- java实现生成印章
- S32K144之时钟
- 统信UOS桌面操作系统专业版安装(版本号:V20.1043)
- 不比不知道,主流商业云计算解决方案大比拼!