Home Explore Help
Register Sign In
tangdehang
/
android-cloud-H5
Watch 1
Star 0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

新增ios和安卓板卡推流

wuyongxiang 4 years ago
parent
2a42e21229
commit
49adb5ac5c
7 changed files with 2791 additions and 408 deletions
Unified View Show Diff Stats
  1. 981 0
      screenAndroid/WXtrialInterface.html
  2. 340 0
      screenAndroid/css/WXtrialInterface.css
  3. 13 3
      screenAndroid/homeNew.html
  4. 370 403
      screenAndroid/index.html
  5. 745 0
      screenIos/WXtrialInterface.html
  6. 340 0
      screenIos/css/WXtrialInterface.css
  7. 2 2
      screenIos/websocket.js

+ 981 - 0
screenAndroid/WXtrialInterface.html
View File 

@@ -0,0 +1,981 @@
 
+<!DOCTYPE html>
 
+<html>
 
+
 
+	<head>
 
+		<meta charset="utf-8">
 
+		<title></title>
 
+		<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" type="text/css" href="css/WXtrialInterface.css" />
 
+		<script async defer src="https://buttons.github.io/buttons.js"></script>
 
+	</head>
 
+
 
+	<body class="scroll h-player" style="overscroll-behavior: contain;">
 
+
 
+		<div class="container" id="player">
 
+			<div class="muted" id="btnMuted">
 
+				<div class="control-right-img" data-id="1">
 
+					<img src="../static/img/xuanfu_icon.png">
 
+				</div>
 
+			</div>
 
+			<!-- <video width="70%" disablePictureInPicture="true" autoplay poster="images/loader-thumb.jpg" id="playerVideo"></video> -->
 
+			<div id="wine">
 
+				
+				<!-- <video id="video1" muted="muted" x5-video-orientation="landscape" playsinline="true" autoplay="true"
 
+				 webkit-playsinline="true" x5-playsinline="true" x5-video-player-type="h5" x5-video-player-fullscreen="false" style="pointer-events: none;"></video> -->
 
+				<div id="box">
 
+                       <video muted="muted" x5-video-orientation="landscape" playsinline="true" autoplay="true" webkit-playsinline="true"
 
+                        x5-playsinline="true" x5-video-player-type="h5" x5-video-player-fullscreen="false" style="pointer-events: none;object-fit: fill;width: 100%;"
 
+                        disablePictureInPicture="true" autoplay poster="images/loader-thumb.jpg" id="playerVideo"></video>
 
+					<audio preload="auto" autoplay controls poster="images/loader-thumb.jpg" id="audioPlayer"></audio>
 
+				</div>
 
+			</div>
 
+			<div class="leftmains">
 
+				<div class="PictureQualityMain">
 
+					<div class="PictureQuality " data-id="3072000">高清</div>
 
+					<div class="PictureQuality avit" data-id="2243000">标清</div>
 
+					<div class="PictureQuality" data-id="400000">极速</div>
 
+					<div class="PictureQuality" data-id="400000">自动</div>
 
+				</div>
 
+
 
+				<div class="operation">
 
+					<div class="upload" id="showsuss" data-text="uploads">
 
+						<img src="../static/img/wx/shangchuan_icon.png">
 
+						<div>上传</div>
 
+					</div>
 
+					<div class="upload" onclick="cp(document.getElementById('user_ref_id'));" data-text="Shearplate">
 
+						<img src="../static/img/wx/jianqieban_icon.png">
 
+						<div>剪切板</div>
 
+					</div>
 
+					<div class="upload" id="upload" data-text="Signout">
 
+						<img src="../static/img/wx/tuichu_icon.png">
 
+						<div>退出</div>
 
+					</div>
 
+				</div>
 
+
 
+			</div>
 
+			<div class="bottommains">
 
+				<div class="botmat1">
 
+					<div class="botmat1img" data-text="gengduo">
 
+						<img src="../static/img/wx/gengduo_icon.png">
 
+					</div>
 
+
 
+				</div>
 
+				<div class="botmat1">
 
+					<div class="botmat1img" data-text="home">
 
+						<img src="../static/img/wx/home_icon.png">
 
+					</div>
 
+
 
+				</div>
 
+				<div class="botmat1">
 
+					<div class="botmat1img" data-text="return">
 
+						<img src="../static/img/wx/fanhui_icon.png">
 
+					</div>
 
+
 
+				</div>
 
+			</div>
 
+
 
+			<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="boximg"><img src="../static/img/wx/guanbi_icon.png"></div>
 
+			</div>
 
+
 
+			<div class="sbox" style="display: none;">
 
+				<div class="sboxText">下载地址已复制到剪切板</div>
 
+				<div class="sboxbu">确定</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.2.js"></script>
 
+		<script src="../static/js/jquery-1.11.0.min.js"></script>
 
+		<script src="helper.js"></script>
 
+		<!--  音频-->
 
+		<!-- <script src="../static/js/classlist.js"></script>
 
+		<script src="../static/js/players.js"></script>
 
+		<script src="../static/js/auroraplayer.js"></script>
 
+		<script src="../static/js/aurora.js"></script>
 
+		<script src="../static/js/aac.js"></script>
 
+		<script src="../static/js/web.js?id=101"></script> -->
 
+		<!-- <script src="../static/js/webapk.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" src="jmuxer.js"></script>
 
+		<script src="https://cdn.bootcss.com/vConsole/3.2.0/vconsole.min.js"></script>
 
+		<!-- <script src="../static/distss/WXdraw.js?id=105"></script> -->
 
+
 
+		<script>
 
+			//隐藏控件 controls
 
+			var fpsCount = 0;
 
+			var requestCount = 0;
 
+			var timeCount = 0;
 
+			var isVisuable = true;
 
+			var isFeed = true;
 
+			var isDrag = false;
 
+			var shoudDrop = false;
 
+			var isEnough = true;
 
+			var ifCanPlay = false;
 
+			var isFinish = false;
 
+
 
+			var delayTime = new Date().getTime();
 
+			var feedTime = new Date().getTime();
 
+			var readyTime = new Date().getTime();
 
+			var requestTime = new Date().getTime();
 
+			var curTime = new Date().getTime();
 
+			var requestTime = new Date().getTime(); //记录离开时间
 
+			var myVideo = document.getElementById("playerVideo");
 
+			var myAudio = document.getElementById("audioPlayer");
 
+			var audioBuffer = [];
 
+			var audioBack = [];
 
+
 
+			Module = {};
 
+			Module.onRuntimeInitialized = function() {
 
+				console.log("Wasm 加载成功!")
 
+				isFinish = true;
 
+			}
 
+
 
+			document.addEventListener("visibilitychange", () => {
 
+
 
+				if (document.visibilityState == "visible") {
 
+					console.log("页面可见，继续喂视频");
 
+					//requestTime = new Date().getTime();	
+					isVisuable = true;
 
+				} else {
 
+					isVisuable = false;
 
+					isFeed = false;
 
+					myVideo.pause();
 
+				}
 
+
 
+
 
+			});
 
+
 
+
 
+			myVideo.play();
 
+
 
+			myVideo.addEventListener('pause', function() {
 
+				//console.log("视频播放暂停");
 
+				isFeed = false;
 
+			});
 
+
 
+			myAudio.addEventListener('canplay', function() {
 
+				console.log("缓冲区大小 %f", myAudio.buffered.end(0) - myAudio.buffered.start(0));
 
+			});
 
+
 
+			/*function decodeAAC(data)
 
+			{
 
+				var retPtr = Module._malloc(4 * 5 * 1024);//接收的数据
 
+				var inputPtr = Module._malloc(4 * data.length);//输入数据
 
+				
+				for( i =0;i < data.length;i++)
 
+				{
 
+					Module.HEAPU8[(inputPtr)+i] = data[i];//转换为堆数据
 
+				}
 
+				
+				var pcmLen = Module._feedData(retPtr, inputPtr, data.length);
 
+				
+				if(pcmLen > 0)
 
+				{
 
+					//console.log("%d帧 aac 解码成功, %d", decodeCount, pcmLen);
 
+					var pcmData = new Uint8Array(pcmLen);		
+					for(i = 0;i < pcmLen;i++)
 
+					{
 
+						pcmData[i] = Module.HEAPU8[(retPtr)+i]
 
+					}
 
+					
+					player.feed(pcmData);
 
+				}
 
+				else
 
+				{
 
+					console.log("%d帧 aac 解码失败, %d", decodeCount, pcmLen);
 
+				}
 
+				
+				decodeCount++;
 
+				Module._free(inputPtr);
 
+				Module._free(retPtr);
 
+			}	*/
 
+
 
+
 
+			//解协议
 
+			function ParseProto(data) {
 
+				var temp = "";
 
+				var input = new Uint8Array(data),
 
+					duration,
 
+					video,
 
+					audio;
 
+
 
+				if (input[0] == 0 && input[1] == 0 && input[2] == 0 && input[3] == 1) {
 
+					// debugger
 
+					video = input;
 
+					duration = 24;
 
+					var nalType = input[4] & 0x1f; //nalType == 0x07|| nalType == 0x08 || nalType == 0x05
 
+
 
+					if (!isFeed) {
 
+						if (nalType == 0x05) {
 
+							console.log("发现I帧");
 
+						}
 
+
 
+						if (nalType == 0x05 && isVisuable) {
 
+							console.log("检测到I帧 %d，重新渲染, 耗时 %d ms", nalType, new Date().getTime() - requestTime);
 
+							isFeed = true;
 
+						}
 
+					}
 
+
 
+				} else if (input[0] == 0xff) {
 
+					if (!isEnough) {
 
+						requestCount++;
 
+						//audioBuffer.push(input);
 
+					}
 
+					audio = input;
 
+
 
+					if (new Date().getTime() - curTime > 100) {
 
+						delayTime = new Date().getTime();
 
+						console.log("接收时间 %d ms", new Date().getTime() - curTime);
 
+					}
 
+					curTime = new Date().getTime();
 
+					duration = 24;
 
+					//console.log("duration %d", duration);
 
+
 
+				} else if (input[0] == 0x68) {
 
+					if (input[23] == 0x05) //横竖屏标识
 
+					{
 
+						var state = CheckScreenDirection(input.slice(24, 24 + 8));
 
+
 
+						if (state == 1) {
 
+							console.log("安卓卡此时竖屏");
 
+							//竖屏处理
 
+						} else {
 
+							console.log("安卓卡此时横屏");
 
+							//横屏处理
 
+						}
 
+					}
 
+
 
+					if (input[23] == 0x0b) {
 
+						console.log("多端登陆");
 
+					}
 
+					//console.log("屏幕旋转 %s", PrintArry(input));
 
+				}
 
+
 
+				return {
 
+					audio: audio,
 
+					video: video,
 
+					duration: duration
 
+				};
 
+			}
 
+
 
