ホーム エクスプローラ ヘルプ
登録 サインイン
tangdehang
/
android-cloud-H5
Watch 1
Star 0
Fork 0
ファイル 課題 0 プルリクエスト 0 Wiki
ソースを参照

alter

huangxiaojing 4 年 前
親
e8ddf32b8b
コミット
ffd31502bd
共有5 個のファイルを変更した、762 個の追加 と 686 個の削除を含む
分割表示 差分情報を表示
  1. 41 3
      screenAndroid/WXtrialInterface.html
  2. 337 339
      screenAndroid/css/WXtrialInterface.css
  3. 16 2
      screenIos/WXtrialInterface.html
  4. 338 339
      screenIos/css/WXtrialInterface.css
  5. 30 3
      screenIos/websocket.js

+ 41 - 3
screenAndroid/WXtrialInterface.html
ファイルの表示 

@@ -32,6 +32,8 @@
 
 	<!-- windows phone 点击无高? -->
 
 	<meta name="msapplication-tap-highlight" content="no">
 
 	<link rel="stylesheet" type="text/css" href="css/WXtrialInterface.css" />
 
+	<link rel="stylesheet" href="https://cdn.bootcss.com/weui/1.1.3/style/weui.min.css">
 
+	<link rel="stylesheet" href="https://cdn.bootcss.com/jquery-weui/1.2.1/css/jquery-weui.min.css">
 
 </head>
 
 
 <body class="scroll h-player" style="overscroll-behavior: contain;">
 
@@ -101,6 +103,12 @@
 
 			<div class="sboxText">下载地址已复制到剪切板</div>
 
 			<div class="sboxbu">确定</div>
 
 		</div>
 
+		<div class="loading"></div>
 
+	</div>
 
+	<div class="weui-mask_transparent"></div>
 
+	<div class="weui-toast weui_loading_toast weui-toast--visible">
 
+		<div class="weui_loading"><i class="weui-loading weui-icon_toast"></i></div>
 
+		<p class="weui-toast_content">数据加载中</p>
 
 	</div>
 
 
 	<body oncontextmenu="Back()">
 
@@ -116,6 +124,8 @@
 
 	<script type="text/javascript" src="https://cdn.bootcss.com/vConsole/3.2.0/vconsole.min.js"></script>
 
 	<script type="text/javascript" src="WXdraw.js?v=110"></script>
 
 	<script type="text/javascript" src="jmuxer.js"></script>
 
+	<script src="https://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
 
+	<script src="https://cdn.bootcss.com/jquery-weui/1.2.1/js/jquery-weui.min.js"></script>
 
 	<script>
 
 		document.addEventListener('touchstart', function () {
 
 			var video = document.getElementById("playerVideo");
 
@@ -128,6 +138,10 @@
 
 			"height": window.screen.height - topwinHeight - 20,
 
 			"position": "absolute"
 
 		});
 
+		$('.loading').css({
 
+			"width": window.screen.width,
 
+			"height": window.screen.height - topwinHeight - 20
 
+		});
 
 		var winese = document.createElement("wine");
 
 		wine.style.top = "-" + winese + 'px';
 
 
@@ -199,8 +213,18 @@
 
 			ws.binaryType = 'arraybuffer';
 
 
 			ws.onclose = function (e) {
 
-				alert("websocket连接断开，准备重连");
 
-				doConnect();
 
+				$.confirm({
 
+					title: '提示',
 
+					text: '连接断开，是否准备重连？',
 
+					onOK: function () {
 
+						doConnect();
 
+					},
 
+					onCancel: function () {
 
+						wx.miniProgram.switchTab({
 
+							url: '/pages/home/home'
 
+						})
 
+					}
 
+				});
 
 			}
 
 
 			ws.addEventListener('open', function (event) {
 
@@ -208,7 +232,18 @@
 
 			});
 
 
 			ws.addEventListener('error', function (event) {
 
-				console.log("连接失败");
 
+				$.confirm({
 
+					title: '提示',
 
+					text: '连接失败，是否准备重连？',
 
+					onOK: function () {
 
+						doConnect();
 
+					},
 
+					onCancel: function () {
 
+						wx.miniProgram.switchTab({
 
+							url: '/pages/home/home'
 
+						})
 
+					}
 
+				});
 
 			});
 
 
 			ws.addEventListener('message', function (event) {
 
@@ -225,6 +260,9 @@
 
 				if (data.video != null) { //喂视频
 
 					if (isFeed) {
 
 						jmuxer.feed(data);
 
+						$('.weui-mask_transparent').hide()
 
+						$('.weui-toast').hide()
 
+						$('.loading').hide()
 
 					}
 
 				}
 
 			});

+ 337 - 339
screenAndroid/css/WXtrialInterface.css
ファイルの表示 

@@ -1,340 +1,338 @@
 
 body {
 
-				font-size: .2592592593rem;
 
-				margin: 0 auto;
 
-				width: 100%;
 
-				min-width: 320px;
 
-			}
 
-			
-			.h-player {
 
-				height: 100%;
 
-				overflow: hidden;
 
-				background: #000;
 
-			}
 
-			
-			.container {
 
-				width: 100%;
 
-				height: 100%;
 
-				position: relative;
 
-				user-select: none;
 
-			}
 
-			
-			#video1 {
 
-				display: block;
 
-				width: 100%;
 
-				height: 100%;
 
-				top: 0px;
 
-				left: 0px;
 
-				opacity: 1;
 
-			}
 
-			
-			#box {
 
-				width: 100%;
 
-				height: 100%;
 
