uniapp接入萤石云监控

对象是new出来的

2661人浏览 · 2024-05-28 11:08:23

对象是new出来的 · 2024-05-28 11:08:23 发布

可参考萤石开放平台API文档

文档概述 · 萤石开放平台API文档https://open.ys7.com/help/529

只兼容H5和App

下载ezuikit.js 存放目录static/js/ezuikit.js

链接: https://pan.baidu.com/s/1jFbGy9yhKmljKZUC2fg_LQ?pwd=vujq

一. 原生方法引入

1. 在根目录下的创建static/html/PlayerVideo.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">
		<title>-</title>

		<!-- 微信 JS-SDK 如果不需要兼容小程序，则无需引用此 JS 文件 -->
		<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
		<script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js">
		</script>
		<script src="../js/ezuikit.js"></script>
		<style>
			body{
				margin: 0px;
			}
		</style>
	</head>
	<body>
		<div id="playWind"></div>
		<script>
			var width = document.documentElement.clientWidth;
			var height = document.documentElement.clientHeight;
			// 当页面加载完成后
			window.onload = function() {
				let search = window.location.search
				if (search) {
					const urlParams = search.split('=')[1];
					const paramsObj = JSON.parse(decodeURIComponent(urlParams))
					ezopenInit(paramsObj);
				}

				// 监听message事件来接收来自uniapp App发送的消息
				// #ifdef H5
				window.addEventListener('message', function(event) {
					destroyPlayer()
				}, false);
				// #endif

				// #ifdef APP-PLUS
				window.parentMessage = function(arg) {
					destroyPlayer()
				}
				// #endif
			};

			const destroyPlayer = () => {
				if (player) {
					player.stop();
					player.destroy();
					player = null;
				}
			}

			var player = null;
			const ezopenInit = (paramsObj) => {
				if (paramsObj.play_url && paramsObj.accessToken) {
					player = new EZUIKit.EZUIKitPlayer({
						id: 'playWind',
						width: width,
						height: width * 2 / 3,
						// simple - 极简版; pcLive-pc直播；pcRec-pc回放；mobileLive-移动端直播；mobileRec-移动端回放;security - 安防版;voice-语音版;
						template: 'security',
						accessToken: paramsObj.accessToken,
						url: paramsObj.play_url,
					});
				}

				// 在引用依赖的文件后，需要在 HTML 中监听 UniAppJSBridgeReady 事件触发后，才能安全调用 uni 的 API。
				document.addEventListener('UniAppJSBridgeReady', function() {
					uni.postMessage({
						data: true
					})
				});
			}
		</script>
	</body>

</html>

</div>

2. 在页面使用web-view浏览器组件引入网页容器