+			window.onload = function() {
 
+				// var socketURL = 'wss://jmuxer-demo-server.herokuapp.com';
 
+				//socketURL = "ws://127.0.0.1:8080"
 
+				// socketURL = "ws://192.168.11.233:8080"
 
+				//socketURL = "ws://14.215.128.98:14112";
 
+				// var socketURL = "ws://192.168.11.66:9101";
 
+				var socketURL = "ws://192.168.198.11:9101"
 
+				// socketURL = "ws://14.215.128.98:14077";
 
+				//socketURL = "wss://192.168.11.242:9104";
 
+
 
+
 
+				var jmuxer = new JMuxer({
 
+					node: 'playerVideo',
 
+					flushingTime: 15,
 
+					fps: 30,
 
+					mode: 'video',
 
+					debug: false
 
+				});
 
+
 
+				var audioMuxer = new JMuxer({
 
+					node: 'audioPlayer',
 
+					flushingTime: 15,
 
+					clearBuffer: true,
 
+					fps: 60, //可以不选，原先43
 
+					mode: 'audio',
 
+					debug: false
 
+				});
 
+
 
+				curTime = new Date().getTime();
 
+				var ws = new WebSocket(socketURL);
 
+				ws.binaryType = 'arraybuffer';
 
+
 
+				//断开检测
 
+				ws.onclose = function(e) {
 
+					alert("websocket连接断开");
 
+					console.log('websocket 断开: ' + e.code + ' ' + e.reason + ' ' + e.wasClean);
 
+					console.log(e);
 
+				}
 
+
 
+				ws.addEventListener('open', function(event) {
 
+					console.log("发送配置帧");
 
+					ws.send(ConfigChannel("RK3923C1201900139"));
 
+				});
 
+
 
+				ws.addEventListener('error', function(event) {
 
+					console.log("连接失败");
 
+				});
 
+
 
+				ws.addEventListener('message', function(event) {
 
+					var data = ParseProto(event.data); //JAVA服务器转发
 
+					//console.log("收到数据");
 
+
 
+					var audioData = {
 
+						audio: data.audio,
 
+						video: null,
 
+						duration: data.duration
 
+					};
 
+
 
+					var videoData = {
 
+						audio: null,
 
+						video: data.video,
 
+						duration: data.duration
 
+					};
 
+
 
+					if (myAudio.readyState == 2) {
 
+						requestTime = new Date().getTime();
 
+						isEnough = false;
 
+						console.log("数据存储不够，出现声音停止，时间差 %f", myAudio.buffered.end(0));
 
+						myAudio.pause();
 
+						//myAudio.playbackRate = 2;
 
+					} else if (myAudio.readyState == 4 && isEnough == false) {
 
+						myAudio.play();
 
+						var time = new Date().getTime();
 
+						isEnough = true;
 
+						console.log("填满耗时 %d ms, 填充帧数 %d, 填充延迟 %d ms", time - requestTime, requestCount, requestCount * 23);
 
+
 
+						console.log("----接收到启动 %d ms， 缓冲区 %f---", time - delayTime, myAudio.buffered.end(0) - myAudio.played.end(0));
 
+					}
 
+
 
+					if (data.audio != null) //喂音频
 
+					{
 
+						if (myAudio.buffered.length > 0 && myAudio.played.length > 0) {
 
+							var bufferTime = myAudio.buffered.end(0) - myAudio.played.end(0);
 
+							//console.log(" bufferTime %d", bufferTime);
 
+
 
+							if (bufferTime > 1) {
 
+								//console.log("丢掉一些包");
 
+								//return;
 
+							}
 
+						}
 
+
 
+						audioMuxer.feed(audioData);
 
+					}
 
+
 
+					if (data.video != null) //喂视频
 
+					{
 
+						if (isFeed) {
 
+							jmuxer.feed(data);
 
+						}
 
+
 
+						//jmuxer.feed(videoData);
 
+					}
 
+
 
+				});
 
+
 
+
 
+				myVideo.onmousedown = function(event) {
 
+					//放在此处只是为了方便演示，实际使用中查找横竖屏只要刚连接上时调用一次就好。	
+					//var checkBuffer = GetScreenState();
 
+					//ws.send(checkBuffer);
 
+
 
+					if (!isFeed) {
 
+						console.log("重新申请I帧");
 
+						requestTime = new Date().getTime();
 
+						var buffer = RequestIFrame();
 
+						//var buffer = new Uint8Array([0x01]);
 
+						ws.send(buffer);
 
+					}
 
+
 
+					//console.log("报文 %s", PrintArry(buffer));
 
+
 
+
 
+					if (event.button == 0) {
 
+						var posX = event.offsetX * 1080 * 1.0 / myVideo.clientWidth;
 
+						var posY = event.offsetY * 1920 * 1.0 / myVideo.clientHeight;
 
+						var buffer = ExexuteMouseDown(posX.toString(), posY.toString());
 
+						ws.send(buffer);
 
+						isDrag = true;
 
+					}
 
+
 
+				}
 
+
 
+
 
+				myVideo.onmousemove = function(event) {
 
+					if (isDrag && event.button == 0) {
 
+						var posX = event.offsetX * 1080 * 1.0 / myVideo.clientWidth;
 
+						var posY = event.offsetY * 1920 * 1.0 / myVideo.clientHeight;
 
+						var buffer = ExexuteMouseMove(posX.toString(), posY.toString());
 
+						ws.send(buffer);
 
+						//console.log("移动位置 %d, %d", posX, posY);
 
+					}
 
+
 
+				}
 
+
 
+				myVideo.onmouseup = function(event) {
 
+					isDrag = false;
 
+					var posX = event.offsetX * 1080 * 1.0 / myVideo.clientWidth;
 
+					var posY = event.offsetY * 1920 * 1.0 / myVideo.clientHeight;
 
+					var buffer = ExexuteMouseUp(posX.toString(), posY.toString());
 
+					ws.send(buffer);
 
+
 
+				}
 
+
 
+				myVideo.onkeydown = function(event) {
 
+					ExexuteKeyDown(e.keyCode);
 
+				}
 
+
 
+			}
 
+
 
+			function Back() {
 
+				if (event.button == 2) {
 
+					//ExexuteKeyDown(4);
 
+				}
 
+				ExexuteKeyDown(4);
 
+				window.event.returnValue = false;
 
+				return false;
 
+			}
 
+
 
+
 
+			var topwinHeight = window.screen.height - window.innerHeight + 30; //计算title top 头部
 
+			$('#wine').css({
 
+				"width": window.screen.width,
 
+				"height": window.screen.height - topwinHeight - 20,
 
+				"position": "absolute",
 
+
 
+			})
 
+			var winese = document.createElement("wine");
 
+			wine.style.top = "-" + winese + 'px';
 
+
 
+			var url = window.location.href;
 
+			url = url.split('/')
 
+			// var baseUrl = window.location.href; //"http://192.168.31.20"
 
+			// var baseUrl = 'https://'+url[2] //url[2] //'http://192.168.31.159'//'http://' + url[2] 
+			var query = window.location.search.substring(1);
 
+			// query = "clientType=1&cardIp=14.215.128.96&port=2012&sn=RK3930C2301900012&demoTime=3600&id=377&diskName=SC93mBww"
 
+			var vars = query.split("&");
 
+			console.log(vars)
 
+			// var baseUrl = 'http://192.168.31.20'
 
+			var baseUrl = 'test.androidscloud.com'
 
+			var data = {}
 
+			//			 审核
 
+			$.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 clientType = vars.find(e => {
 
+				return e.startsWith('clientType')
 
+			}) || ''
 
+			// console.log(clientType)
 
+			data.clientType = clientType.substring(11, clientType.length)
 
+			//			小程序直接进入
 
+			var diskName = vars.find(e => {
 
+				return e.startsWith('diskName')
 
+			}) || ''
 
+
 
+			data.diskName = diskName.substring(9, diskName.length)
 
+
 
+			// document.title = decodeURI(data.diskName)
 
+			if (data.clientType == 1) {
 
+				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')
 
+				}) || ''
 
+
 
+
 
+				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)
 
+
 
+			} else if (data.clientType == 2) { //分享屏幕
 
+				console.log("走到分享屏幕里面啦==========", data.clientTypes);
 
+				$(".leftmains").css({
 
+					"right": "-4rem"
 
+				})
 
+				$('.leftmains').hide()
 
+				$('.bottommains').hide()
 
+				$('#btnMuted').hide()
 
+				let ip = vars.find(e => {
 
+					return e.startsWith('ip')
 
+				}) || ''
 
+				var username = vars.find(e => {
 
+					return e.startsWith('username')
 
+				}) || ''
 
+				var id = vars.find(e => {
 
+					return e.startsWith('id')
 
+				}) || ''
 
+				var userCardId = vars.find(e => {
 
+					return e.startsWith('userCardId')
 
+				}) || ''
 
+				data.id = id.substring(3, id.length)
 
+				data.username = username.substring(9, username.length)
 
+				data.ip = ip.substring(3, ip.length)
 
+				data.userCardId = userCardId.substring(11, userCardId.length)
 
+			} else {
 
+				// $(".leftmains").css({
 
+				// 					"right":"-4rem"
 
+				// 				})
 
+				// 	$('.leftmains').hide()
 
+				// 	$('.bottommains').hide()
 
+				// 	$('#btnMuted').hide()
 
+				var username = vars.find(e => {
 
+					return e.startsWith('username')
 
+				}) || ''
 
+
 
+				var userCardId = vars.find(e => {
 
+					return e.startsWith('userCardId')
 
+				}) || ''
 
+				data.username = username.substring(9, username.length)
 
+				data.userCardId = userCardId.substring(11, userCardId.length)
 
+				console.log(data.ip)
 
+			}
 
+
 
+
 
+			//           心跳
 
+			//			var time = 1000 * 30;
 
+			//			var interval;
 
+			//			fun()
 
+			//
 
+			//			function run() {
 
+			//
 
+			//				interval = setInterval(fun, time);
 
+			//			}
 
+			//
 
+			//			function fun() {
 
+			//				$.ajax({
 
+			//					url: baseUrl + "/api/game/v1/cloudGame/dev/get/cardSn",
 
+			//					data: {
 
+			//						sn: data.sn
 
+			//					},
 
+			//					type: 'get',
 
+			//					dataType: 'json',
 
+			//					success: function(data) {
 
+			//
 
+			//					}
 
+			//				})
 
+			//
 
+			//			};
 
+			//			run();
 
+			// data.clientType=1
 
+			// data.sn="RK3930C2301900044"
 
+			// data.cardIp="14.215.128.96"
 
+			// data.port=2044
 
+
 
+			var orientation = 0 //0 竖屏，1横屏
 
+			var winHeight = window.screen.height - window.innerHeight
 
+			// var urlss = url[2]
 
+			// var urlss='192.168.31.20'
 
+			// var urlss = "14.215.128.96"
 
+			var urlss = 'test.androidscloud.com'
 