-				position: absolute;
 
-				left: 0;
 
-				top: 0;
 
-				z-index: 9999;
 
-				/*width: 667px;
 
-    height: 375px; http://192.168.31.8:8848/cloudmMobilePhone1.11/Player/trialInterface2.html
 
-    position: absolute;
 
-    left: -146px;
 
-    top: 146px;
 
-   background: red;*/
 
-				/*    transform: rotate(-90deg);*/
 
-				/* opacity: 0.3;*/
 
-			}
 
-			
-			.scroll {
 
-				position: absolute;
 
-				/* overflow: scroll; */
 
-				-webkit-overflow-scrolling: touch;
 
-				top: 0;
 
-				left: 0;
 
-				bottom: 0;
 
-				right: 0;
 
-			}
 
-			
-			body:before {
 
-				width: 100%;
 
-				height: 100%;
 
-				content: ' ';
 
-				position: fixed;
 
-				z-index: -1;
 
-				top: 0;
 
-				left: 0;
 
-				background: #000;
 
-			}
 
-			
-			#wine {
 
-				user-select: none;
 
-				-webkit-user-drag: none;
 
-				position: absolute;
 
-				z-index: 0;
 
-				/*  visibility: hidden;*/
 
-			}
 
-			
-			#video1 {
 
-				/*	 transform: rotate(180deg);*/
 
-			}
 
-			
-			canvas {
 
-				display: block;
 
-				width: 100%;
 
-				height: 100%;
 
-				z-index: 999;
 
-			}
 
-			/*主屏*/
 
-			
-			.control {
 
-				width: 900px;
 
-				overflow: hidden;
 
-				margin: 0 auto;
 
-				margin-top: 90px;
 
-				margin-bottom: 17px;
 
-			}
 
-			
-			.control-left-img {
 
-				width: 26px;
 
-				height: 26px;
 
-			}
 
-			
-			.control-left-img img {
 
-				width: 100%;
 
-				height: 100%;
 
-			}
 
-			
-			#mainScreen-main {
 
-				/* overflow: hidden; */
 
-				user-select: none;
 
-				-webkit-user-drag: none;
 
-				position: relative;
 
-				z-index: 0;
 
-				width: 100%;
 
-				height: 100%;
 
-				top: 0px;
 
-				/* left: 652.667px; */
 
-				/* left: 270PX; */
 
-				/* transform-origin: 0% 0%; */
 
-				background: #000;
 
-			}
 
-			
-			#mocan {
 
-				position: absolute;
 
-				left: -269px;
 
-				top: 2px;
 
-				/* opacity: 0.2; */
 
-				width: 901px;
 
-				height: 555px;
 
-				z-index: 9999;
 
-				opacity: 0.7;
 
-			}
 
-			
-			#no-ne {
 
-				width: 100%;
 
-				height: 100%;
 
-				position: absolute;
 
-				top: 0;
 
-				background: #000000;
 
-				z-index: 99999;
 
-				font-size: 18px;
 
-				color: #FFFFFF;
 
-				text-align: center;
 
-			}
 
-			
-			.no-ne-text {
 
-				margin-top: 60%;
 
-			}
 
-			
-			.no-ne-an {
 
-				width: 171px;
 
-				height: 47px;
 
-				background: #eb6100;
 
-				line-height: 47px;
 
-				text-align: center;
 
-				color: #FFFFFF;
 
-				margin: 0 auto;
 
-				margin-top: 20px;
 
-			}
 
-			
-			.container .muted {
 
-				position: absolute;
 
-				right: .46296rem;
 
-				top: .46296rem;
 
-				z-index: 9999999;
 
-				/*background: #000;*/
 
-				border-radius: 50%;
 
-				   /* opacity: 0.5;*/
 
-			}
 
-			
-			.muted {
 
-				width: 2.62963rem;
 
-				height: 2.62963rem;
 
-				background-position: -1.78704rem -8.43519rem;
 
-			}
 
-			
-			html {
 
-				height: 100%
 
-			}
 
-			
-			.control-right-img {
 
-				width: 42px;
 
-				height: 42px;
 
-				margin: 0 auto;
 
-				/* margin: 1rem; */
 
-				margin-top: 0.6rem;
 
-			}
 
-			
-			.control-right-img img {
 
-				width: 100%;
 
-				height: 100%;
 
-			}
 
-			
-			.leftmains {
 
-				width: 3.5rem;
 
-				height: 100%;
 
-				background: #333333;
 
-				position: fixed;
 
-				right: 0rem;
 
-				top: 0;
 
-					
-transition: all 0.2s ease-in;
 
-			}
 
-			
-			.PictureQualityMain {
 
-				margin-top: 3rem;
 
-			}
 
-			
-			.PictureQuality {
 
-				margin: 0 auto;
 
-				width: 2.5rem;
 
-				height: 1.8rem;
 
-				line-height: 1.8rem;
 
-				color: #fff;
 
-				text-align: center;
 
-				font-size: 15px;
 
-				margin-top: 1rem;
 
-			}
 
-			
-			.avit {
 
-				background: rgba(255, 255, 255, 1);
 
-				color: #000 !important;
 
-				border-radius: 3px;
 
-			}
 
-			
-			.upload {
 
-				margin: 0 auto;
 
-				width: 3rem;
 
-				height: 1.8rem;
 
-				line-height: 1.8rem;
 
-				color: #fff;
 
-				text-align: center;
 
-				font-size: 16px;
 
-				margin-top: 3rem;
 
-			}
 
