一、对于海康视频流的取法,我前两篇文章有过解释,那么现在轮到 uni.app了,所以不墨迹,有现成的咱就直接用现成的
1.上这下载人家海康封装好的sdk 海康开放平台 专门来播放H5的
2.下载完成,解压缩后,在demo文件夹下,要使用 node 来运行 http.js或者https.js文件
然后在浏览器中输入本机的9000端口,打开demo.html文件,于是可看到下图,进行测试
3.将sdk加入到自己uni.app项目中来
将sdk的bin目录下除了那个没啥样的.txt文件,最好是全都复制到自己项目的static目录下
4.然后在h5player.min.js同级目录下新建个html文件,这里注意,新建的html文件必须!必须!必须!放在 static目录下,要不然访问不到!!
5.使用uni.app的 web-view组件去访问刚刚建的html文件,如下代码,自行修改参数
<template>
<view>
<web-view v-if="video_url" :src="URL"></web-view>
</view>
</template>
<script>
import {
config_lz
} from '../../components/config.js'
export default {
data() {
return {
video_url: '',
indexCode: '',
time_slot: '',
URL: '../../static/H5player_sdk/webplayer.html?video_url='
}
},
onLoad(option) {
this.indexCode = option.indexCode ? option.indexCode : ''
this.time_slot = option.time_slot ? option.time_slot : ''
var postTime = option.time_slot ? JSON.parse(option.time_slot) : ''
uni.showLoading({
title: '加载中'
})
if (this.time_slot) {
uni.request({ //回放取流
url: config_lz.VIDEO_URL + '/artemis/api/video/v2/cameras/playbackURLs',
method: "POST",
sslVerify: false,
header: {
'Content-Type': 'application/json',
'Accept': '*/*',
'x-ca-key': APPKEY,
"x-ca-signature": PLAYBACK_STREAM_SIGNATURE,
'x-ca-signature-headers': 'x-ca-key',
},
data: {
cameraIndexCode: this.indexCode,
protocol: 'ws',
beginTime: postTime[0],
endTime: postTime[1],
recordLocation: 1
},
success: (res) => {
uni.hideLoading()
const {
data: {
url
},
code
} = res.data;
if (!url) {
uni.showToast({
icon: 'none',
title: "取流失败,该时间段没有录像回放"
})
setTimeout(() => {
uni.navigateBack({
delta: 1
})
}, 2000)
} else {
this.video_url = url
this.URL += url.substring(0, url.indexOf("?"));
this.URL += `&time_slot=${this.time_slot}`
}
},
fail: (res) => {
uni.hideLoading()
uni.showToast({
title: '请求超时,请重试!',
duration: 2000,
icon: "none"
});
}
})
} else {
uni.request({ //预览取流
url: config_lz.VIDEO_URL + '/artemis/api/video/v2/cameras/previewURLs',
method: "POST",
sslVerify: false,
header: {
'Content-Type': 'application/json',
'Accept': '*/*',
'x-ca-key': APPKEY,
"x-ca-signature": PREVIEW_STREAM_SIGNATURE,
'x-ca-signature-headers': 'x-ca-key',
},
data: {
cameraIndexCode: this.indexCode,
protocol: 'ws'
},
success: (res) => {
uni.hideLoading()
const {
data: {
url
},
code
} = res.data;
this.video_url = url
this.URL += code == '0' ? url : ''
},
fail: (res) => {
uni.hideLoading()
uni.showToast({
title: '请求超时,请重试!',
duration: 2000,
icon: "none"
});
}
})
}
},
}
</script>
<style>
</style>
html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript" src="//js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.0.1.52.js"></script>
<script src="../../static/H5player_sdk/h5player.min.js"></script>
<title>监控(预览/回放)</title>
</head>
<style type="text/css">
html,
body {
margin: auto;
overflow: hidden;
-webkit-user-select: none;
user-select: none;
}
.myplayer {
width: 100%;
height: 100vh;
}
</style>
<body>
<div id="play_window" class="myplayer"></div>
</body>
<script type="text/javascript">
// 初始化插件
var myPlugin = new JSPlugin({
szId: 'play_window', //需要英文字母开头 必填
szBasePath: './', // 必填,引用H5player.min.js的js相对路径
iCurrentSplit: 1,
openDebug: true,
oStyle: {
borderSelect: '#FFCC00',
}
})
//取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 playURL = GetQueryString('video_url')
var playback_time = GetQueryString('time_slot')
// 再次取值
var formatTime = playback_time ? JSON.parse(playback_time) : ''
let startTime = formatTime[0] ? formatTime[0] : void 0
let endTime = formatTime[1] ? formatTime[1] : void 0
// 有视频流地址以后,才进行播放
if (playURL) {
// 视频预览/回放
myPlugin.JS_Play(playURL, {
playURL,
mode: 1
}, 0, startTime,
endTime).then(() => {
// 开启声音
myPlugin.JS_OpenSound().then(
() => {
console.info('JS_OpenSound success');
// do you want...
},
(err) => {
console.info('JS_OpenSound failed', err);
// do you want...
}
);
}, (err) => {
console.info('JS_Play failed:', err);
alert('取流失败,请检查网络环境以及监控点状态')
});
}
</script>
</html>
注意点!!!
1. szBasePath: './', // 必填,必须引用H5player.min.js的js相对路径,要不然播放不了
var myPlugin = new JSPlugin({
szId: 'play_window', //需要英文字母开头 必填
szBasePath: './', // 必填,引用H5player.min.js的js相对路径
iCurrentSplit: 1,
openDebug: true,
oStyle: {
borderSelect: '#FFCC00',
}
})
2.这个URL整体不可以太长,如果太长,会使我们那个html文件成为一个文本,也就是说你看到的不是一个页面,而是你写在编译器里的代码
<web-view v-if="video_url" :src="URL"></web-view>
3. 回放的时间格式
给大家避个坑,这种格式会使你输入的时间与它转换完的时间有差别,举例:你选择的是"2023-01-26 12:36:33" 但是你用这种格式的话,他就会输出2023-01-26T04:36:33Z,字面上看就是会比你选择的时间少8个小时,那是因为在JavaScript中,日期对象的toJSON()方法会将日期对象转换为ISO 860 1格式的字符串。这个字符串的末尾的"Z"表示的是UTC时间(协调世界时)。在转换过程中,会将日期对象 的时间调整为UTC时间
(<uni-datetime-picker 组件 return-type=“date”时有这个问题)
但是人家文档明确要这个时间,那只能自己转了,代码附上
formatTime(time) {
// 首先需要判断时间是否为空,如果为空则返回null
if (time == null || time == '') {
return null;
}
// 将时间字符串转换为Date对象
let date = new Date(time);
// 获取当前时区与UTC时间的时间差(以分钟为单位)
let timezoneOffset = date.getTimezoneOffset();
// 将时间差转换为毫秒数
let offsetMilliseconds = (timezoneOffset * 60 * 1000);
// 调整时间,使其符合UTC时间
date.setTime(date.getTime() - offsetMilliseconds);
// 将调整后的时间转换为ISO 8601格式
return date.toISOString();
}
后期想起来在补充
ok 功能效果就不展示啦,代码直接看吧,因为已经下班了,不懂随时留言