Home Explore Help
Register Sign In
yf_lj
/
bigDataApp
1
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

3/8

lj 4 years ago
parent
d52132d4a1
commit
cea408c556
2 changed files with 133 additions and 67 deletions
Unified View Show Diff Stats
  1. 133 67
      static/h5.html
  2. BIN
      static/image/monitor/1.png

+ 133 - 67
static/h5.html
View File 

@@ -15,95 +15,161 @@
 
 				background-color: #f3f3f3;
 
 				background-color: #f3f3f3;
 
 			}
 
 			}
 
 
 
-			iframe {
 
+			/* iframe {
 
 				width: 375px;
 
 				width: 375px;
 
 				height: 667px;
 
 				height: 667px;
 
 				background-color: #fff;
 
 				background-color: #fff;
 
 				box-sizing: content-box;
 
 				box-sizing: content-box;
 
 				border: none;
 
 				border: none;
 
+			} */
 
+			.btn-box {
 
+				margin-top: 20px;
 
+				display: flex;
 
+				flex-direction: row;
 
+				justify-content: space-around;
 
+				align-items: center;
 
 			}
 
 			}
 
 
 
-			@media screen and (min-width: 450px) {
 
-				iframe {
 
-					position: fixed;
 
-					top: 0;
 
-					right: 0;
 
-					bottom: 0;
 
-					left: 0;
 
-					margin: auto;
 
-					border: rgba(0, 0, 0, 0.7) solid 10px;
 
-					border-radius: 4px;
 
-				}
 
+			.more,
 
+			.less {
 
+				flex: 1
 
 			}
 
 			}
 
+
 
+			img {
 
+				width: 100%;
 
+			}
 
+
 
+			.direc {
 
+				width: 150px;
 
+				height: 150px;
 
+				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
 
+			}
 
+		
 		</style>
 
 		</style>
 
 		<script type="text/javascript" src="./js/ezuikit.js"></script>
 
 		<script type="text/javascript" src="./js/ezuikit.js"></script>
 
-		<script type="text/javascript">
 
-			window.onload = function() {
 
-				/* 监听电脑浏览器窗口尺寸改变 */
 
-				//                window.onresize = function(){
 
-				//                    /* 窗口宽度 小于或等于420px 时，跳转回H5页面 */
 
-				//                    if(window.innerWidth <= 420){
 
-				//                        // window.location.pathname = '/uniapp-extend';
 
-
 
-				//                    /* 若你的项目未设置根目录（默认为 / 时），则使用下方代码 */
 
-				//                    // window.location.pathname = '';
 
-				//                    }
 
-				//     
-			
-				var obj=JSON.parse(localStorage.getItem('obj'))
 
-				console.log(obj)
 
-				var accessToken=obj.accessToken 
-				var device_id=obj.device_id
 
-				// let name = window.parent.document.getElementsByTagName("iframe")[0].baseURI; //需要iframe的ID
 
-			
-				// console.log(name)
 
-				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: 600,
 
-						height: 400,
 
-					});
 
-					player.play();
 
-				}, 500)
 
-			}
 
-		</script>
 
+
 
 	</head>
 
 	</head>
 
 	<body>
 
 	<body>
 
-		<!-- <iframe src="/uniapp-extend"></iframe> -->
 
 		<div id="myPlayer"></div>
 
 		<div id="myPlayer"></div>
 
 		<div class="btn-box">
 
 		<div class="btn-box">
 
-			<div class="more" @touchstart="configCamera('move', 8)" @touchend="stopConfigCamera()">
 
-				<!-- <image src="" :src="moreSrc" mode="widthFix"></image> -->
 
+			<div class="more" ontouchstart="configCamera('move', 8)" ontouchend="stopConfigCamera()">
 
+				<image src="./image/monitor/3.png" mode="widthFix"></image>
 
 			</div>
 
 			</div>
 
 			<div class="direc">
 
 			<div class="direc">
 
-				<div class="top"  @touchstart="configCamera('move', 0)" @touchend="stopConfigCamera()">
 
-		
-				</div>
 
-				<div class="bottom"  @touchstart="configCamera('move', 1)" @touchend="stopConfigCamera()">
 
-		
+				<div class="top" ontouchstart="configCamera('move', 0)" ontouchend="stopConfigCamera()">
 
+
 
 				</div>
 
 				</div>
 
-				<div class="photo"  @touchstart="configCamera('takephoto', '')" >
 
-		
+				<div class="bottom" ontouchstart="configCamera('move', 1)" ontouchend="stopConfigCamera()">
 
+
 
 				</div>
 
 				</div>
 
-				<div class="left"  @touchstart="configCamera('move', 2)" @touchend="stopConfigCamera()">
 
-		
+				<!-- <div class="photo" ontouchstart="configCamera('takephoto', '')">
 
+
 
+				</div> -->
 
+				<div class="left" ontouchstart="configCamera('move', 2)" ontouchend="stopConfigCamera()">
 
+
 
 				</div>
 
 				</div>
 
-				<div class="right"  @touchstart="configCamera('move', 6)" @touchend="stopConfigCamera()">
 
-		
+				<div class="right" ontouchstart="configCamera('move', 6)" ontouchend="stopConfigCamera()">
 
+
 
 				</div>
 
 				</div>
 
 			</div>
 
 			</div>
 
-			<div class="less" @touchstart="configCamera('move', 9)" @touchend="stopConfigCamera()">
 
-				<image :src="lessSrc" mode="widthFix"></image>
 
+			<div class="less" ontouchstart="configCamera('move', 9)" ontouchend="stopConfigCamera()">
 
+				<image src="./image/monitor/2.png" mode="widthFix"></image>
 
 			</div>
 
 			</div>
 
 		</div>
 
 		</div>
 
-		<!--
 
-            若你的项目未设置根目录（默认为 / 时），则使用下方代码
 
-            <iframe src="/"></iframe>
 
-        -->
 
+		
 	</body>
 
 	</body>
 
+	<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
 
+	<script type="text/javascript">
 
+		var obj = JSON.parse(localStorage.getItem('obj'))
 
+		var accessToken = obj.accessToken
 
+		var device_id = obj.device_id
 
+		//上下左右和拍照
 
+		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() {
 
+			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: 600,
 
+					height: 400,
 
+				});
 
+				player.play();
 
+			}, 500)
 
+		})
 
+	</script>
 
 </html>
 
 </html>

BIN
static/image/monitor/1.png
View File