-			
-			.upload img {
 
-				width: 1.5rem;
 
-				height: 1.5rem;
 
-			}
 
-			
-			.upload div {
 
-				margin-top: -0.5rem;
 
-				font-size: 14px;
 
-			}
 
-			
-			.operation {
 
-				margin-top: 9rem;
 
-			}
 
-			
-			.bottommains {
 
-				width: 100%;
 
-				height: 50px;
 
-				background: #333333;
 
-				position: fixed;
 
-				left: 0;
 
-				bottom: 0;
 
-			}
 
-			
-			.botmat1 {
 
-				width: 33%;
 
-				float: left;
 
-			}
 
-			
-			.botmat1img {
 
-				margin: 0 auto;
 
-				width: 1.5rem;
 
-				height: 1.5rem;
 
-				margin-top: 0.5rem;
 
-			}
 
-			
-			.botmat1img img {
 
-				width: 100%;
 
-				height: 100%;
 
-			}
 
-			
-			.mainbox {
 
-				width: 18rem;
 
-				height: 10rem;
 
-				background: #fff;
 
-				position: fixed;
 
-				top: 38%;
 
-				left: 5%;
 
-				border-radius: 5px;
 
-			}
 
-			
-			.boxTitle {
 
-				text-align: center;
 
-				font-size: 18px;
 
-				padding: 10px 0px;
 
-			}
 
-			
-			.boxText {
 
-				text-align: center;
 
-				font-size: 16px;
 
-			}
 
-			
-			.boxbt {
 
-				width: 60%;
 
-				height: 2.5rem;
 
-				background: #0886F5;
 
-				margin: 0 auto;
 
-				font-size: 16px;
 
-				text-align: center;
 
-				line-height: 2.5rem;
 
-				color: #fff;
 
-				border-radius: 5px;
 
-				margin-top: 1rem;
 
-			}
 
-			
-			.sbox {
 
-				width: 18rem;
 
-				height: 5.5rem;
 
-				background: #fff;
 
-				position: fixed;
 
-				top: 38%;
 
-				left: 5%;
 
-				border-radius: 5px;
 
-			}
 
-			
-			.sboxText {
 
-				padding: 17px;
 
-				font-size: 16px;
 
-			}
 
-			
-			.sboxbu {
 
-				text-align: right;
 
-				color: #0886F5;
 
-				font-size: 16px;
 
-				margin-right: 2rem;
 
-			}
 
-			
-			.boximg {
 
-				position: absolute;
 
-				width: 1rem;
 
-				height: 1rem;
 
-				left: 45%;
 
-				bottom: -22%;
 
-			}
 
-			#showsuss{
 
-				display: none;
 
-			}
 
+	font-size: .2592592593rem;
 
+	margin: 0 auto;
 
+	width: 100%;
 
+	min-width: 320px;
 
+}
 
+
 
+.h-player {
 
+	height: 100%;
 
+	overflow: hidden;
 
+	background: #000;
 
+}
 
+
 
+.container {
 
+	width: 100%;
 
+	height: 100%;
 
+	position: relative;
 
+	user-select: none;
 
+}
 
+
 
+#video1 {
 
+	display: block;
 
+	width: 100%;
 
+	height: 100%;
 
+	top: 0px;
 
+	left: 0px;
 
+	opacity: 1;
 
+}
 
+
 
+#box {
 
+	width: 100%;
 
+	height: 100%;
 
+	position: absolute;
 
+	left: 0;
 
+	top: 0;
 
+	z-index: 9999;
 
+}
 
+
 
+.scroll {
 
+	position: absolute;
 
+	-webkit-overflow-scrolling: touch;
 
+	top: 0;
 
+	left: 0;
 
+	bottom: 0;
 
+	right: 0;
 
+}
 
+
 
+body:before {
 
+	width: 100%;
 
+	height: 100%;
 
+	content: ' ';
 
+	position: fixed;
 
+	z-index: -1;
 
+	top: 0;
 
+	left: 0;
 
+	background: #000;
 
+}
 
+
 
+#wine {
 
+	user-select: none;
 
+	-webkit-user-drag: none;
 
+	position: absolute;
 
+	z-index: 0;
 
+}
 
+
 
+
 
+canvas {
 
+	display: block;
 
+	width: 100%;
 
+	height: 100%;
 
+	z-index: 999;
 
+}
 
+
 
+/*主屏*/
 
+.control {
 
+	width: 900px;
 
+	overflow: hidden;
 
+	margin: 0 auto;
 
+	margin-top: 90px;
 
+	margin-bottom: 17px;
 
+}
 
+
 
+.control-left-img {
 
+	width: 26px;
 
+	height: 26px;
 
+}
 
+
 
+.control-left-img img {
 
+	width: 100%;
 
+	height: 100%;
 
+}
 
+
 
+#mainScreen-main {
 
+	/* overflow: hidden; */
 
+	user-select: none;
 
+	-webkit-user-drag: none;
 
+	position: relative;
 
+	z-index: 0;
 
+	width: 100%;
 
+	height: 100%;
 
+	top: 0px;
 
+	background: #000;
 
+}
 
+
 
+#mocan {
 
+	position: absolute;
 
+	left: -269px;
 
+	top: 2px;
 
+	/* opacity: 0.2; */
 
+	width: 901px;
 
+	height: 555px;
 
+	z-index: 9999;
 
+	opacity: 0.7;
 
+}
 
+
 
+#no-ne {
 
+	width: 100%;
 
+	height: 100%;
 
+	position: absolute;
 
+	top: 0;
 
+	background: #000000;
 
