文章目录
前言
一、引入H5palyer
二、创建页面
三、功能开发
四、踩坑
1. 视频流链接每5分钟失效
2. uni-app 打包上传正式服务器后 web-view 引入的 html 页面无法显示
3. web-view页面无法一次关闭的问题
总结
前言
最近新入手一个项目，其中一个需求是需要对接海康威视监控的H5palyer。参考了一些文章最后决定采用web-view引入html的方式进行开发，这里记录一下开发过程中踩的坑以及解决办法。
一、引入H5palyer
下载地址：海康开放平台
进入后直接下载 H5视频播放器开发包 V2.1.2
下载解压后进入bin文件夹
在static下新建H5palyer，复制bin文件夹中所有文件到项目中。（txt文件没用可以删掉）
二、创建页面
在H5palyer中新建webpalyer.html文件
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="./h5player.min.js"></script>
<style type="text/css">
.myplayer {
width: 90vw;
height: 28vh;
border-radius: 2vh;
overflow: hidden;
/* background: #000; */
}
</style>
</head>
<body>
<div id="play_window" class="myplayer"></div>
<script>
// 这里写js业务代码
</script>
</body>
</html>uni-app项目中创建monitor-video页面，通过url向html页面传值
<template>
<view class="monitor-video">
<web-view :src="webURL"></web-view>
</view>
</template>
<script>
export default {
data() {
return {
webURL: '', // web-view要引入的页面url
cameraIndexCode: '', // 监控设备编号
}
},
onLoad() {
this.previewURLs()
},
methods: {
// 获取视频流
previewURLs() {
// 视频流需要根据监控设备编号获取 接口请求这里省略
// cameraUrl 走后台接口获取到监控的视频流
this.webURL =
'../../static/H5player/webplayer.html?cameraIndexCode=' +
this.cameraIndexCode +
'&cameraUrl=' + cameraUrl
}
}
}
</script>html页面从地址栏取值
//取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;
}三、功能开发
首先html页面需要初始化监控插件
// 初始化插件
var myPlugin = new JSPlugin({
szId: 'play_window', //需要英文字母开头 必填
szBasePath: './', // 必填,引用H5player.min.js的js相对路径
})视频播放
function play() {
// 视频流流
var playURL = GetQueryString("cameraUrl")
// 窗口下标
var curIndex = 0;
// 获取监控点唯一标识，方便作为抓图存储的key
var cameraIndexCode = GetQueryString("cameraIndexCode")
// 视频预览
myPlugin.JS_Play(playURL, {
playURL,
mode: 1 // 0 普通模式 / 1 高级模式
}, curIndex).then(() => {
console.info('JS_Play success ');
// 设置取流连接超时时间
let nTime = 300000
myPlugin.JS_SetConnectTimeOut(curIndex, nTime).then(
() => {
console.info('JS_SetConnectTimeOut success');
// do you want...
},
(err) => {
console.info('JS_SetConnectTimeOut failed', err);
// do you want...
}
);
}, (err) => {
console.info('JS_Play failed:', err);
// do you want...
});
}抓图截屏
// 截图
function onScreenshot() {
console.log('点击截屏');
// 窗口下标
var curIndex = 0;
// 获取监控点唯一标识，方便作为抓图存储的key
var cameraIndexCode = GetQueryString("cameraIndexCode")
// 文件名称
var fileName = 'img';
// 文件类型
var fileType = 'JPEG';
//下载到本地
myPlugin.JS_CapturePicture(curIndex, fileName, fileType).then(
(res) => {
console.info('JS_CapturePicture success');
// do you want...
},
(err) => {
console.info('JS_CapturePicture failed', err);
// do you want...
}
);
}其他功能不一一赘述 详情可以参考开发指南
四、踩坑
1. 视频流链接每5分钟失效
两个解决办法，第一个直接更换视频源为长久有效的视频流。
第二个在页面中加入计时器每5分钟固定获取一次视频流
onLoad() {
this.previewURLs()
// 定时获取视频播放流
this.timer = setInterval(() => {
console.log('每5分钟走一次');
this.previewURLs()
}, 300000)
},
onHide() {
// 关闭定时器
if (this.timer) {
clearInterval(this.timer)
this.timer = null
}
},2. uni-app 打包上传正式服务器后 web-view 引入的 html 页面无法显示
原因是打包后文件路径不对，这里强烈建议将H5palyer文件整个放到服务器上。
3. web-view页面无法一次关闭的问题
多次获取视频流刷新 web-view 页面时，会导致在退出页面时无法直接退出，需要点击多次。
原因是每次获取视频流向 web-view 中传值，都相当于html跳转了一个新的页面，从而导致需要多次点击才可以退出页面。
解决思路：在 web-view 上加一个 v-if ，每一次获取视频流时先关闭 web-view 标签，获取到数据后再打开。
总结
【学无止境，一点一滴的积累吧】
参考文章：
uni-app引入海康威视h5player实现视频监控的播放_海康h5player_Serena_tz的博客
uniapp + 海康威视H5player踩坑_第7个前端的博客
