yf_lj
/
bigDataApp


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199
							<!DOCTYPE html>
<html lang=zh-CN>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="divport" content="width=device-width,user-scalable=no,initial-scale=1,maximum-scale=1,minimum-scale=1">
		<title>监控详情页</title>
		<meta name="Copyright" content="helang">
		<link rel="shortcut icon" type="image/png" href="/uniapp-extend/static/logo.png">
		<meta name="keywords" content="黄河爱浪,WEB前端河浪,jQuery插件开发者河浪">
		<meta name="description" content="公众号:web-7258,QQ:1846492969,邮箱:helang.love@qq.com">
		<style type="text/css">
			body {
				margin: 0;
				background-color: #f3f3f3;
			}

			/* iframe {
				width: 375px;
				height: 667px;
				background-color: #fff;
				box-sizing: content-box;
				border: none;
			} */
			.btn-box {
				margin-top: 20px;
				display: flex;
				flex-direction: row;
				justify-content: space-around;
				align-items: center;
			}

			.more,
			.less {
				flex: 1
			}

			img {
				width: 100%;
			}

			.direc {
				width: 400px;
				height:400px;
				background: url('./image/monitor/1.png');
				background-size: 100% auto;
				background-repeat: no-repeat;
				position: relative;
			}

			.direc div {
				width: 50px;
				height: 50px;
				position: absolute;
			}

			.top {
				top: 0;
				left: 50px
			}

			.bottom {
				bottom: 0;
				left: 50px
			}

			.left {
				left: 0;
				top: 50px
			}

			.right {
				right: 0;
				top: 50px
			}

			#box {
				height: 800px;
				width: 100%;
				background: #000;
			}
		</style>
		<script type="text/javascript" src="./js/ezuikit.js"></script>

	</head>
	<body>
		<div id="box">
			<div id="myPlayer"></div>
		</div>
		<div class="btn-box">
			<div class="more" ontouchstart="configCamera('move', 8)" ontouchend="stopConfigCamera()">
				<image src="./image/monitor/3.png" mode="widthFix"></image>
			</div>
			<div class="direc">
				<div class="top" ontouchstart="configCamera('move', 0)" ontouchend="stopConfigCamera()">

				</div>
				<div class="bottom" ontouchstart="configCamera('move', 1)" ontouchend="stopConfigCamera()">

				</div>
				<!-- <div class="photo" ontouchstart="configCamera('takephoto', '')">

				</div> -->
				<div class="left" ontouchstart="configCamera('move', 2)" ontouchend="stopConfigCamera()">

				</div>
				<div class="right" ontouchstart="configCamera('move', 6)" ontouchend="stopConfigCamera()">

				</div>
			</div>
			<div class="less" ontouchstart="configCamera('move', 9)" ontouchend="stopConfigCamera()">
				<image src="./image/monitor/2.png" mode="widthFix"></image>
			</div>
		</div>
	</body>
	<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
	<!-- uni 的 SDK -->
	<script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script>
	<script type="text/javascript">
		//上下左右和拍照
		function configCamera(ctrl, movenum) {
			if (ctrl == "takephoto") {
				$.ajax({
					type: "POST",
					url: "http://182.92.193.64:8002/api/api_gateway?method=camera.camera_manage.camera_takephoto",
					data: {
						device_id: device_id,
					}
				}).then((res) => {

					if (res.data.data) {
						var data = JSON.parse(res.data.data);
						var picUrl = data.data.picUrl;
					} else {
						console.log(res.data.message)
					}
				});
			} else {
				//上下左右、放大、缩小
				$.ajax({
					type: "POST",
					url: "http://182.92.193.64:8002/api/api_gateway?method=camera.camera_manage.ctrl_camera",
					data: {
						device_id: device_id,
						ctrl: ctrl,
						movenum: movenum,
					}
				}).then((res) => {

				})
			}
		}
		function stopConfigCamera() {
			$.ajax({
				type: "POST",
				url: "http://182.92.193.64:8002/api/api_gateway?method=camera.camera_manage.ctrl_camera",
				data: {
					device_id: device_id,
					ctrl: "stop",
				},
			});
		}
		$(function() {
			// var width = $('.direc').width()
			// $('.direc').height(width)
			var str = window.location.search.substr(1)
			var arr = str.split('&')
			var device_id = arr[0].split('=')[1]
			var accessToken = arr[1].split('=')[1]
			console.log(device_id)
			console.log(accessToken)
			setTimeout(() => {
				var url = "ezopen://open.ys7.com/" + device_id + "/1.hd.live"
				var player = new EZUIKit.EZUIPlayer({
					id: 'myPlayer',
					url: url,
					autoplay: true,
					accessToken: accessToken,
					decoderPath: 'js',
					width: 1000,
					height: 800,
				});
				player.play();
			}, 1000)
		})
		document.addEventListener('UniAppJSBridgeReady', function() {
			uni.webView.getEnv(function(res) {
				console.log(res)
				console.log('当前环境：' + JSON.stringify(res));
			});
			uni.postMessage({
				data: {
					action: 'postMessage'
				}
			});
			// uni.webView.navigateTo(...)
		});
	</script>
</html>