+	z-index: 99999;
 
+	font-size: 18px;
 
+	color: #FFFFFF;
 
+	text-align: center;
 
+}
 
+
 
+.no-ne-text {
 
+	margin-top: 60%;
 
+}
 
+
 
+.no-ne-an {
 
+	width: 171px;
 
+	height: 47px;
 
+	background: #eb6100;
 
+	line-height: 47px;
 
+	text-align: center;
 
+	color: #FFFFFF;
 
+	margin: 0 auto;
 
+	margin-top: 20px;
 
+}
 
+
 
+.container .muted {
 
+	position: absolute;
 
+	right: .46296rem;
 
+	top: .46296rem;
 
+	z-index: 9999999;
 
+	/*background: #000;*/
 
+	border-radius: 50%;
 
+	/* opacity: 0.5;*/
 
+}
 
+
 
+.muted {
 
+	width: 2.62963rem;
 
+	height: 2.62963rem;
 
+	background-position: -1.78704rem -8.43519rem;
 
+}
 
+
 
+html {
 
+	height: 100%
 
+}
 
+
 
+.control-right-img {
 
+	width: 42px;
 
+	height: 42px;
 
+	margin: 0 auto;
 
+	/* margin: 1rem; */
 
+	margin-top: 0.6rem;
 
+}
 
+
 
+.control-right-img img {
 
+	width: 100%;
 
+	height: 100%;
 
+}
 
+
 
+.leftmains {
 
+	width: 3.5rem;
 
+	height: 100%;
 
+	background: #333333;
 
+	position: fixed;
 
+	z-index: 2;
 
+	right: 0rem;
 
+	top: 0;
 
+	transition: all 0.2s ease-in;
 
+}
 
+
 
+.PictureQualityMain {
 
+	margin-top: 3rem;
 
+}
 
+
 
+.PictureQuality {
 
+	margin: 0 auto;
 
+	width: 2.5rem;
 
+	height: 1.8rem;
 
+	line-height: 1.8rem;
 
+	color: #fff;
 
+	text-align: center;
 
+	font-size: 15px;
 
+	margin-top: 1rem;
 
+}
 
+
 
+.avit {
 
+	background: rgba(255, 255, 255, 1);
 
+	color: #000 !important;
 
+	border-radius: 3px;
 
+}
 
+
 
+.upload {
 
+	margin: 0 auto;
 
+	width: 3rem;
 
+	height: 1.8rem;
 
+	line-height: 1.8rem;
 
+	color: #fff;
 
+	text-align: center;
 
+	font-size: 16px;
 
+	margin-top: 3rem;
 
+}
 
+
 
+.upload img {
 
+	width: 1.5rem;
 
+	height: 1.5rem;
 
+}
 
+
 
+.upload div {
 
+	margin-top: -0.5rem;
 
+	font-size: 14px;
 
+}
 
+
 
+.operation {
 
+	margin-top: 9rem;
 
+}
 
+
 
+.bottommains {
 
+	width: 100%;
 
+	height: 50px;
 
+	background: #333333;
 
+	position: fixed;
 
+	left: 0;
 
+	bottom: 0;
 
+	z-index: 3;
 
+}
 
+
 
+.botmat1 {
 
+	width: 33%;
 
+	float: left;
 
+}
 
+
 
+.botmat1img {
 
+	margin: 0 auto;
 
+	width: 1.5rem;
 
+	height: 1.5rem;
 
+	margin-top: 0.5rem;
 
+}
 
+
 
+.botmat1img img {
 
+	width: 100%;
 
+	height: 100%;
 
+}
 
+
 
+.mainbox {
 
+	width: 18rem;
 
+	height: 10rem;
 
+	background: #fff;
 
+	position: fixed;
 
+	top: 38%;
 
+	left: 5%;
 
+	border-radius: 5px;
 
+}
 
+
 
+.boxTitle {
 
+	text-align: center;
 
+	font-size: 18px;
 
+	padding: 10px 0px;
 
+}
 
+
 
+.boxText {
 
+	text-align: center;
 
+	font-size: 16px;
 
+}
 
+
 
+.boxbt {
 
+	width: 60%;
 
+	height: 2.5rem;
 
+	background: #0886F5;
 
+	margin: 0 auto;
 
+	font-size: 16px;
 
+	text-align: center;
 
+	line-height: 2.5rem;
 
+	color: #fff;
 
+	border-radius: 5px;
 
+	margin-top: 1rem;
 
+}
 
+
 
+.sbox {
 
+	width: 18rem;
 
+	height: 5.5rem;
 
+	background: #fff;
 
+	position: fixed;
 
+	top: 38%;
 
+	left: 5%;
 
+	border-radius: 5px;
 
+}
 
+
 
+.sboxText {
 
+	padding: 17px;
 
+	font-size: 16px;
 
+}
 
+
 
+.sboxbu {
 
+	text-align: right;
 
+	color: #0886F5;
 
+	font-size: 16px;
 
+	margin-right: 2rem;
 
+}
 
+
 
+.boximg {
 
+	position: absolute;
 
+	width: 1rem;
 
+	height: 1rem;
 
+	left: 45%;
 
+	bottom: -22%;
 
+}
 
+
 
+#showsuss {
 
+	display: none;
 
+}
 
+
 
+.loading {
 
+	position: fixed;
 
+	z-index: 1;
 
+	left: 0;
 
+	top: 0;
 
+	display: flex;
 
+	align-items: center;
 
+	justify-content: center;
 
+	background: url(../img/homebg.jpg) no-repeat;
 
+	background-size: 100% 100%;
 
+}