+			document.body.addEventListener('touchmove', function(e) {
 
+				e.preventDefault()
 
+			}, {
 
+				passive: false
 
+			})
 
+
 
+			// 
+			// urlss = "14.215.128.96"
 
+			// console.log()
 
+			// data.clientType = 1
 
+			// data.sn="RK3930C2301900044"
 
+			// data.cardIp="14.215.128.96"
 
+			// data.port=2044
 
+			// if (data.clientType == 3) {
 
+			// 	var players = AV.Player.fromWebSocket("wss://" + urlss + '/authVideoWebSocket?' + "clientType=" + data.clientType +
 
+			// 		"&username=" + data.username + "&userCardId=" + data.userCardId);
 
+			// } else if (data.clientType == 2) {
 
+			// 	// var players = AV.Player.fromWebSocket("wss://" + urlss + '/shareWebSocket?' + "clientType=" + data.clientType +
 
+			// 	// 	"&username=" + data.username + "&userCardId=" + data.userCardId + "&ip=" + data.ip);
 
+
 
+			// 	var players = AV.Player.fromWebSocket(
 
+			// 		"wss://test.androidscloud.com/videoWebSocket?clientType=1&cardIp=14.215.128.96&port=2005&sn=RK3930C2301900005");
 
+			// } else {
 
+			// 	var players = AV.Player.fromWebSocket("wss://" + urlss + '/videoWebSocket?' + "clientType=" + data.clientType +
 
+			// 		"&cardIp=" + data.cardIp + "&port=" + data.port + "&sn=" + data.sn);
 
+			// }
 
+			// // 			debugger
 
+			// var players = AV.Player.fromWebSocket('ws://14.215.128.96/authVideoWebSocket?clientType=3&username=WqXTc1593762177&userCardId=377');
 
+			// players.play();
 
+			// players.volume = 100
 
+			//var players = AV.Player.fromWebSocket('ws://14.215.128.96/videoWebSocket?clientType=0&cardIp=30.30.30.58&port=9100&sn=RK3930C2301900060');
 
+
 
+			var warid = {
 
+				id: data.id,
 
+				type: 1,
 
+				sn: data.sn
 
+			}
 
+			//结束时间 type=2
 
+			var warids = {
 
+				id: data.id,
 
+				type: 2,
 
+				sn: data.sn
 
+			}
 
+
 
+			//			$.ajax({})
 
+
 
+			// 关闭浏览器
 
+			//			window.onbeforeunload = function() {}
 
+
 
+			//撤销的array
 
+			var cancelList = new Array();
 
+			//撤销的次数
 
+			var cancelIndex = 0;
 
+			var inputType = 0 //输入类型 0:手写，1:键盘输入
 
+			//判断是否ie
 
+			var IE_HACK = (/msie/i.test(navigator.userAgent) &&
 
+				!/opera/i.test(navigator.userAgent));
 
+			//			云手机相关逻辑	 
+			// var player = new Player({
 
+			// 	size: {
 
+			// 		width: 1280,
 
+			// 		height: 720
 
+			// 	}
 
+			// });
 
+			// var secanv = document.getElementById("wine");
 
+
 
+			// secanv.appendChild(player.canvas);
 
+			// console.log("player=========>>>>", player);
 
+			// console.log("secanv>>>>", secanv);
 
+			//             &cardIp="+data.data.extranetIp+"&port="+data.data.extranetPort+"&sn="+data.data.sn
 
+
 
+			$(function() {
 
+				initCanvas();
 
+			});
 
+			//初始化
 
+			var initCanvas = function() {
 
+
 
+			}
 
+
 
+
 
+			$("#voew").on("click", function() {})
 
+
 
+			$("#box").on("click", function() {
 
+				//				draw_graph('pencil', this)
 
+
 
+			})
 
+
 
+			console.log(player)
 
+			$('#mocan').on('click', function() {
 
+				draw_graph('pencil', this)
 
+			})
 
+
 
+			// //初始化一下就可以了，
 
+			let vConsole = new VConsole();
 
+			//			 //你打印的数据 比如
 
+			console.log('test');
 
+			//就可像小程序一样的看了和调试了。
 
+			$('.no-ne-an').on('click', function() {
 
+				//结束时间 type=2
 
+				let warids = {
 
+					id: data.id,
 
+					type: 2,
 
+					sn: data.sn
 
+				}
 
+				$.ajax({
 
+					url: baseUrl + "/api/game/v1/cloudGame/dev/getSn",
 
+					data: warid,
 
+					type: 'get',
 
+					dataType: 'json',
 
+					success: function(data) {
 
+						history.go(-1)
 
+						if (data.status == 0) {
 
+
 
+						} else {
 
+							alert(data.msg)
 
+						}
 
+						//
 
+					}
 
+				})
 
+			})
 
+
 
+			var btnMuted = document.querySelector("#btnMuted");
 
+			btnMuted && (function() {
 
+				var setHistory = function(left, top) {
 
+					try {
 
+						localStorage.setItem("muted-btn-loc", JSON.stringify({
 
+							left: left,
 
+							top: top
 
+						}));
 
+					} catch (ex) {}
 
+				};
 
+				var getHistory = function() {
 
+					try {
 
+						var value = localStorage.getItem("muted-btn-loc");
 
+						if (!value) return null;
 
+						value = JSON.parse(value);
 
+						if (!value) return null;
 
+						return value;
 
+					} catch (ex) {
 
+						return null
 
+					}
 
+				};
 
+				var fixLoc = function(loc) {
 
+					var rect = btnMuted.getBoundingClientRect();
 
+					rect = {
 
+						top: rect.top,
 
+						left: rect.left,
 
+						width: rect.width,
 
+						height: rect.height
 
+					}; //部分低版本浏览器,该属性为只读
 
+					if (loc) {
 
+						rect.left = loc.left;
 
+						rect.top = loc.top;
 
+					}
 
+					var minX = 0;
 
+					var minY = 0;
 
+					var docRect = document.documentElement.getBoundingClientRect();
 
+					var maxY = docRect.height - rect.height;
 
+					var maxX = docRect.width - rect.width;
 
+					var left = rect.left;
 
+					var top = rect.top;
 
+					left = Math.min(left, maxX);
 
+					left = Math.max(left, minX);
 
+					top = Math.min(top, maxY);
 
+					top = Math.max(top, minY);
 
+					console.log(rect.top, top, loc);
 
+					if (loc || top !== rect.top || left !== rect.left) {
 
+						btnMuted.style.cssText += "left:" + left + "px;top:" + top + "px;";
 
+					}
 
+				}
 
+				window.addEventListener("resize", function() {
 
+					fixLoc();
 
+				});
 
+				var touchPoint = {
 
+					pageY: 0,
 
+					pageX: 0
 
+				};
 
+				var currentLoc = {
 
+					top: 0,
 
+					left: 0,
 
+					curTop: 0,
 
+					curLeft: 0
 
+				};
 
+				var toMove = false;
 
+				var touchmove = function(e) {
 
+					e.preventDefault();
 
+					var point = e.changedTouches[0];
 
+					var top = -touchPoint.pageY + point.pageY;
 
+					var left = -touchPoint.pageX + point.pageX;
 
+					if (toMove) {
 
+						top += currentLoc.top;
 
+						left += currentLoc.left;
 
+						currentLoc.curLeft = left;
 
+						currentLoc.curTop = top;
 
+						btnMuted.style.cssText += "left:" + left + "px;top:" + top + "px;";
 
+					} else {
 
+						if (Math.abs(top) >= 5 || Math.abs(left) >= 5) {
 
+							toMove = true;
 
+						}
 
+					}
 
+
 
+				};
 
+				var touchend = function() {
 
+					window.removeEventListener("touchmove", touchmove, {
 
+						passive: false
 
+					});
 
+					window.removeEventListener("touchend", touchend, {
 
+						passive: false
 
+					});
 
+
 
+					if (toMove) {
 
+						setHistory(currentLoc.curLeft, currentLoc.curTop);
 
+						fixLoc();
 
+					} else {
 
+						//按点击处理
 
+
 
+						var set = $('.control-right-img').attr("data-id")
 
+						if (set == '1') {
 
+							$('.control-right-img').attr({
 
+								"data-id": "2"
 
+							})
 
+							//							$('.control-right-img').find('img').attr({
 
+							//								"src": "../static/img/musicturn.png"
 
+							//							})
 
+							// players.volume = 100
 
+							$(".leftmains").css({
 
+								"right": "-4rem"
 
+							})
 
+							// console.log(players)
 
+							// players.play();
 
+						} else {
 
+
 
+							$('.control-right-img').attr({
 
+								"data-id": "1"
 
+							})
 
+
 
+							$(".leftmains").css({
 
+								"right": "0rem"
 
+							})
 
+							//							$('.control-right-img').find('img').attr({
 
+							//								"src": "../static/img/musicfalse.png"
 
+							//							})
 
+							// players.volume = 0
 
+							// players.off('pause');
 
+							// players.pause();
 
+							// var embed = document.embedPlay;
 
+							console.log(players, "fdsfdsf")
 
+						}
 
+					}
 
+				}
 
+				btnMuted.addEventListener("touchstart", function(e) {
 
+					e.preventDefault();
 
+					toMove = false;
 
+					var point = e.changedTouches[0];
 
+					touchPoint.pageX = point.pageX;
 
+					touchPoint.pageY = point.pageY;
 
+					var rect = e.target.getBoundingClientRect();
 
+					currentLoc.top = rect.top;
 
+					currentLoc.left = rect.left;
 
+					window.addEventListener("touchmove", touchmove, {
 
+						passive: false
 
+					});
 
+					window.addEventListener("touchend", touchend, {
 
+						passive: false
 
+					});
 
+
 
+				}, {
 
+					passive: false
 
+				});
 
+				var history = getHistory();
 
+				if (history) {
 
+					fixLoc(history);
 
+				}
 
+				btnMuted.classList.remove("hide");
 
+			})();
 
+
 
+			$(".boximg").on("click", function() {
 
+				$(".mainbox").css({
 
+					"display": "none"
 
+				})
 
+			})
 
+
 
+			//			剪切板
 
+			$(".sboxbu").on("click", function() {
 
+				$(".sbox").css({
 
+					"display": "none"
 
+				})
 
+			})
 
+			//			剪切板
 
+			$(".uploadss").on("click", function() {
 
+				$(".sbox").css({
 
+					"display": "none"
 
+				})
 
+			})
 
+
 
+			$("#upload").on("click", function() {
 
+				wx.miniProgram.switchTab({
 
+					url: '/pages/home/home'
 
+				})
 
+			})
 
+
 
+
 
+
 
+
 
+
 
+			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");
 
+
 
+			}
 
+		</script>
 
+		<script type="text/javascript" src="jmuxer.js"></script>
 
+	</body>
 
+
 
+</html>

+ 340 - 0
screenAndroid/css/WXtrialInterface.css
View File 

