大家好，欢迎来到IT知识分享网。
文章目录
前言
最近新入手一个项目，其中一个需求是需要对接海康威视监控的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>//取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 = 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() }, ) }, 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的博客-CSDN博客
uniapp + 海康威视H5player踩坑_第7个前端的博客-CSDN博客
免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://haidsoft.com/139338.html