+ 16 - 2
screenIos/WXtrialInterface.html
ファイルの表示 

@@ -33,6 +33,8 @@
 
 	<!-- windows phone 点击无高��? -->
 
 	<meta name="msapplication-tap-highlight" content="no">
 
 	<link rel="stylesheet" type="text/css" href="css/WXtrialInterface.css" />
 
+	<link rel="stylesheet" href="https://cdn.bootcss.com/weui/1.1.3/style/weui.min.css">
 
+	<link rel="stylesheet" href="https://cdn.bootcss.com/jquery-weui/1.2.1/css/jquery-weui.min.css">
 
 </head>
 
 
 <body class="scroll h-player" style="overscroll-behavior: contain;">
 
@@ -99,6 +101,12 @@
 
 			<div class="sboxText">下载地址已复制到剪切板</div>
 
 			<div class="sboxbu">确定</div>
 
 		</div>
 
+		<div class="loading"></div>
 
+	</div>
 
+	<div class="weui-mask_transparent"></div>
 
+	<div class="weui-toast weui_loading_toast weui-toast--visible">
 
+		<div class="weui_loading"><i class="weui-loading weui-icon_toast"></i></div>
 
+		<p class="weui-toast_content">数据加载中</p>
 
 	</div>
 
 	<div id="copy-txt" style="position: absolute;opacity: 0;">
 
 		<span id="user_ref_id">www.androidsCloud.com</span>
 
@@ -111,6 +119,8 @@
 
 	<script type="text/javascript" src="webgl.js"></script>
 
 	<script type="text/javascript" src="https://cdn.bootcss.com/vConsole/3.2.0/vconsole.min.js"></script>
 
 	<script type="text/javascript" src="WXdraw.js?id=105"></script>
 
+	<script src="https://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
 
+	<script src="https://cdn.bootcss.com/jquery-weui/1.2.1/js/jquery-weui.min.js"></script>
 
 
 	<script>
 
 		var topwinHeight = window.screen.height - window.innerHeight + 30; //计算title top 头部
 
@@ -119,6 +129,10 @@
 
 			"height": window.screen.height - topwinHeight - 20,
 
 			"position": "absolute"
 
 		})
 
+		$('.loading').css({
 
+			"width": window.screen.width,
 
+			"height": window.screen.height - topwinHeight - 20
 
+		});
 
 		var winese = document.createElement("wine");
 
 		wine.style.top = "-" + winese + 'px';
 
 
@@ -141,8 +155,8 @@
 
 			}
 
 		})
 
 		var parameters = GetRequest();
 
-		form.clientType = parameters('clientType')
 
-		form.diskName = parameters('clientType')
 
+		form.clientType = parameters['clientType'];
 
+		form.diskName = parameters['clientType'];
 
 
 		if (form.clientType == 1) {
 
 			form.cardIp = parameters['cardIp'];

+ 338 - 339
screenIos/css/WXtrialInterface.css
ファイルの表示 

@@ -1,340 +1,339 @@
 
 body {
 
-				font-size: .2592592593rem;
 
-				margin: 0 auto;
 
-				width: 100%;
 
-				min-width: 320px;
 
-			}
 
-			
-			.h-player {
 
-				height: 100%;
 
-				overflow: hidden;
 
-				background: #000;
 
-			}
 
-			
-			.container {
 
-				width: 100%;
 
-				height: 100%;
 
-				position: relative;
 
-				user-select: none;
 
-			}
 
-			
-			#video1 {
 
-				display: block;
 
-				width: 100%;
 
-				height: 100%;
 
-				top: 0px;
 
-				left: 0px;
 
-				opacity: 1;
 
-			}
 
-			
-			#box {
 
-				width: 100%;
 
-				height: 100%;
 
-				position: absolute;
 
-				left: 0;
 
-				top: 0;
 
-				z-index: 9999;
 
-				/*width: 667px;
 
-    height: 375px; http://192.168.31.8:8848/cloudmMobilePhone1.11/Player/trialInterface2.html
 
-    position: absolute;
 
-    left: -146px;
 
-    top: 146px;
 
-   background: red;*/
 
-				/*    transform: rotate(-90deg);*/
 
-				/* opacity: 0.3;*/
 
-			}
 
-			
-			.scroll {
 
-				position: absolute;
 
-				overflow: scroll;
 
-				-webkit-overflow-scrolling: touch;
 
-				top: 0;
 
-				left: 0;
 
-				bottom: 0;
 
-				right: 0;
 
-			}
 
-			
-			body:before {
 
-				width: 100%;
 
-				height: 100%;
 
-				content: ' ';
 
-				position: fixed;
 
-				z-index: -1;
 
-				top: 0;
 
-				left: 0;
 
-				background: #000;
 
-			}
 
-			
-			#wine {
 
-				user-select: none;
 
-				-webkit-user-drag: none;
 
-				position: absolute;
 
-				z-index: 0;
 
-				/*  visibility: hidden;*/
 
-			}
 
-			
-			#video1 {
 
-				/*	 transform: rotate(180deg);*/
 
-			}
 
-			
-			canvas {
 
-				display: block;
 
-				width: 100%;
 
-				height: 100%;
 
-				z-index: 999;
 
-			}
 
-			/*主屏*/
 
-			
-			.control {
 
-				width: 900px;
 
-				overflow: hidden;
 
-				margin: 0 auto;
 
-				margin-top: 90px;
 
-				margin-bottom: 17px;
 
-			}
 