@@ -0,0 +1,340 @@
 
+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;
 
+			}

+ 13 - 3
screenAndroid/homeNew.html
View File 

@@ -442,7 +442,8 @@
 
 							console.log("缓冲区大小 %f", myAudio.buffered.end(0) - myAudio.buffered.start(0));
 
 							console.log("缓冲区大小 %f", myAudio.buffered.end(0) - myAudio.buffered.start(0));
 
 						});
 
 						});
 
 
 
-						var socketURL = "ws://192.168.11.66:9101";
 
+						// var socketURL = "ws://192.168.11.66:9101";
 
+						var socketURL = "ws://192.168.198.11:9101"
 
 						// socketURL = "ws://14.215.128.98:14077";
 
 						// socketURL = "ws://14.215.128.98:14077";
 
 						//socketURL = "wss://192.168.11.242:9104";
 
 						//socketURL = "wss://192.168.11.242:9104";
 
 
 
@@ -609,7 +610,15 @@
 
 						var isEnough = true;
 
 						var isEnough = true;
 
 						var ifCanPlay = false;
 
 						var ifCanPlay = false;
 
 						var isFinish = false;
 
 						var isFinish = false;
 
-
 
+                        
+						var delayTime = new Date().getTime();
 
+						var feedTime = new Date().getTime();
 
+						var readyTime = new Date().getTime();
 
+						var requestTime = new Date().getTime();
 
+						var curTime = new Date().getTime();
 
+						var requestTime = new Date().getTime(); //记录离开时间
 
+						
+						
 						var temp = "";
 
 						var temp = "";
 
 						var input = new Uint8Array(data),
 
 						var input = new Uint8Array(data),
 
 							duration,
 
 							duration,
 
@@ -850,7 +859,8 @@
 
 											console.log("缓冲区大小 %f", myAudio.buffered.end(0) - myAudio.buffered.start(0));
 
 											console.log("缓冲区大小 %f", myAudio.buffered.end(0) - myAudio.buffered.start(0));
 
 										});
 
 										});
 
 
 
-										var socketURL = "ws://192.168.11.66:9101";
 
+										// var socketURL = "ws://192.168.11.66:9101";
 
+										var socketURL = "ws://192.168.198.11:9101"
 
 										// socketURL = "ws://14.215.128.98:14077";
 
 										// socketURL = "ws://14.215.128.98:14077";
 
 										//socketURL = "wss://192.168.11.242:9104";
 
 										//socketURL = "wss://192.168.11.242:9104";

+ 370 - 403
screenAndroid/index.html
View File 

@@ -1,415 +1,382 @@
 
 <!DOCTYPE html>
 
 <!DOCTYPE html>
 
 <html lang="en">
 
 <html lang="en">
 
-<head>
 
-    <meta charset="UTF-8">
 
-    <meta name="description" content="jMuxer - a simple javascript mp4 muxer for non-standard streaming communications protocol">
 
-    <meta name="keywords" content="h264 player, mp4 player, mse, mp4 muxing, jmuxer, aac player">
 
-    <title>JMuxer demo</title>
 
-    <script async defer src="https://buttons.github.io/buttons.js"></script>
 
-    <style type="text/css">
 
-        .github-tools {
 
-            position: absolute;
 
-            top: 15px;
 
-            right: 15px;
 
-        }
 
-        a.h264-player {
 
-            font-size: 20px;
 
-            text-decoration: none;
 
-            color: #07568e;
 
-            margin-top: 10px;
 
-            display: block;
 
-        }
 
-        .gesture {
 
-            font-size: 15px;
 
-            color: #ad4903;
 
-            margin-top: 10px;
 
-        }
 
-</style>
 
-</head>
 
-<body>
 
-
 
-<h2>jMuxer Demo</h2>
 
-<p>Sample demo node server is running on heroku free hosting</p>
 
-<br /><br />
 
-<div class="github-tools">
 
-<!-- Place this tag where you want the button to render. -->
 
-
 
-</div>
 
-
 
-<div id="container" style="width: 600px; margin: 0 auto;"> 
-    <video width="70%"  disablePictureInPicture ="true"  autoplay poster="images/loader-thumb.jpg" id="player"></video>
 
-	<audio width="50%"  preload="auto" autoplay controls poster="images/loader-thumb.jpg" id="audioPlayer" ></audio>
 
-    <div class="gesture">If it does not play automatically, Click the `video play button` to initiate the video</div>
 
-</div>
 
-
 
-<body oncontextmenu="Back()">
 
-</body>
 
-
 
-<script src="helper.js" >
 
-</script>
 
-
 
-<script>
 
-	//隐藏控件 controls
 
-  var fpsCount = 0;
 
-  var requestCount = 0;
 
-  var timeCount = 0;
 
-  var isVisuable = true;
 
-  var isFeed = true;
 
-  var isDrag = false;
 
-  var shoudDrop = false;
 
-  var isEnough = true;
 
-  var ifCanPlay = false;
 
-  var isFinish = false;
 
-  
-  var delayTime = new Date().getTime();
 
-  var feedTime = new Date().getTime();
 
-  var readyTime = new Date().getTime();
 
-  var requestTime = new Date().getTime() ;
 
-  var curTime = new Date().getTime();
 
-  var requestTime = new Date().getTime();//记录离开时间
 
-  var myVideo = document.getElementById("player");
 
-  var myAudio = document.getElementById("audioPlayer");
 
-  var audioBuffer = [];
 
-  var audioBack = [];
 
-  
-  Module = {};
 
-  Module.onRuntimeInitialized = function() 
-  {
 
-	console.log("Wasm 加载成功!")
 
-	isFinish = true;
 
-  }
 
- 
-  document.addEventListener("visibilitychange", () => {
 
-	
-    if (document.visibilityState == "visible") 
-	{
 
-		console.log("页面可见，继续喂视频");
 
-		//requestTime = new Date().getTime();	
-		isVisuable = true;
 
-    }
 
-	else
 
-	{
 
-		isVisuable = false;
 
-		isFeed = false;
 
-		myVideo.pause();
 
-	}
 
-	
-
 
-});  
-
 
-  
-  myVideo.play();
 
-  
-  myVideo.addEventListener('pause',function(){
 
-            //console.log("视频播放暂停");
 
-			isFeed = false;
 
-        });
 
-		
-  myAudio.addEventListener('canplay',function(){
 
-           console.log("缓冲区大小 %f", myAudio.buffered.end(0) - myAudio.buffered.start(0));
 
-        });
 
-		
-		/*function decodeAAC(data)
 
-		{
 
-			var retPtr = Module._malloc(4 * 5 * 1024);//接收的数据
 
-			var inputPtr = Module._malloc(4 * data.length);//输入数据
 
-			
-			for( i =0;i < data.length;i++)
 
-			{
 
-				Module.HEAPU8[(inputPtr)+i] = data[i];//转换为堆数据
 
-			}
 
-			
-			var pcmLen = Module._feedData(retPtr, inputPtr, data.length);
 
-			
-			if(pcmLen > 0)
 
-			{
 
-				//console.log("%d帧 aac 解码成功, %d", decodeCount, pcmLen);
 
-				var pcmData = new Uint8Array(pcmLen);		
-				for(i = 0;i < pcmLen;i++)
 
-				{
 
-					pcmData[i] = Module.HEAPU8[(retPtr)+i]
 
-				}
 
-				
-				player.feed(pcmData);
 
+	<head>
 
+		<meta charset="UTF-8">
 
+		<meta name="description" content="jMuxer - a simple javascript mp4 muxer for non-standard streaming communications protocol">
 
+		<meta name="keywords" content="h264 player, mp4 player, mse, mp4 muxing, jmuxer, aac player">
 
+		<title>JMuxer demo</title>
 
+		<script async defer src="https://buttons.github.io/buttons.js"></script>
 
+		<style type="text/css">
 
+			.github-tools {
 
+				position: absolute;
 
+				top: 15px;
 
+				right: 15px;
 
 			}
 
 			}
 
-			else
 
-			{
 
-				console.log("%d帧 aac 解码失败, %d", decodeCount, pcmLen);
 
-			}
 
-			
-			decodeCount++;
 
-			Module._free(inputPtr);
 
-			Module._free(retPtr);
 
-		}	*/
 
-		
- 
- //解协议
 
- function ParseProto(data)
 
- {
 
-	var temp = "";
 
-	var input = new Uint8Array(data),
 
-	duration,
 
-	video,
 
-	audio;
 
-	
-	if(input[0] == 0 && input[1] == 0 && input[2] == 0 && input[3] == 1)
 
-	{
 
-		// debugger
 
-		video = input;
 
-		duration = 24;
 
-		var nalType = input[4] &0x1f;//nalType == 0x07|| nalType == 0x08 || nalType == 0x05
 
-		
-		if(!isFeed)
 
-		{	
-			if(nalType == 0x05)
 
-			{
 
-				console.log("发现I帧");
 
+
 
+			a.h264-player {
 
+				font-size: 20px;
 
+				text-decoration: none;
 
+				color: #07568e;
 
+				margin-top: 10px;
 
+				display: block;
 
 			}
 
 			}
 
-		
-			 if(nalType  == 0x05 && isVisuable)
 
-			 {
 
-				console.log("检测到I帧 %d，重新渲染, 耗时 %d ms", nalType , new Date().getTime() - requestTime);
 
-				isFeed = true;	
-			 }			 			 	
-		}
 
-		
-	}
 
-	else if(input[0] == 0xff)
 
-	{
 
-		if(!isEnough)
 
-		{
 
-			requestCount++;
 
-			//audioBuffer.push(input);
 
-		}
 
-		audio = input;
 
-		
-		if(new Date().getTime() - curTime > 100)
 
-		{
 
-			delayTime = new Date().getTime();
 
-			console.log("接收时间 %d ms", new Date().getTime() - curTime);
 
-		}
 
-		curTime = new Date().getTime();				
-		duration = 24;
 
-		//console.log("duration %d", duration);
 
-		
-	}
 
-	else if(input[0] == 0x68)
 
-	{	
-		if(input[23] == 0x05)//横竖屏标识
 
-		{
 
-			var state = CheckScreenDirection(input.slice(24, 24 + 8));
 
-			
-			if(state == 1)
 
-			{
 
-				console.log("安卓卡此时竖屏");
 
-				//竖屏处理
 
+
 
+			.gesture {
 
+				font-size: 15px;
 
+				color: #ad4903;
 
+				margin-top: 10px;
 
 			}
 
 			}
 
-			else
 
-			{
 
-				console.log("安卓卡此时横屏");
 
-				//横屏处理
 
+		</style>
 
+	</head>
 
+	<body>
 
+
 
+		<h2>jMuxer Demo</h2>
 
+		<p>Sample demo node server is running on heroku free hosting</p>
 
+		<br /><br />
 
+		<div class="github-tools">
 
+			<!-- Place this tag where you want the button to render. -->
 
+
 
+		</div>
 
+
 
+		<div id="container" style="width: 600px; margin: 0 auto;">
 
+			<video width="70%" disablePictureInPicture="true" autoplay poster="images/loader-thumb.jpg" id="player"></video>
 
+			<audio width="50%" preload="auto" autoplay controls poster="images/loader-thumb.jpg" id="audioPlayer"></audio>
 
+			<div class="gesture">If it does not play automatically, Click the `video play button` to initiate the video</div>
 
+		</div>
 
+
 
+		<body oncontextmenu="Back()">
 
+		</body>
 
+
 
+		<script src="helper.js">
 
+		</script>
 
+
 
+		<script>
 
+			//隐藏控件 controls
 
+			var fpsCount = 0;
 
+			var requestCount = 0;
 
+			var timeCount = 0;
 
+			var isVisuable = true;
 
+			var isFeed = true;
 
+			var isDrag = false;
 
+			var shoudDrop = false;
 
+			var isEnough = true;
 
+			var ifCanPlay = false;
 
+			var isFinish = false;
 
+
 
+			var delayTime = new Date().getTime();
 
+			var feedTime = new Date().getTime();
 
+			var readyTime = new Date().getTime();
 
+			var requestTime = new Date().getTime();
 
+			var curTime = new Date().getTime();
 
+			var requestTime = new Date().getTime(); //记录离开时间
 
+			var myVideo = document.getElementById("player");
 
+			var myAudio = document.getElementById("audioPlayer");
 
+			var audioBuffer = [];
 
+			var audioBack = [];
 
+
 
+			Module = {};
 
+			Module.onRuntimeInitialized = function() {
 
+				console.log("Wasm 加载成功!")
 
+				isFinish = true;
 
 			}
 
 			}
 
-		}
 
-		
-		if(input[23] == 0x0b)
 
-		{
 
-			console.log("多端登陆");
 
-		}
 
-		//console.log("屏幕旋转 %s", PrintArry(input));
 
-	}
 
-
 
-	return {
 
-        audio: audio,
 
-        video: video,
 
-        duration: duration
 
-      };
 
- }
 
