uni.app对接海康视频播放、回放，以及注意点

最新推荐文章于 2024-05-15 15:31:18 发布

@一个答布刘

最新推荐文章于 2024-05-15 15:31:18 发布

阅读量2.5k

点赞数 10

文章标签：前端音视频 javascript vue.js

本文链接：https://blog.csdn.net/m0_67790636/article/details/135871626

版权

一、对于海康视频流的取法，我前两篇文章有过解释，那么现在轮到 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 功能效果就不展示啦，代码直接看吧，因为已经下班了，不懂随时留言

@一个答布刘

关注

10
点赞
踩
16

收藏

觉得还不错? 一键收藏
25
评论
uni.app对接海康视频播放、回放，以及注意点

给大家避个坑，这种格式会使你输入的时间与它转换完的时间有差别，举例：你选择的是"2023-01-26 12:36:33" 但是你用这种格式的话，他就会输出2023-01-26T04:36:33Z,字面上看就是会比你选择的时间少8个小时，那是因为在JavaScript中，日期对象的toJSON()方法会将日期对象转换为ISO 860 1格式的字符串。在转换过程中，会将日期对象的时间调整为UTC时间。如果太长，会使我们那个html文件成为一个文本，也就是说你看到的不是一个页面，而是你写在编译器里的代码。
复制链接

扫一扫