-			
-			.control-left-img {
 
-				width: 26px;
 
-				height: 26px;
 
-			}
 
-			
-			.control-left-img img {
 
-				width: 100%;
 
-				height: 100%;
 
-			}
 
-			
-			#mainScreen-main {
 
-				/* overflow: hidden; */
 
-				user-select: none;
 
-				-webkit-user-drag: none;
 
-				position: relative;
 
-				z-index: 0;
 
-				width: 100%;
 
-				height: 100%;
 
-				top: 0px;
 
-				/* left: 652.667px; */
 
-				/* left: 270PX; */
 
-				/* transform-origin: 0% 0%; */
 
-				background: #000;
 
-			}
 
-			
-			#mocan {
 
-				position: absolute;
 
-				left: -269px;
 
-				top: 2px;
 
-				/* opacity: 0.2; */
 
-				width: 901px;
 
-				height: 555px;
 
-				z-index: 9999;
 
-				opacity: 0.7;
 
-			}
 
-			
-			#no-ne {
 
-				width: 100%;
 
-				height: 100%;
 
-				position: absolute;
 
-				top: 0;
 
-				background: #000000;
 
-				z-index: 99999;
 
-				font-size: 18px;
 
-				color: #FFFFFF;
 
-				text-align: center;
 
-			}
 
-			
-			.no-ne-text {
 
-				margin-top: 60%;
 
-			}
 
-			
-			.no-ne-an {
 
-				width: 171px;
 
-				height: 47px;
 
-				background: #eb6100;
 
-				line-height: 47px;
 
-				text-align: center;
 
-				color: #FFFFFF;
 
-				margin: 0 auto;
 
-				margin-top: 20px;
 
-			}
 
-			
-			.container .muted {
 
-				position: absolute;
 
-				right: .46296rem;
 
-				top: .46296rem;
 
-				z-index: 9999999;
 
-				/*background: #000;*/
 
-				border-radius: 50%;
 
-				   /* opacity: 0.5;*/
 
-			}
 
-			
-			.muted {
 
-				width: 2.62963rem;
 
-				height: 2.62963rem;
 
-				background-position: -1.78704rem -8.43519rem;
 
-			}
 
-			
-			html {
 
-				height: 100%
 
-			}
 
-			
-			.control-right-img {
 
-				width: 42px;
 
-				height: 42px;
 
-				margin: 0 auto;
 
-				/* margin: 1rem; */
 
-				margin-top: 0.6rem;
 
-			}
 
-			
-			.control-right-img img {
 
-				width: 100%;
 
-				height: 100%;
 
-			}
 
-			
-			.leftmains {
 
-				width: 3.5rem;
 
-				height: 100%;
 
-				background: #333333;
 
-				position: fixed;
 
-				right: 0rem;
 
-				top: 0;
 
-					
-transition: all 0.2s ease-in;
 
-			}
 
-			
-			.PictureQualityMain {
 
-				margin-top: 3rem;
 
-			}
 
-			
-			.PictureQuality {
 
-				margin: 0 auto;
 
-				width: 2.5rem;
 
-				height: 1.8rem;
 
-				line-height: 1.8rem;
 
-				color: #fff;
 
-				text-align: center;
 
-				font-size: 15px;
 
-				margin-top: 1rem;
 
-			}
 
-			
-			.avit {
 
-				background: rgba(255, 255, 255, 1);
 
-				color: #000 !important;
 
-				border-radius: 3px;
 
-			}
 
-			
-			.upload {
 
-				margin: 0 auto;
 
-				width: 3rem;
 
-				height: 1.8rem;
 
-				line-height: 1.8rem;
 
-				color: #fff;
 
-				text-align: center;
 
-				font-size: 16px;
 
-				margin-top: 3rem;
 
-			}
 
-			
-			.upload img {
 
-				width: 1.5rem;
 
-				height: 1.5rem;
 
-			}
 
-			
-			.upload div {
 
-				margin-top: -0.5rem;
 
-				font-size: 14px;
 
-			}
 
-			
-			.operation {
 
-				margin-top: 9rem;
 
-			}
 
-			
-			.bottommains {
 
-				width: 100%;
 
-				height: 50px;
 
-				background: #333333;
 
-				position: fixed;
 
-				left: 0;
 
-				bottom: 0;
 
-			}
 
-			
-			.botmat1 {
 
-				width: 33%;
 
-				float: left;
 
-			}
 
-			
-			.botmat1img {
 
-				margin: 0 auto;
 
-				width: 1.5rem;
 
-				height: 1.5rem;
 
-				margin-top: 0.5rem;
 
-			}
 
-			
-			.botmat1img img {
 
-				width: 100%;
 
-				height: 100%;
 
-			}
 
-			
-			.mainbox {
 
-				width: 18rem;
 
-				height: 10rem;
 
-				background: #fff;
 
-				position: fixed;
 
-				top: 38%;
 
-				left: 5%;
 
-				border-radius: 5px;
 
-			}
 
-			
-			.boxTitle {
 
-				text-align: center;
 
-				font-size: 18px;
 
-				padding: 10px 0px;
 
-			}
 
-			
-			.boxText {
 
-				text-align: center;
 
-				font-size: 16px;
 
-			}
 
-			
-			.boxbt {
 
-				width: 60%;
 
-				height: 2.5rem;
 
-				background: #0886F5;
 
-				margin: 0 auto;
 
-				font-size: 16px;
 
-				text-align: center;
 
-				line-height: 2.5rem;
 
-				color: #fff;
 
-				border-radius: 5px;
 
-				margin-top: 1rem;
 
-			}
 