- 
- window.onload = function() {
 
-    // var socketURL = 'wss://jmuxer-demo-server.herokuapp.com';
 
-	//socketURL = "ws://127.0.0.1:8080"
 
-	// socketURL = "ws://192.168.11.233:8080"
 
-	//socketURL = "ws://14.215.128.98:14112";
 
-	var socketURL = "ws://192.168.11.66:9101";
 
-	// socketURL = "ws://14.215.128.98:14077";
 
-	//socketURL = "wss://192.168.11.242:9104";
 
-
 
-	
-    var jmuxer = new JMuxer({
 
-        node: 'player',
 
-		flushingTime:15 ,
 
-        fps: 30,
 
-		mode:'video',
 
-        debug: false
 
-     });
 
-	 
-	 var audioMuxer = new JMuxer({
 
-        node: 'audioPlayer',
 
-		flushingTime:15,
 
-		clearBuffer: true,
 
-        fps: 60,//可以不选，原先43
 
-		mode:'audio',
 
-        debug: false
 
-     });
 
-		 
-	 curTime = new Date().getTime();	
-     var ws = new WebSocket(socketURL);
 
-     ws.binaryType = 'arraybuffer';
 
-	  
-	 //断开检测
 
-	 ws.onclose = function (e) {
 
-                alert("websocket连接断开");
 
-				console.log('websocket 断开: ' + e.code + ' ' + e.reason + ' ' + e.wasClean);
 
-				console.log(e);
 
-            }
 
-							
-	ws.addEventListener('open', function (event) {
 
-		console.log("发送配置帧");
 
-		ws.send(ConfigChannel("RK3923C1201900139"));
 
-	});
 
-	
-	ws.addEventListener('error', function (event) {
 
-		console.log("连接失败");
 
-	});
 
-	
-     ws.addEventListener('message',function(event) {
 
-		  var data = ParseProto(event.data);//JAVA服务器转发
 
-		  //console.log("收到数据");
 
-					
-		  var audioData = {
 
-			audio: data.audio,
 
-			video: null,
 
-			duration: data.duration
 
-		  };
 
-		  
-		  var videoData = {
 
-			audio: null,
 
-			video: data.video,
 
-			duration: data.duration
 
-		  };	  
-		 	 		
-		  if(myAudio.readyState == 2)
 
-		  {
 
-			requestTime = new Date().getTime();
 
-			isEnough = false;
 
-			console.log("数据存储不够，出现声音停止，时间差 %f", myAudio.buffered.end(0));
 
-			myAudio.pause();
 
-			//myAudio.playbackRate = 2;
 
-		  }
 
-		  else if(myAudio.readyState == 4 && isEnough== false)
 
-		  {
 
-				myAudio.play();
 
-				var time = new Date().getTime();
 
-				isEnough = true;
 
-				console.log("填满耗时 %d ms, 填充帧数 %d, 填充延迟 %d ms", time - requestTime, requestCount, requestCount * 23);
 
-			
-				console.log("----接收到启动 %d ms， 缓冲区 %f---", time - delayTime, myAudio.buffered.end(0) - myAudio.played.end(0));
 
-		  }
 
-		  
-		  if(data.audio != null)//喂音频
 
-		  {							
-			if(myAudio.buffered.length > 0 &&  myAudio.played.length > 0)
 
+
 
+			document.addEventListener("visibilitychange", () => {
 
+
 
+				if (document.visibilityState == "visible") {
 
+					console.log("页面可见，继续喂视频");
 
+					//requestTime = new Date().getTime();	
+					isVisuable = true;
 
+				} else {
 
+					isVisuable = false;
 
+					isFeed = false;
 
+					myVideo.pause();
 
+				}
 
+
 
+
 
+			});
 
+
 
+
 
+			myVideo.play();
 
+
 
+			myVideo.addEventListener('pause', function() {
 
+				//console.log("视频播放暂停");
 
+				isFeed = false;
 
+			});
 
+
 
+			myAudio.addEventListener('canplay', function() {
 
+				console.log("缓冲区大小 %f", myAudio.buffered.end(0) - myAudio.buffered.start(0));
 
+			});
 
+
 
+			/*function decodeAAC(data)
 
 			{
 
 			{
 
-				var bufferTime = myAudio.buffered.end(0) - myAudio.played.end(0);								
-				//console.log(" bufferTime %d", bufferTime);
 
+				var retPtr = Module._malloc(4 * 5 * 1024);//接收的数据
 
+				var inputPtr = Module._malloc(4 * data.length);//输入数据
 
+				
+				for( i =0;i < data.length;i++)
 
+				{
 
+					Module.HEAPU8[(inputPtr)+i] = data[i];//转换为堆数据
 
+				}
 
+				
+				var pcmLen = Module._feedData(retPtr, inputPtr, data.length);
 
 				
 				
-				if(bufferTime > 1)
 
+				if(pcmLen > 0)
 
 				{
 
 				{
 
-					//console.log("丢掉一些包");
 
-					//return;
 
+					//console.log("%d帧 aac 解码成功, %d", decodeCount, pcmLen);
 
+					var pcmData = new Uint8Array(pcmLen);		
+					for(i = 0;i < pcmLen;i++)
 
+					{
 
+						pcmData[i] = Module.HEAPU8[(retPtr)+i]
 
+					}
 
+					
+					player.feed(pcmData);
 
+				}
 
+				else
 
+				{
 
+					console.log("%d帧 aac 解码失败, %d", decodeCount, pcmLen);
 
 				}
 
 				}
 
+				
+				decodeCount++;
 
+				Module._free(inputPtr);
 
+				Module._free(retPtr);
 
+			}	*/
 
+
 
+
 
+			//解协议
 
+			function ParseProto(data) {
 
+				var temp = "";
 
+				var input = new Uint8Array(data),
 
+					duration,
 
+					video,
 
+					audio;
 
+
 
+				if (input[0] == 0 && input[1] == 0 && input[2] == 0 && input[3] == 1) {
 
+					// debugger
 
+					video = input;
 
+					duration = 24;
 
+					var nalType = input[4] & 0x1f; //nalType == 0x07|| nalType == 0x08 || nalType == 0x05
 
+
 
+					if (!isFeed) {
 
+						if (nalType == 0x05) {
 
+							console.log("发现I帧");
 
+						}
 
+
 
+						if (nalType == 0x05 && isVisuable) {
 
+							console.log("检测到I帧 %d，重新渲染, 耗时 %d ms", nalType, new Date().getTime() - requestTime);
 
+							isFeed = true;
 
+						}
 
+					}
 
+
 
+				} else if (input[0] == 0xff) {
 
+					if (!isEnough) {
 
+						requestCount++;
 
+						//audioBuffer.push(input);
 
+					}
 
+					audio = input;
 
+
 
+					if (new Date().getTime() - curTime > 100) {
 
+						delayTime = new Date().getTime();
 
+						console.log("接收时间 %d ms", new Date().getTime() - curTime);
 
+					}
 
+					curTime = new Date().getTime();
 
+					duration = 24;
 
+					//console.log("duration %d", duration);
 
+
 
+				} else if (input[0] == 0x68) {
 
+					if (input[23] == 0x05) //横竖屏标识
 
+					{
 
+						var state = CheckScreenDirection(input.slice(24, 24 + 8));
 
+
 
+						if (state == 1) {
 
+							console.log("安卓卡此时竖屏");
 
+							//竖屏处理
 
+						} else {
 
+							console.log("安卓卡此时横屏");
 
+							//横屏处理
 
+						}
 
+					}
 
+
 
+					if (input[23] == 0x0b) {
 
+						console.log("多端登陆");
 
+					}
 
+					//console.log("屏幕旋转 %s", PrintArry(input));
 
+				}
 
+
 
+				return {
 
+					audio: audio,
 
+					video: video,
 
+					duration: duration
 
+				};
 
 			}
 
 			}
 
-			
-			audioMuxer.feed(audioData);			
-		  }		  
-		  
-		  if(data.video != null)//喂视频
 
-		  {
 
-			 if(isFeed)
 
-			 {
 
-				jmuxer.feed(data);
 
-			 }
 
-			 
-			 //jmuxer.feed(videoData);
 
-		  }
 
-		   	 	 	 	  
-     });
 
-	 
-	
-	myVideo.onmousedown = function(event)
 
-    {
 
-		//放在此处只是为了方便演示，实际使用中查找横竖屏只要刚连接上时调用一次就好。	
-		//var checkBuffer = GetScreenState();
 
-		//ws.send(checkBuffer);
 
-
 
-		if(!isFeed)
 
-		{
 
-			console.log("重新申请I帧");
 
-			requestTime = new Date().getTime();			
-			var buffer = RequestIFrame();
 
-			//var buffer = new Uint8Array([0x01]);
 
-			ws.send(buffer);
 
-		}
 
-		
-		//console.log("报文 %s", PrintArry(buffer));
 
-		
-	
-		if(event.button == 0)
 
-		{
 
-			var posX = event.offsetX * 1080 *1.0/myVideo.clientWidth;
 
-			var posY = event.offsetY * 1920 *1.0/myVideo.clientHeight;
 
-			var buffer = ExexuteMouseDown(posX.toString(), posY.toString());
 
-			ws.send(buffer);
 
-			isDrag = true;
 
-		}
 
-			
-    }
 