<template>
	<view>
		<web-view :update-title="false" v-if="webSrc" :src="webSrc" class="web-view" style="z-index: -1;"></web-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				webSrc: "",
			};
		},
		onLoad(options) {
			this.device_id = options?.deviceid;
		},
		mounted() {
			this.getDetail();
		},
		// 离开页面销毁监控
		// 使用Hash路由 在H5离开页面触发beforeRouteLeave的函数
		beforeRouteLeave(to, from, next) {
			this.destroyPlayer()
			next()
		},
		// 离开页面销毁监控
		onUnload() {
			// #ifdef APP-PLUS
			this.destroyPlayer()
			// #endif
		},
		methods: {
			destroyPlayer() {
				// #ifdef H5
				window.frames[0].postMessage("hello!", "*")
				// #endif

				// #ifdef APP-PLUS
				// 注意格式
				const _funName = 'parentMessage',
					obj = {
						msg: 'hello!'
					}
				const currentWebview = this.$scope.$getAppWebview().children()[0]
				currentWebview.evalJS(`${_funName}(${JSON.stringify(obj)})`)
				// #endif
			},
			async getDetail() {
				let res = await this.$http('/v2/devices/getdetail', {
					deviceid: this.device_id,
				})
				if (res.code === 200) {
					if (res.data.play_url && res.data.accessToken) {
						let ezuikitInfo = {
							accessToken: res.data.accessToken,
							play_url: res.data.play_url,
						}

						let encodeEzuikitInfo = encodeURIComponent(JSON.stringify(ezuikitInfo))
						let urlPath = '/static/html/PlayerVideo.html'
						this.webSrc = `${urlPath}?params=${encodeEzuikitInfo}`
					}
				} else {
					this.toast(res.message)
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
</style>

二. 动态引入

1. 封装成组件 /components/PlayerVideo/PlayerVideo.vue

<template :vsrc="vsrc">
	<view class="preview" id="video-container" :data="ezuikitInfo" :change:data="ezuikit.getResData">
	</view>
</template>

<script>
	export default {
		data() {
			return {
				ezuikitInfo: null, //用于renderjs通信
			}
		},
		mounted() {},
		methods: {
			initEzuikit(info) {
				this.ezuikitInfo = JSON.stringify(info)
			},
			destroyEzuikit() {
				// #ifdef H5
				this.ezuikit.destroyPlayer()
				// #endif
			}
		}
	}
</script>

<script module="ezuikit" lang="renderjs">
	var player = null;
	// import * as ezuikitJs from '@/static/js/ezuikit.js'; // 不能这样引入
	export default {
		data() {
			return {
				play_url: '',
				accessToken: '',
			}
		},
		onLaod() {},
		mounted() {

		},
		methods: {
			getResData(newValue) {
				if (newValue) {
					let params = typeof(newValue) === "string" && JSON.parse(newValue)
					this.accessToken = params.accessToken
					this.play_url = params.play_url
					this.initEzuikitJs()
				}
			},
			initEzuikitJs() {
				if (typeof window.EZUIKit !== 'undefined') {
					this.initPlayer();
				} else {
					const script = document.createElement('script')
					// 可以把该ezuikit.js放在服务器 cdn引入
					script.src = 'static/js/ezuikit.js'
					script.onload = this.initPlayer.bind(this)
					document.head.appendChild(script)
				}
			},

			async initPlayer() {
				const {
					windowWidth,
					windowHeight
				} = uni.getSystemInfoSync();
				player = new EZUIKit.EZUIKitPlayer({
					id: 'video-container', // 视频容器ID
					accessToken: this.accessToken,
					url: this.play_url,
					// simple - 极简版; pcLive-pc直播；pcRec-pc回放；mobileLive-移动端直播；mobileRec-移动端回放;security - 安防版;voice-语音版;
					template: 'security',
					width: windowWidth,
					height: windowWidth * 2 / 3,
					handleSuccess: () => {
						setTimeout(function() {
							player.closeSound()
						}, 500);
					}
				});
				window.player = player;
			},

			destroyPlayer() {
				if (player) {
					player.stop();
					player.destroy();
					player = null;
				}
			}
		}
	}
</script>

<style>

</style>

2. 在页面引入组件

<template>
	<view class="">
		<PlayerVideo ref="playerVideoRef"></PlayerVideo>
	</view>
</template>

<script>
	import PlayerVideo from "@/components/PlayerVideo/PlayerVideo"
	export default {
		components: {
			PlayerVideo
		},
		data() {
			return {
				device_id: "",
			};
		},
		onLoad(options) {
			this.device_id = options?.deviceid;
		},
		mounted() {
			this.getDetail();
		},
		// 在H5离开页面销毁监控
		beforeRouteLeave(to, from, next) {
			this.$refs.playerVideoRef.destroyEzuikit()
			next()
		},
		methods: {
			async getDetail() {
				let res = await this.$http('/v2/devices/getdetail', {
					deviceid: this.device_id,
				})
				if (res.code === 200) {
					if (res.data.play_url && res.data.accessToken) {
						let ezuikitInfo = {
							accessToken: res.data.accessToken,
							play_url: res.data.play_url,
						}
						this.$refs.playerVideoRef.initEzuikit(ezuikitInfo)
					}
				} else {
					this.toast(res.message)
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
</style>

效果图