-			
-			.sbox {
 
-				width: 18rem;
 
-				height: 5.5rem;
 
-				background: #fff;
 
-				position: fixed;
 
-				top: 38%;
 
-				left: 5%;
 
-				border-radius: 5px;
 
-			}
 
-			
-			.sboxText {
 
-				padding: 17px;
 
-				font-size: 16px;
 
-			}
 
-			
-			.sboxbu {
 
-				text-align: right;
 
-				color: #0886F5;
 
-				font-size: 16px;
 
-				margin-right: 2rem;
 
-			}
 
-			
-			.boximg {
 
-				position: absolute;
 
-				width: 1rem;
 
-				height: 1rem;
 
-				left: 45%;
 
-				bottom: -22%;
 
-			}
 
-			#showsuss{
 
-				display: none;
 
-			}
 
+	font-size: .2592592593rem;
 
+	margin: 0 auto;
 
+	width: 100%;
 
+	min-width: 320px;
 
+}
 
+
 
+.h-player {
 
+	height: 100%;
 
+	overflow: hidden;
 
+	background: #000;
 
+}
 
+
 
+.container {
 
+	width: 100%;
 
+	height: 100%;
 
+	position: relative;
 
+	user-select: none;
 
+}
 
+
 
+#video1 {
 
+	display: block;
 
+	width: 100%;
 
+	height: 100%;
 
+	top: 0px;
 
+	left: 0px;
 
+	opacity: 1;
 
+}
 
+
 
+#box {
 
+	width: 100%;
 
+	height: 100%;
 
+	position: absolute;
 
+	left: 0;
 
+	top: 0;
 
+	z-index: 9999;
 
+}
 
+
 
+.scroll {
 
+	position: absolute;
 
+	overflow: scroll;
 
+	-webkit-overflow-scrolling: touch;
 
+	top: 0;
 
+	left: 0;
 
+	bottom: 0;
 
+	right: 0;
 
+}
 
+
 
+body:before {
 
+	width: 100%;
 
+	height: 100%;
 
+	content: ' ';
 
+	position: fixed;
 
+	z-index: -1;
 
+	top: 0;
 
+	left: 0;
 
+	background: #000;
 
+}
 
+
 
+#wine {
 
+	user-select: none;
 
+	-webkit-user-drag: none;
 
+	position: absolute;
 
+	z-index: 0;
 
+}
 
+
 
+canvas {
 
+	display: block;
 
+	width: 100%;
 
+	height: 100%;
 
+	z-index: 999;
 
+}
 
+
 
+/*主屏*/
 
+
 
+.control {
 
+	width: 900px;
 
+	overflow: hidden;
 
+	margin: 0 auto;
 
+	margin-top: 90px;
 
+	margin-bottom: 17px;
 
+}
 
+
 
+.control-left-img {
 
+	width: 26px;
 
+	height: 26px;
 
+}
 
+
 
+.control-left-img img {
 
+	width: 100%;
 
+	height: 100%;
 
+}
 
+
 
+#mainScreen-main {
 
+	/* overflow: hidden; */
 
+	user-select: none;
 
+	-webkit-user-drag: none;
 
+	position: relative;
 
+	z-index: 0;
 
+	width: 100%;
 
+	height: 100%;
 
+	top: 0px;
 
+	/* left: 652.667px; */
 
+	/* left: 270PX; */
 
+	/* transform-origin: 0% 0%; */
 
+	background: #000;
 
+}
 
+
 
+#mocan {
 
+	position: absolute;
 
+	left: -269px;
 
+	top: 2px;
 
+	/* opacity: 0.2; */
 
+	width: 901px;
 
+	height: 555px;
 
+	z-index: 9999;
 
+	opacity: 0.7;
 
+}
 
+
 
+#no-ne {
 
+	width: 100%;
 
+	height: 100%;
 
+	position: absolute;
 
+	top: 0;
 
+	background: #000000;
 
+	z-index: 99999;
 
+	font-size: 18px;
 
+	color: #FFFFFF;
 
+	text-align: center;
 
+}
 
+
 
+.no-ne-text {
 
+	margin-top: 60%;
 
+}
 
+
 
+.no-ne-an {
 
+	width: 171px;
 
+	height: 47px;
 
+	background: #eb6100;
 
+	line-height: 47px;
 
+	text-align: center;
 
+	color: #FFFFFF;
 
+	margin: 0 auto;
 
+	margin-top: 20px;
 
+}
 
+
 
+.container .muted {
 
+	position: absolute;
 
+	right: .46296rem;
 
+	top: .46296rem;
 
+	z-index: 9999999;
 
+	border-radius: 50%;
 
+}
 
+
 
+.muted {
 
+	width: 2.62963rem;
 
+	height: 2.62963rem;
 
+	background-position: -1.78704rem -8.43519rem;
 
+}
 
+
 
+html {
 
+	height: 100%
 
+}
 
+
 
+.control-right-img {
 
+	width: 42px;
 
+	height: 42px;
 
+	margin: 0 auto;
 
+	margin-top: 0.6rem;
 
+}
 
+
 
+.control-right-img img {
 
+	width: 100%;
 
+	height: 100%;
 
+}
 
+
 
+.leftmains {
 
+	width: 3.5rem;
 
+	height: 100%;
 
+	background: #333333;
 
+	position: fixed;
 
+	right: 0rem;
 
+	top: 0;
 
+	z-index: 2;
 
+	transition: all 0.2s ease-in;
 
+}
 
+
 