-	
-	
-	myVideo.onmousemove = function(event)
 
-	{
 
-		if(isDrag && event.button == 0)
 
-		{
 
-			var posX = event.offsetX * 1080 *1.0/myVideo.clientWidth;
 
-			var posY = event.offsetY * 1920 *1.0/myVideo.clientHeight;
 
-			var buffer = ExexuteMouseMove(posX.toString(), posY.toString());
 
-			ws.send(buffer);
 
-			//console.log("移动位置 %d, %d", posX, posY);
 
-		}
 
-		
-	}
 
-	
-	myVideo.onmouseup = function(event)
 
-	{	
-		isDrag = false;
 
-		var posX = event.offsetX * 1080 *1.0/myVideo.clientWidth;
 
-		var posY = event.offsetY * 1920 *1.0/myVideo.clientHeight;
 
-		var buffer = ExexuteMouseUp(posX.toString(), posY.toString());
 
-		ws.send(buffer);
 
-		
-	}
 
-	
-	myVideo.onkeydown = function(event)
 
-	{	
-		ExexuteKeyDown(e.keyCode);
 
-	}
 
-	
- }  
-
 
-function Back()
 
-{	
-	if(event.button == 2)
 
-	{
 
-		//ExexuteKeyDown(4);
 
-	}
 
-	ExexuteKeyDown(4);
 
-	window.event.returnValue=false;  
-    return false;  
-}
 
- 
-</script>
 
-<script type="text/javascript" src="jmuxer.js"></script>
 
-<!--<script type="text/javascript" src="aac.js"></script>-->
 
-
 
-</body>
 
+
 
+			window.onload = function() {
 
+				// var socketURL = 'wss://jmuxer-demo-server.herokuapp.com';
 
+				//socketURL = "ws://127.0.0.1:8080"
 
+				// socketURL = "ws://192.168.11.233:8080"
 
+				//socketURL = "ws://14.215.128.98:14112";
 
+				var socketURL = "ws://192.168.11.66:9101";
 
+				// socketURL = "ws://14.215.128.98:14077";
 
+				//socketURL = "wss://192.168.11.242:9104";
 
+
 
+
 
+				var jmuxer = new JMuxer({
 
+					node: 'player',
 
+					flushingTime: 15,
 
+					fps: 30,
 
+					mode: 'video',
 
+					debug: false
 
+				});
 
+
 
+				var audioMuxer = new JMuxer({
 
+					node: 'audioPlayer',
 
+					flushingTime: 15,
 
+					clearBuffer: true,
 
+					fps: 60, //可以不选，原先43
 
+					mode: 'audio',
 
+					debug: false
 
+				});
 
+
 
+				curTime = new Date().getTime();
 
+				var ws = new WebSocket(socketURL);
 
+				ws.binaryType = 'arraybuffer';
 
+
 
+				//断开检测
 
+				ws.onclose = function(e) {
 
+					alert("websocket连接断开");
 
+					console.log('websocket 断开: ' + e.code + ' ' + e.reason + ' ' + e.wasClean);
 
+					console.log(e);
 
+				}
 
+
 
+				ws.addEventListener('open', function(event) {
 
+					console.log("发送配置帧");
 
+					ws.send(ConfigChannel("RK3923C1201900139"));
 
+				});
 
+
 
+				ws.addEventListener('error', function(event) {
 
+					console.log("连接失败");
 
+				});
 
+
 
+				ws.addEventListener('message', function(event) {
 
+					var data = ParseProto(event.data); //JAVA服务器转发
 
+					//console.log("收到数据");
 
+
 
+					var audioData = {
 
+						audio: data.audio,
 
+						video: null,
 
+						duration: data.duration
 
+					};
 
+
 
+					var videoData = {
 
+						audio: null,
 
+						video: data.video,
 
+						duration: data.duration
 
+					};
 
+
 
+					if (myAudio.readyState == 2) {
 
+						requestTime = new Date().getTime();
 
+						isEnough = false;
 
+						console.log("数据存储不够，出现声音停止，时间差 %f", myAudio.buffered.end(0));
 
+						myAudio.pause();
 
+						//myAudio.playbackRate = 2;
 
+					} else if (myAudio.readyState == 4 && isEnough == false) {
 
+						myAudio.play();
 
+						var time = new Date().getTime();
 
+						isEnough = true;
 
+						console.log("填满耗时 %d ms, 填充帧数 %d, 填充延迟 %d ms", time - requestTime, requestCount, requestCount * 23);
 
+
 
+						console.log("----接收到启动 %d ms， 缓冲区 %f---", time - delayTime, myAudio.buffered.end(0) - myAudio.played.end(0));
 
+					}
 
+
 
+					if (data.audio != null) //喂音频
 
+					{
 
+						if (myAudio.buffered.length > 0 && myAudio.played.length > 0) {
 
+							var bufferTime = myAudio.buffered.end(0) - myAudio.played.end(0);
 
+							//console.log(" bufferTime %d", bufferTime);
 
+
 
+							if (bufferTime > 1) {
 
+								//console.log("丢掉一些包");
 
+								//return;
 
+							}
 
+						}
 
+
 
+						audioMuxer.feed(audioData);
 
+					}
 
+
 
+					if (data.video != null) //喂视频
 
+					{
 
+						if (isFeed) {
 
+							jmuxer.feed(data);
 
+						}
 
+
 
+						//jmuxer.feed(videoData);
 
+					}
 
+
 
+				});
 
+
 
+
 
+				myVideo.onmousedown = function(event) {
 
+					//放在此处只是为了方便演示，实际使用中查找横竖屏只要刚连接上时调用一次就好。	
+					//var checkBuffer = GetScreenState();
 
+					//ws.send(checkBuffer);
 
+
 
+					if (!isFeed) {
 
+						console.log("重新申请I帧");
 
+						requestTime = new Date().getTime();
 
+						var buffer = RequestIFrame();
 
+						//var buffer = new Uint8Array([0x01]);
 
+						ws.send(buffer);
 
+					}
 
+
 
+					//console.log("报文 %s", PrintArry(buffer));
 
+
 
+
 
+					if (event.button == 0) {
 
+						var posX = event.offsetX * 1080 * 1.0 / myVideo.clientWidth;
 
+						var posY = event.offsetY * 1920 * 1.0 / myVideo.clientHeight;
 
+						var buffer = ExexuteMouseDown(posX.toString(), posY.toString());
 
+						ws.send(buffer);
 
+						isDrag = true;
 
+					}
 
+
 
+				}
 
+
 
+
 
+				myVideo.onmousemove = function(event) {
 
+					if (isDrag && event.button == 0) {
 
+						var posX = event.offsetX * 1080 * 1.0 / myVideo.clientWidth;
 
+						var posY = event.offsetY * 1920 * 1.0 / myVideo.clientHeight;
 
+						var buffer = ExexuteMouseMove(posX.toString(), posY.toString());
 
+						ws.send(buffer);
 
+						//console.log("移动位置 %d, %d", posX, posY);
 
+					}
 
+
 
+				}
 
+
 
+				myVideo.onmouseup = function(event) {
 
+					isDrag = false;
 
+					var posX = event.offsetX * 1080 * 1.0 / myVideo.clientWidth;
 
+					var posY = event.offsetY * 1920 * 1.0 / myVideo.clientHeight;
 
+					var buffer = ExexuteMouseUp(posX.toString(), posY.toString());
 
+					ws.send(buffer);
 
+
 
+				}
 
+
 
+				myVideo.onkeydown = function(event) {
 
+					ExexuteKeyDown(e.keyCode);
 
+				}
 
+
 
+			}
 
+
 
+			function Back() {
 
+				if (event.button == 2) {
 
+					//ExexuteKeyDown(4);
 
+				}
 
+				ExexuteKeyDown(4);
 
+				window.event.returnValue = false;
 
+				return false;
 
+			}
 
+		</script>
 
+		<script type="text/javascript" src="jmuxer.js"></script>
 
+		<!--<script type="text/javascript" src="aac.js"></script>-->
 
+
 
+	</body>
 
 </html>
 
 </html>

+ 745 - 0
screenIos/WXtrialInterface.html
View File 

@@ -0,0 +1,745 @@
 
+<!DOCTYPE html>
 
+<html>
 
+
 
+	<head>
 
+		<meta charset="utf-8">
 
+		<title></title>
 
+		<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" type="text/css" href="css/WXtrialInterface.css" />
 
+	</head>
 
+
 
+	<body class="scroll h-player" style="overscroll-behavior: contain;">
 
+
 
+		<div class="container" id="player">
 
+			<div class="muted" id="btnMuted">
 
+				<div class="control-right-img" data-id="1">
 
+					<img src="../static/img/xuanfu_icon.png">
 
+				</div>
 
+			</div>
 
+
 
+			<div id="wine">
 
+				<canvas id="playCanvas" width="450" height="800"></canvas>
 
+				<!-- <video id="video1" muted="muted" x5-video-orientation="landscape" playsinline="true" autoplay="true"
 
+				 webkit-playsinline="true" x5-playsinline="true" x5-video-player-type="h5" x5-video-player-fullscreen="false" style="pointer-events: none;"></video> -->
 
+				<div id="box"></div>
 
+			</div>
 
+			<div class="leftmains">
 
+				<div class="PictureQualityMain">
 
+					<div class="PictureQuality " data-id="3072000">高清</div>
 
+					<div class="PictureQuality avit" data-id="2243000">标清</div>
 
+					<div class="PictureQuality" data-id="400000">极速</div>
 
+					<div class="PictureQuality" data-id="400000">自动</div>
 
+				</div>
 
+
 
+				<div class="operation">
 
+					<div class="upload" id="showsuss" data-text="uploads">
 
+						<img src="../static/img/wx/shangchuan_icon.png">
 
+						<div>上传</div>
 
+					</div>
 
+					<div class="upload" onclick="cp(document.getElementById('user_ref_id'));" data-text="Shearplate">
 
+						<img src="../static/img/wx/jianqieban_icon.png">
 
+						<div>剪切板</div>
 
+					</div>
 
+					<div class="upload" id="upload" data-text="Signout">
 
+						<img src="../static/img/wx/tuichu_icon.png">
 
+						<div>退出</div>
 
+					</div>
 
+				</div>
 
+
 
+			</div>
 
+			<div class="bottommains">
 
+				<div class="botmat1">
 
+					<div class="botmat1img" data-text="gengduo">
 
+						<img src="../static/img/wx/gengduo_icon.png">
 
