lj 4 년 전
부모
커밋
cea408c556
2개의 변경된 파일133개의 추가작업 그리고 67개의 파일을 삭제
  1. 133 67
      static/h5.html
  2. BIN
      static/image/monitor/1.png

+ 133 - 67
static/h5.html

@@ -15,95 +15,161 @@
 				background-color: #f3f3f3;
 			}
 
-			iframe {
+			/* 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;
 			}
 
-			@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>
 		<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>
 	<body>
-		<!-- <iframe src="/uniapp-extend"></iframe> -->
 		<div id="myPlayer"></div>
 		<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 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 class="photo"  @touchstart="configCamera('takephoto', '')" >
-		
+				<div class="bottom" ontouchstart="configCamera('move', 1)" ontouchend="stopConfigCamera()">
+
 				</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 class="right"  @touchstart="configCamera('move', 6)" @touchend="stopConfigCamera()">
-		
+				<div class="right" ontouchstart="configCamera('move', 6)" ontouchend="stopConfigCamera()">
+
 				</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>
-		<!--
-            若你的项目未设置根目录(默认为 / 时),则使用下方代码
-            <iframe src="/"></iframe>
-        -->
+		
 	</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>

BIN
static/image/monitor/1.png