+.PictureQualityMain {
 
+	margin-top: 3rem;
 
+}
 
+
 
+.PictureQuality {
 
+	margin: 0 auto;
 
+	width: 2.5rem;
 
+	height: 1.8rem;
 
+	line-height: 1.8rem;
 
+	color: #fff;
 
+	text-align: center;
 
+	font-size: 15px;
 
+	margin-top: 1rem;
 
+}
 
+
 
+.avit {
 
+	background: rgba(255, 255, 255, 1);
 
+	color: #000 !important;
 
+	border-radius: 3px;
 
+}
 
+
 
+.upload {
 
+	margin: 0 auto;
 
+	width: 3rem;
 
+	height: 1.8rem;
 
+	line-height: 1.8rem;
 
+	color: #fff;
 
+	text-align: center;
 
+	font-size: 16px;
 
+	margin-top: 3rem;
 
+}
 
+
 
+.upload img {
 
+	width: 1.5rem;
 
+	height: 1.5rem;
 
+}
 
+
 
+.upload div {
 
+	margin-top: -0.5rem;
 
+	font-size: 14px;
 
+}
 
+
 
+.operation {
 
+	margin-top: 9rem;
 
+}
 
+
 
+.bottommains {
 
+	width: 100%;
 
+	height: 50px;
 
+	background: #333333;
 
+	position: fixed;
 
+	left: 0;
 
+	bottom: 0;
 
+	z-index: 3;
 
+}
 
+
 
+.botmat1 {
 
+	width: 33%;
 
+	float: left;
 
+}
 
+
 
+.botmat1img {
 
+	margin: 0 auto;
 
+	width: 1.5rem;
 
+	height: 1.5rem;
 
+	margin-top: 0.5rem;
 
+}
 
+
 
+.botmat1img img {
 
+	width: 100%;
 
+	height: 100%;
 
+}
 
+
 
+.mainbox {
 
+	width: 18rem;
 
+	height: 10rem;
 
+	background: #fff;
 
+	position: fixed;
 
+	top: 38%;
 
+	left: 5%;
 
+	border-radius: 5px;
 
+}
 
+
 
+.boxTitle {
 
+	text-align: center;
 
+	font-size: 18px;
 
+	padding: 10px 0px;
 
+}
 
+
 
+.boxText {
 
+	text-align: center;
 
+	font-size: 16px;
 
+}
 
+
 
+.boxbt {
 
+	width: 60%;
 
+	height: 2.5rem;
 
+	background: #0886F5;
 
+	margin: 0 auto;
 
+	font-size: 16px;
 
+	text-align: center;
 
+	line-height: 2.5rem;
 
+	color: #fff;
 
+	border-radius: 5px;
 
+	margin-top: 1rem;
 
+}
 
+
 
+.sbox {
 
+	width: 18rem;
 
+	height: 5.5rem;
 
+	background: #fff;
 
+	position: fixed;
 
+	top: 38%;
 
+	left: 5%;
 
+	border-radius: 5px;
 
+}
 
+
 
+.sboxText {
 
+	padding: 17px;
 
+	font-size: 16px;
 
+}
 
+
 
+.sboxbu {
 
+	text-align: right;
 
+	color: #0886F5;
 
+	font-size: 16px;
 
+	margin-right: 2rem;
 
+}
 
+
 
+.boximg {
 
+	position: absolute;
 
+	width: 1rem;
 
+	height: 1rem;
 
+	left: 45%;
 
+	bottom: -22%;
 
+}
 
+
 
+#showsuss {
 
+	display: none;
 
+}
 
+
 
+.loading {
 
+	position: fixed;
 
+	z-index: 1;
 
+	left: 0;
 
+	top: 0;
 
+	display: flex;
 
+	align-items: center;
 
+	justify-content: center;
 
+	background: url(../img/homebg.jpg) no-repeat;
 
+	background-size: 100% 100%;
 
+}

+ 30 - 3
screenIos/websocket.js
ファイルの表示 

@@ -10,10 +10,35 @@ function doConnect() {
 
 	ws.binaryType = 'arraybuffer';
 
 
 	ws.onclose = function (e) {
 
-		alert("websocket连接断开，准备重连");
 
-		doConnect();
 
+		$.confirm({
 
+			title: '提示',
 
+			text: '连接断开，是否准备重连？',
 
+			onOK: function () {
 
+				doConnect();
 
+			},
 
+			onCancel: function () {
 
+				wx.miniProgram.switchTab({
 
+					url: '/pages/home/home'
 
+				})
 
+			}
 
+		});
 
 	}
 
 
+	ws.addEventListener('error', function (event) {
 
+		$.confirm({
 
+			title: '提示',
 
+			text: '连接失败，是否准备重连？',
 
+			onOK: function () {
 
+				doConnect();
 
+			},
 
+			onCancel: function () {
 
+				wx.miniProgram.switchTab({
 
+					url: '/pages/home/home'
 
+				})
 
+			}
 
+		});
 
+	});
 
+
 
 	ws.addEventListener('open', function (event) {
 
 		ws.send(ConfigChannel("RK3923C1201900139"));
 
 		var buffer = RequestIFrame();
 
@@ -25,7 +50,9 @@ function doConnect() {
 
 	}, false);
 
 	ws.addEventListener('message', function (event) {
 
 		var input = new Uint8Array(event.data);
 
-
 
+		$('.weui-mask_transparent').hide()
 
+		$('.weui-toast').hide()
 
+		$('.loading').hide()
 
 		if (input[0] == 0xff) {
 
 			self.postMessage(input);
 
 		} else {