tangdehang
/
android-cloud-H5


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538
							<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="initial-scale=1,maximum-scale=1, minimum-scale=1,user-scalable=no">
		<meta name="x5-orientation" content="portrait" />
		<meta name="screen-orientation" content="portrait" />
		<meta name="viewport" content="width=device-width, minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">

		<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<meta name="format-detection" content="telephone=no, email=no">
		<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<!-- 删除苹果默认的工具栏和菜单栏 -->
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<!-- 设置苹果工具栏颜��? -->
		<meta name="format-detection" content="telphone=no, email=no">
		<!-- 忽略页面中的数字识别为电话，忽略email识别 -->
		<!-- 启用360浏览器的极速模��?(webkit) -->
		<meta name="renderer" content="webkit">
		<!-- 避免IE使用兼容模式 -->
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑��? -->
		<meta name="HandheldFriendly" content="true">
		<!-- 微软的老式浏览��? -->
		<meta name="MobileOptimized" content="320">
		<!-- uc强制竖屏 -->
		<!-- <meta name="screen-orientation" content="portrait"> -->
		<!-- QQ强制竖屏 -->
		<!-- <meta name="x5-orientation" content="portrait"> -->
		<!-- 不能旋转，问题出在这 -->
		<!-- UC强制全屏 -->
		<meta name="full-screen" content="yes">
		<!-- QQ强制全屏 -->
		<meta name="x5-fullscreen" content="true">
		<!-- UC应用模式 -->
		<meta name="browsermode" content="application">
		<!-- QQ应用模式 -->
		<meta name="x5-page-mode" content="app">
		<!-- windows phone 点击无高��? -->
		<meta name="msapplication-tap-highlight" content="no">

		<title></title>
		<link rel="stylesheet" href="../static/css/home.css?id=102">
		<style>
			canvas {
				display: block;
				width: 100%;
				height: 100%;
				z-index: 999;
			}
			.wine{
				width: 100%;
				height: 100%;
			}
			.mainbox {
			    width: 18rem;
    height: 10rem;
    background: #fff;
    position: fixed;
    top: 38%;
    left: 12%;
    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;
			}
			
			.boximg {
				position: absolute;
				width: 1rem;
				height: 1rem;
				left: 45%;
				bottom: -22%;
			}
			.maxs{
				width: 100%;
				height: 100%;
				position: fixed;
				background:rgba(0,0,0,0.5);
               
			}
			.helps{
				    width: 35px;
    height: 30px;
    background: rgba(187,187,187,1);
    border-radius: 30px 0px 0px 30px;
    font-size: 13px;
    line-height: 30px;
    color: rgba(255,255,255,1);
    position: absolute;
    right: 0;
    bottom: 181px;
    text-align: center;
			}
			
			.helps-img{
				width: 50%;
    height: 50%;
    margin: 0 auto;
    margin-top: 0.5rem;
			}
			
			.diskName{
				margin-left: 6px;
			}
			#showsuss{
				display: none;
			}
    </style>
		<div style="width: 100%;height: 100%;">

			<div class="canvas" style="display: none;">
				<div id="wine" style="height: 90%;">
					<!--<image src="img/u760.jpg"></image>-->
				</div>
				<div class="camvas-head">
					<div class="vip">
						<img class="vipimg" src="../static/img/vip_icon.png"></img>
						<text class="diskName"></text>

					</div>
					<div class="canvastime"></div>
				</div>
			</div>
			<!-- 没登录状态 -->
			<div class="canvasfalse" style="display: none;">
				<div class="notLoggedin">
					<image src="../static/img/tianjiashouji_pic.png"></image>
				</div>

				<!--    审核-->
				<div id="showsuss">
					<div class="notLoggedin-text">
						<div>下载云手机</div>
						<div>体验更多功能</div>
					</div>

					<div class="notLoggedin-bt">
						立即下载
					</div>
				</div>

			</div>

			<!--<div class="addto">
        <img class="addto-img" src="../static/img/tianjia_icon.png"></img>
    </div>-->

			<div class="help">使用帮助?</div>
			<div class="helps" data-id="1">
				<img class="helps-img" src="../static/img/bangzu_icon.png">
			</div>

			<div class="maxs" style="display: none;">
				<div class="mainbox" style="display: none;">
					<div class="boxTitle">提示</div>
					<div class="boxText">
						<div>由于小程序的功能限制，此功能暂时</div>
						<div>无法使用，请下载APP使用更多功能</div>

					</div>
					<!--<div class="boxbt" onclick="cp(document.getElementById('user_ref_id'));">立即前往下载</div>-->
					<div class="boxbt" onclick="cp(document.getElementById('user_ref_id'));">立即前往下载</div>
					<div class="boximg"><img src="../static/img/wx/guanbi_icon.png"></div>
				</div>
			</div>

		</div>

		<div id="copy-txt" style="position: absolute;opacity: 0;">
			<span id="user_ref_id">www.androidsCloud.com</span>
		</div>

		<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.0.js"></script>
		<!--  视频-->
		<script src="../static/js/jquery-1.11.0.min.js"></script>
		<script type="text/javascript" src="../static/js/Decoder.js"></script>
		<script type="text/javascript" src="../static/js/YUVCanvas.js"></script>
		<script type="text/javascript" src="../static/js/Player.js"></script>
		<script type="text/javascript">
			var url = window.location.href;

			url = url.split('/')
			console.log(url)
			// var baseUrl = 'https://' + url[2] //'http://192.168.31.159'//'http://' + url[2] 
			var baseUrl = 'http://192.168.31.20' 
			var query = window.location.search.substring(1);
			var vars = query.split("&");
			//						 var urls = "https://xcx.androidscloud.com"
			//			 审核
			$.ajax({
				url: baseUrl + "/api/user/v1/config/download/isShow",
				data: {},
				type: 'get',
				dataType: 'json',
				success: function(data) {
					if (data.data) {
						$("#showsuss").show()
					} else {
						$("#showsuss").hide()
					}
					//                       
				}
			})

			// var baseUrl = window.location.href; //"http://192.168.31.20"

			document.body.addEventListener('touchmove', function(e) {
				e.preventDefault()
			}, {
				passive: false
			})
			var data = {}

			var clientType = vars.find(e => {
				return e.startsWith('clientType')
			}) || ''
			var cardIp = vars.find(e => {
				return e.startsWith('cardIp')
			}) || ''
			var port = vars.find(e => {
				return e.startsWith('port')
			}) || ''

			var sn = vars.find(e => {
				return e.startsWith('sn')
			}) || ''
			var demoTime = vars.find(e => {
				return e.startsWith('demoTime')
			}) || ''
			var id = vars.find(e => {
				return e.startsWith('id')
			}) || ''
			var vip = vars.find(e => {
				return e.startsWith('vip')
			}) || ''
			var diskName = vars.find(e => {
				return e.startsWith('diskName')
			}) || ''
			var times = vars.find(e => {
				return e.startsWith('times')
			}) || ''
			var username = vars.find(e => {
				return e.startsWith('username')
			}) || ''
			var userCardId = vars.find(e => {
				return e.startsWith('userCardId')
			}) || ''
			var ip = vars.find(e => {
				return e.startsWith('ip')
			}) || ''
			//				$(".aaa").text(clientType.substring(11, clientType.length))
			// let cardIp = getUrlParam('cardIp');
			// console.log(cardIp)
			getQueryString: (name) => {
				let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
				let r = window.location.search.substr(1).match(reg);
				console.log(name)
				if (r != null) {
					return unescape(decodeURI(r[2]));
					return null;
				}
			}

			data.clientType = clientType.substring(11, clientType.length)

			data.cardIp = cardIp.substring(7, cardIp.length)

			data.port = port.substring(5, port.length)

			data.sn = sn.substring(3, sn.length)

			data.demoTime = demoTime.substring(9, demoTime.length)
			data.id = id.substring(3, id.length)
			data.vip = vip.substring(4, vip.length)
			data.diskName = diskName.substring(9, diskName.length)
			data.times = times.substring(6, times.length)
			data.username = username.substring(9, username.length)
			data.userCardId = userCardId.substring(11, userCardId.length)
			data.ip = ip.substring(3, ip.length)
			let timestext = "剩" + decodeURI(data.times) || data.demoTime / 3600 + "小时"
			$(".diskName").text(decodeURI(data.diskName) || data.username)
			console.log("timestext>>>>>>", timestext);
			$(".canvastime").text(timestext)


			if (data.vip == "0") {
				$(".canvasfalse").css({
					"display": "block"
				})
				$(".canvas").css({
					"display": "none"
				})
			} else {
				$(".canvas").css({
					"display": "block"
				})
				$(".canvasfalse").css({
					"display": "none"
				})
			}

			//			云手机相关逻辑	 
			var player = new Player({
				size: {
					width: 768,
					height: 1024
				}
			});

			//		document.body.appendChild(player.canvas);
			// var urlss = url[2]
			var urlss='test.androidscloud.com'
			var secanv = document.getElementById("wine");
			console.log("player",player.canvas,player);
			secanv.appendChild(player.canvas);
			// var strhost = Number(data.clientType) ===2? "wss://"+ urlss +"/shareWebSocket?clientType=2&username="+data.username+"&userCardId="+data.userCardId+"&ip="+data.ip : Number(data.clientType) ===3?"wss://"+ urlss +"/authVideoWebSocket?clientType=3&username="+data.username+"&userCardId="+data.userCardId :"wss://"+ urlss +"/videoWebSocket?clientType="+ data.clientType +"&cardIp="+data.cardIp  +"&port="+ data.port +"&sn="+data.sn;
			// var strhost = "wss://" + urlss + "/videoWebSocket?clientType=" + data.clientType + "&cardIp=" + data.cardIp +
			// 	"&port=" + data.port + "&sn=" + data.sn;
			var strhost="ws://192.168.11.66:9101";
			// var strhost="wss://test.androidscloud.com/videoWebSocket?clientType=1&cardIp=14.215.128.96&port=2005&sn=RK3930C2301900005";
			var client = new WebSocket(strhost);
             console.log('wsssss==============', client)

			client.binaryType = 'arraybuffer';
            // debugger
			client.onopen = function(evt) {
				// onOpen(evt) 
			};
			client.onclose = function(evt) {
				// onClose(evt) 
			};
			client.onmessage = function(evt) {
				onMessage(evt)
			};
			client.onerror = function(evt) {
				// onError(evt) 
			};


			function onMessage(evt) {
				// console.log("onMessage==============",evt);
				var messageData = new Uint8Array(evt.data);

				player.decode(messageData);
			}


			$("canvas").on("click", function() {
				client.close()
				// 		    	?clientType=0&cardIp=30.30.30.42&port=9100&sn=RK3930C2301900042&demoTime=3600&id=3
				setTimeout(() => {
					wx.miniProgram.navigateTo({
						url: '/pages/trialInterface/trialInterface?clientType=' + data.clientType + "&cardIp=" + data.cardIp +
							"&port=" + data.port + "&sn=" + data.sn + "&username=" + data.username + "&userCardId=" + data.userCardId +
							"&demoTime=3600&id=" + data.id + "&diskName=" + decodeURI(data.diskName)
					})
				}, 100);

			})

			$(".helps").click(function() {

				// wx.miniProgram.navigateTo({
				// 	url: '/pages/viewurl/viewurl'
				// })
				//按点击处理		
				var set = $('.helps').attr("data-id")
				if (set == '1') {
					$('.helps').attr({
						"data-id": "2"
					})

					$(".helps").hide();
					$(".help").css({
						"right": "0"
					})
				} else {
					$('.helps').attr({
						"data-id": "1"
					})
					$(".help").css({
						"right": "-4rem"
					})

				}
			});

			function stopPropagation(e) {
				if (e.stopPropagation)
					e.stopPropagation();
				else
					e.cancelBubble = true;
			}

			$(document).bind('click', function() {
				$(".help").css({
					"right": "-4rem"
				})
				$('.helps').attr({
					"data-id": "1"
				})
				$(".helps").show();
			});

			$('.help').bind('click', function(e) {
				stopPropagation(e);
				wx.miniProgram.navigateTo({
					url: '/pages/viewurl/viewurl'
				})
			});
             $('.helps').bind('click', function(e) {
             	stopPropagation(e);
             });


			// 		    
			// 		    var player = new Player({
			//				size: {
			//					width: 1280,
			//					height: 720
			//				}
			//			});
			//			var secanv = document.getElementById("wine");
			//			secanv.appendChild(player.canvas);
			// 		    var players = AV.Player.fromWebSocket("ws://" + urlss + '/videoWebSocket?' + "clientType=" + data.clientType +
			//				"&cardIp=" + data.cardIp + "&port=" + data.port + "&sn=" + data.sn);
			//              players.play();

			$(".boximg").on("click", function() {
				$(".mainbox").css({
					"display": "none"
				})
				$(".maxs").css({
					"display": "none"
				})
			})
			$(".maxs").on("click", function() {
				$(".mainbox").css({
					"display": "none"
				})
				$(".maxs").css({
					"display": "none"
				})
			})
			$(".addto").on("click", function() {
				$(".mainbox").css({
					"display": "block"
				})
				$(".maxs").css({
					"display": "block"
				})
			})

			$(".notLoggedin-bt").on("click", function() {
				//				$(".mainbox").css({
				//					"display": "block"
				//				})
				//				$(".maxs").css({
				//					"display": "block"
				//				})
			})


			function selectText(x) {
				if (document.selection) {
					var range = document.body.createTextRange();
					range.moveToElementText(x);
					range.select();
				} else if (window.getSelection) {
					var selection = window.getSelection();
					var range = document.createRange();
					selection.removeAllRanges();
					range.selectNodeContents(x);
					selection.addRange(range);
				}
			}

			function cp(x) {
				$(".mainbox").css({
					"display": "none"
				})
				$(".sbox").css({
					"display": "block"
				})
				selectText(x);
				document.execCommand("copy");
				alert("复制成功")
			}
		</script>
	</head>
	<body>

	</body>
</html>