+					</div>
 
+
 
+				</div>
 
+				<div class="botmat1">
 
+					<div class="botmat1img" data-text="home">
 
+						<img src="../static/img/wx/home_icon.png">
 
+					</div>
 
+
 
+				</div>
 
+				<div class="botmat1">
 
+					<div class="botmat1img" data-text="return">
 
+						<img src="../static/img/wx/fanhui_icon.png">
 
+					</div>
 
+
 
+				</div>
 
+			</div>
 
+
 
+			<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="boximg"><img src="../static/img/wx/guanbi_icon.png"></div>
 
+			</div>
 
+
 
+			<div class="sbox" style="display: none;">
 
+				<div class="sboxText">下载地址已复制到剪切板</div>
 
+				<div class="sboxbu">确定</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.2.js"></script>
 
+		<script src="../static/js/jquery-1.11.0.min.js"></script>
 
+		<!-- ffm软解 -->
 
+		<script type="text/javascript" src="helper.js"></script>
 
+		<script type="text/javascript" src="pcm-player.js"></script>
 
+		<script type="text/javascript" src="webgl.js"></script>
 
+		<!--  音频-->
 
+		<!-- <script src="../static/js/classlist.js"></script>
 
+		<script src="../static/js/players.js"></script>
 
+		<script src="../static/js/auroraplayer.js"></script>
 
+		<script src="../static/js/aurora.js"></script>
 
+		<script src="../static/js/aac.js"></script>
 
+		<script src="../static/js/web.js?id=101"></script> -->
 
+		<!-- <script src="../static/js/webapk.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 src="https://cdn.bootcss.com/vConsole/3.2.0/vconsole.min.js"></script>
 
+		<script src="../static/distss/WXdraw.js?id=105"></script>
 
+
 
+		<script>
 
+			var topwinHeight = window.screen.height - window.innerHeight + 30; //计算title top 头部
 
+			$('#wine').css({
 
+				"width": window.screen.width,
 
+				"height": window.screen.height - topwinHeight - 20,
 
+				"position": "absolute",
 
+
 
+			})
 
+			var winese = document.createElement("wine");
 
+			wine.style.top = "-" + winese + 'px';
 
+
 
+			var url = window.location.href;
 
+			url = url.split('/')
 
+			// var baseUrl = window.location.href; //"http://192.168.31.20"
 
+			// var baseUrl = 'https://'+url[2] //url[2] //'http://192.168.31.159'//'http://' + url[2] 
+			var query = window.location.search.substring(1);
 
+			// query = "clientType=1&cardIp=14.215.128.96&port=2012&sn=RK3930C2301900012&demoTime=3600&id=377&diskName=SC93mBww"
 
+			var vars = query.split("&");
 
+			console.log(vars)
 
+			// var baseUrl = 'http://192.168.31.20'
 
+			var baseUrl = 'test.androidscloud.com'
 
+			var data = {}
 
+			//			 审核
 
+			$.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 clientType = vars.find(e => {
 
+				return e.startsWith('clientType')
 
+			}) || ''
 
+			// console.log(clientType)
 
+			data.clientType = clientType.substring(11, clientType.length)
 
+			//			小程序直接进入
 
+			var diskName = vars.find(e => {
 
+				return e.startsWith('diskName')
 
+			}) || ''
 
+
 
+			data.diskName = diskName.substring(9, diskName.length)
 
+
 
+			// document.title = decodeURI(data.diskName)
 
+			if (data.clientType == 1) {
 
+				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')
 
+				}) || ''
 
+
 
+
 
+				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)
 
+
 
+			} else if (data.clientType == 2) { //分享屏幕
 
+				console.log("走到分享屏幕里面啦==========", data.clientTypes);
 
+				$(".leftmains").css({
 
+					"right": "-4rem"
 
+				})
 
+				$('.leftmains').hide()
 
+				$('.bottommains').hide()
 
+				$('#btnMuted').hide()
 
+				let ip = vars.find(e => {
 
+					return e.startsWith('ip')
 
+				}) || ''
 
+				var username = vars.find(e => {
 
+					return e.startsWith('username')
 
+				}) || ''
 
+				var id = vars.find(e => {
 
+					return e.startsWith('id')
 
+				}) || ''
 
+				var userCardId = vars.find(e => {
 
+					return e.startsWith('userCardId')
 
+				}) || ''
 
+				data.id = id.substring(3, id.length)
 
+				data.username = username.substring(9, username.length)
 
+				data.ip = ip.substring(3, ip.length)
 
+				data.userCardId = userCardId.substring(11, userCardId.length)
 
+			} else {
 
+				// $(".leftmains").css({
 
+				// 					"right":"-4rem"
 
+				// 				})
 
+				// 	$('.leftmains').hide()
 
+				// 	$('.bottommains').hide()
 
+				// 	$('#btnMuted').hide()
 
+				var username = vars.find(e => {
 
+					return e.startsWith('username')
 
+				}) || ''
 
+
 
+				var userCardId = vars.find(e => {
 
+					return e.startsWith('userCardId')
 
+				}) || ''
 
+				data.username = username.substring(9, username.length)
 
+				data.userCardId = userCardId.substring(11, userCardId.length)
 
+				console.log(data.ip)
 
+			}
 
+
 
+
 
+			//           心跳
 
+			//			var time = 1000 * 30;
 
+			//			var interval;
 
+			//			fun()
 
+			//
 
+			//			function run() {
 
+			//
 
+			//				interval = setInterval(fun, time);
 
+			//			}
 
+			//
 
+			//			function fun() {
 
+			//				$.ajax({
 
+			//					url: baseUrl + "/api/game/v1/cloudGame/dev/get/cardSn",
 
+			//					data: {
 
+			//						sn: data.sn
 
+			//					},
 
+			//					type: 'get',
 
+			//					dataType: 'json',
 
+			//					success: function(data) {
 
+			//
 
+			//					}
 
+			//				})
 
+			//
 
+			//			};
 
+			//			run();
 
+			// data.clientType=1
 
+			// data.sn="RK3930C2301900044"
 
+			// data.cardIp="14.215.128.96"
 
+			// data.port=2044
 
+
 
+			var orientation = 0 //0 竖屏，1横屏
 
+			var winHeight = window.screen.height - window.innerHeight
 
+			// var urlss = url[2]
 
+			// var urlss='192.168.31.20'
 
+			// var urlss = "14.215.128.96"
 
+			var urlss = 'test.androidscloud.com'
 
+			document.body.addEventListener('touchmove', function(e) {
 
+				e.preventDefault()
 
+			}, {
 
+				passive: false
 
+			})
 
+
 
+			// 
+			// urlss = "14.215.128.96"
 
+			// console.log()
 
+			// data.clientType = 1
 
+			// data.sn="RK3930C2301900044"
 
+			// data.cardIp="14.215.128.96"
 
+			// data.port=2044
 
+			// if (data.clientType == 3) {
 
+			// 	var players = AV.Player.fromWebSocket("wss://" + urlss + '/authVideoWebSocket?' + "clientType=" + data.clientType +
 
+			// 		"&username=" + data.username + "&userCardId=" + data.userCardId);
 
+			// } else if (data.clientType == 2) {
 
+			// 	// var players = AV.Player.fromWebSocket("wss://" + urlss + '/shareWebSocket?' + "clientType=" + data.clientType +
 
+			// 	// 	"&username=" + data.username + "&userCardId=" + data.userCardId + "&ip=" + data.ip);
 
+
 
+			// 	var players = AV.Player.fromWebSocket(
 
+			// 		"wss://test.androidscloud.com/videoWebSocket?clientType=1&cardIp=14.215.128.96&port=2005&sn=RK3930C2301900005");
 
+			// } else {
 
+			// 	var players = AV.Player.fromWebSocket("wss://" + urlss + '/videoWebSocket?' + "clientType=" + data.clientType +
 
+			// 		"&cardIp=" + data.cardIp + "&port=" + data.port + "&sn=" + data.sn);
 
+			// }
 
+			// // 			debugger
 
+			// var players = AV.Player.fromWebSocket('ws://14.215.128.96/authVideoWebSocket?clientType=3&username=WqXTc1593762177&userCardId=377');
 
+			// players.play();
 
+			// players.volume = 100
 
+			//var players = AV.Player.fromWebSocket('ws://14.215.128.96/videoWebSocket?clientType=0&cardIp=30.30.30.58&port=9100&sn=RK3930C2301900060');
 
+
 
+			var warid = {
 
+				id: data.id,
 
+				type: 1,
 
+				sn: data.sn
 
+			}
 
+			//结束时间 type=2
 
+			var warids = {
 
+				id: data.id,
 
+				type: 2,
 
+				sn: data.sn
 
+			}
 
+
 
+			//			$.ajax({})
 
+
 
+			// 关闭浏览器
 
+			//			window.onbeforeunload = function() {}
 
+
 
+			//撤销的array
 
+			var cancelList = new Array();
 
+			//撤销的次数
 
+			var cancelIndex = 0;
 
+			var inputType = 0 //输入类型 0:手写，1:键盘输入
 
+			//判断是否ie
 
+			var IE_HACK = (/msie/i.test(navigator.userAgent) &&
 
+				!/opera/i.test(navigator.userAgent));
 
+			//			云手机相关逻辑	 
+			// var player = new Player({
 
+			// 	size: {
 
+			// 		width: 1280,
 
+			// 		height: 720
 
+			// 	}
 
+			// });
 
+			// var secanv = document.getElementById("wine");
 
+
 
+			// secanv.appendChild(player.canvas);
 
+			// console.log("player=========>>>>", player);
 
+			// console.log("secanv>>>>", secanv);
 
+			//             &cardIp="+data.data.extranetIp+"&port="+data.data.extranetPort+"&sn="+data.data.sn
 
+
 
+			$(function() {
 
+				initCanvas();
 
+			});
 
+			//初始化
 
+			var initCanvas = function() {
 
+
 
+			}
 
+
 
+			window.onload = function() {};
 
+
 
+			$("#voew").on("click", function() {})
 
+
 
+			$("#box").on("click", function() {
 
+				//				draw_graph('pencil', this)
 
+
 
+			})
 
+
 
+			console.log(player)
 
+			$('#mocan').on('click', function() {
 
+				draw_graph('pencil', this)
 
+			})
 
+
 
+			// //初始化一下就可以了，
 
+			let vConsole = new VConsole();
 
+			//			 //你打印的数据 比如
 
+			console.log('test');
 
+			//就可像小程序一样的看了和调试了。
 
+			$('.no-ne-an').on('click', function() {
 
+				//结束时间 type=2
 
+				let warids = {
 
+					id: data.id,
 
+					type: 2,
 
+					sn: data.sn
 
+				}
 
+				$.ajax({
 
+					url: baseUrl + "/api/game/v1/cloudGame/dev/getSn",
 
+					data: warid,
 
+					type: 'get',
 
+					dataType: 'json',
 
+					success: function(data) {
 
+						history.go(-1)
 
+						if (data.status == 0) {
 
+
 
+						} else {
 
+							alert(data.msg)
 
+						}
 
+						//
 
+					}
 
+				})
 
+			})
 
+
 
+			var btnMuted = document.querySelector("#btnMuted");
 
+			btnMuted && (function() {
 
+				var setHistory = function(left, top) {
 
+					try {
 
+						localStorage.setItem("muted-btn-loc", JSON.stringify({
 
+							left: left,
 
+							top: top
 
+						}));
 
+					} catch (ex) {}
 
+				};
 
+				var getHistory = function() {
 
+					try {
 
+						var value = localStorage.getItem("muted-btn-loc");
 
+						if (!value) return null;
 
+						value = JSON.parse(value);
 
+						if (!value) return null;
 
+						return value;
 
+					} catch (ex) {
 
+						return null
 
+					}
 
+				};
 
+				var fixLoc = function(loc) {
 
+					var rect = btnMuted.getBoundingClientRect();
 
+					rect = {
 
+						top: rect.top,
 
+						left: rect.left,
 
+						width: rect.width,
 
+						height: rect.height
 
+					}; //部分低版本浏览器,该属性为只读
 
+					if (loc) {
 
+						rect.left = loc.left;
 
+						rect.top = loc.top;
 
+					}
 
+					var minX = 0;
 
+					var minY = 0;
 
+					var docRect = document.documentElement.getBoundingClientRect();
 
+					var maxY = docRect.height - rect.height;
 
+					var maxX = docRect.width - rect.width;
 
+					var left = rect.left;
 
+					var top = rect.top;
 
+					left = Math.min(left, maxX);
 
+					left = Math.max(left, minX);
 
+					top = Math.min(top, maxY);
 
+					top = Math.max(top, minY);
 
+					console.log(rect.top, top, loc);
 
+					if (loc || top !== rect.top || left !== rect.left) {
 
+						btnMuted.style.cssText += "left:" + left + "px;top:" + top + "px;";
 
+					}
 
+				}
 
+				window.addEventListener("resize", function() {
 
+					fixLoc();
 
+				});
 
+				var touchPoint = {
 
+					pageY: 0,
 
+					pageX: 0
 
+				};
 
+				var currentLoc = {
 
+					top: 0,
 
+					left: 0,
 
+					curTop: 0,
 
+					curLeft: 0
 
+				};
 
+				var toMove = false;
 
+				var touchmove = function(e) {
 
+					e.preventDefault();
 
+					var point = e.changedTouches[0];
 
+					var top = -touchPoint.pageY + point.pageY;
 
+					var left = -touchPoint.pageX + point.pageX;
 
+					if (toMove) {
 
+						top += currentLoc.top;
 
+						left += currentLoc.left;
 
+						currentLoc.curLeft = left;
 
+						currentLoc.curTop = top;
 
+						btnMuted.style.cssText += "left:" + left + "px;top:" + top + "px;";
 
+					} else {
 
+						if (Math.abs(top) >= 5 || Math.abs(left) >= 5) {
 
+							toMove = true;
 
+						}
 
+					}
 
+
 
+				};
 
+				var touchend = function() {
 
+					window.removeEventListener("touchmove", touchmove, {
 
+						passive: false
 
+					});
 
+					window.removeEventListener("touchend", touchend, {
 
+						passive: false
 
+					});
 
+
 
+					if (toMove) {
 
+						setHistory(currentLoc.curLeft, currentLoc.curTop);
 
+						fixLoc();
 
+					} else {
 
+						//按点击处理
 
+
 
+						var set = $('.control-right-img').attr("data-id")
 
+						if (set == '1') {
 
+							$('.control-right-img').attr({
 
+								"data-id": "2"
 
+							})
 
+							//							$('.control-right-img').find('img').attr({
 
+							//								"src": "../static/img/musicturn.png"
 
+							//							})
 
+							players.volume = 100
 
+							$(".leftmains").css({
 
+								"right": "-4rem"
 
+							})
 
+							// console.log(players)
 
+							// players.play();
 
+						} else {
 
+
 
+							$('.control-right-img').attr({
 
+								"data-id": "1"
 
+							})
 
+
 
+							$(".leftmains").css({
 
+								"right": "0rem"
 
+							})
 
+							//							$('.control-right-img').find('img').attr({
 
+							//								"src": "../static/img/musicfalse.png"
 
+							//							})
 
+							players.volume = 0
 
+							// players.off('pause');
 
+							// players.pause();
 
+							// var embed = document.embedPlay;
 
+							console.log(players, "fdsfdsf")
 
+						}
 
+					}
 
+				}
 
+				btnMuted.addEventListener("touchstart", function(e) {
 
+					e.preventDefault();
 
+					toMove = false;
 
+					var point = e.changedTouches[0];
 
+					touchPoint.pageX = point.pageX;
 
+					touchPoint.pageY = point.pageY;
 
+					var rect = e.target.getBoundingClientRect();
 
+					currentLoc.top = rect.top;
 
+					currentLoc.left = rect.left;
 
+					window.addEventListener("touchmove", touchmove, {
 
+						passive: false
 
+					});
 
+					window.addEventListener("touchend", touchend, {
 
+						passive: false
 
+					});
 
+
 
+				}, {
 
+					passive: false
 
+				});
 
+				var history = getHistory();
 
+				if (history) {
 
+					fixLoc(history);
 
+				}
 
+				btnMuted.classList.remove("hide");
 
+			})();
 
+
 
+			$(".boximg").on("click", function() {
 
+				$(".mainbox").css({
 
+					"display": "none"
 
+				})
 
+			})
 
+
 
+			//			剪切板
 
+			$(".sboxbu").on("click", function() {
 
+				$(".sbox").css({
 
+					"display": "none"
 
+				})
 
+			})
 
+			//			剪切板
 
+			$(".uploadss").on("click", function() {
 
+				$(".sbox").css({
 
+					"display": "none"
 
+				})
 
+			})
 
+
 
+			$("#upload").on("click", function() {
 
+				wx.miniProgram.switchTab({
 
+					url: '/pages/home/home'
 
+				})
 
+			})
 
+
 
+
 
+
 
+
 
+
 
+			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");
 
+
 
+			}
 
+
 
+
 
+
 
+
 
+			var decodeWoker = new Worker('decoder.js');
 
+			var myVideo = document.getElementById("playCanvas");
 
+			decodeWoker.onmessage = function(event) {
 
+				console.log("decodeWoker.onmessage")
 
+				var objData = event.data;
 
+
 
+				switch (objData.cmd) {
 
+					case 0:
 
+						console.log(objData.data);
 
+						break;
 
+					case 1:
 
+						var time = new Date().getTime();
 
+						webglPlayer.renderFrame(objData.data, 720, 1280, 720 * 1280, (720 / 2) * (1280 / 2));
 
+						//console.log("渲染耗时", new Date().getTime() - time + "ms");break;
 
+				}
 
+
 
+			}
 
+
 
+
 
+			if (typeof(Worker) !== "undefined") {
 
+				console.log("支持webworker");
 
+			} else {
 
+				alert("不支持webworker");
 
+			}
 
+
 
+			var isFinish = false;
 
+			this.canvas = document.getElementById("playCanvas");
 
+			var webglPlayer = new WebGLPlayer(this.canvas, {
 
+				preserveDrawingBuffer: false
 
+			});
 
+
 
+
 
+			var webSocketWorker = new Worker('websocket.js');
 
+			var startTime = new Date().getTime();
 
+
 
+
 
+
 
+			webSocketWorker.onmessage = function(event) {
 
+				console.log("event.data", event.data)
 
+				decodeWoker.postMessage(event.data);
 
+			}
 
+
 
+			document.addEventListener("visibilitychange", () => {
 
+				if (document.visibilityState == "visible") {
 
+
 
+				} else {
 
+					console.log("页面不可见");
 
+				}
 
+			});
 
+
 
+			function Close() //webworker 关闭,清理
 
+			{
 
+				var cmd = {
 
+					cmd: 0
 
+				};
 
+				decodeWoker.postMessage(cmd);
 
+				decodeWoker.terminate();
 
+				webSocketWorker.postMessage(cmd);
 
+				webSocketWorker.terminate();
 
+			}
 
+			myVideo.onmousedown = function(event) {
 
+				console.log("22222")
 
+				//放在此处只是为了方便演示，实际使用中查找横竖屏只要刚连接上时调用一次就好。	
+				//var checkBuffer = GetScreenState();
 
+				//ws.send(checkBuffer);
 
+
 
+				/*if(!isFeed)
 
+				{
 
+					console.log("重新申请I帧");
 
+					requestTime = new Date().getTime();			
+					var buffer = RequestIFrame();
 
+					ws.send(buffer);
 
+				}*/
 
+
 
+				//console.log("报文 %s", PrintArry(buffer));
 
+
 
+
 
+				if (event.button == 0) {
 
+					var posX = event.offsetX * 1080 * 1.0 / myVideo.clientWidth;
 
+					var posY = event.offsetY * 1920 * 1.0 / myVideo.clientHeight;
 
+					var buffer = ExexuteMouseDown(posX.toString(), posY.toString());
 
+					// ws.send(buffer);
 
+					// decodeWoker.postMessage(event.data);
 
+					console.log("打印buffer", PrintArry(buffer))
 
+					decodeWoker.postMessage(buffer);
 
+					isDrag = true;
 
+				}
 
+
 
+			}
 
+		</script>
 
+
 
+	</body>
 
+
 
+</html>

+ 340 - 0
screenIos/css/WXtrialInterface.css
View File 

@@ -0,0 +1,340 @@
 
+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;
 
+			}

+ 2 - 2
screenIos/websocket.js
View File 

@@ -1,7 +1,7 @@
 
 self.importScripts("helper.js");  
 self.importScripts("helper.js");  
 // self.importScripts("pcm-player.js");
 
 // self.importScripts("pcm-player.js");
 
 // self.importScripts("pcm-player.min.js");   
 // self.importScripts("pcm-player.min.js");   
-var socketURL = "ws://192.168.11.66:9101";
 
+var socketURL = "ws://192.168.198.11:9101";
 
 // var socketURL = "ws://14.215.128.98:14102"
 
 // var socketURL = "ws://14.215.128.98:14102"
 
 // socketURL = "ws://127.0.0.1:8081"
 
 // socketURL = "ws://127.0.0.1:8081"
 
 
 
@@ -22,7 +22,7 @@ ws.addEventListener('message', function(event) {
 
 
 
 	if (input[0] == 0xff) {
 
 	if (input[0] == 0xff) {
 
 		console.log("1111111")
 
 		console.log("1111111")
 
-		decodeAAC(input);
 
+		// decodeAAC(input);
 
 
 
 	} else {
 
 	} else {
 
 		self.postMessage(input);
 
 		self.postMessage(input);