Parcourir la source

修改云手机推流指令

wuyongxiang il y a 4 ans
Parent
commit
8295fe99b7

+ 405 - 0
screenAndroid/WXdraw.js

@@ -0,0 +1,405 @@
+//画布
+var canvas;
+var context;
+//蒙版
+var canvas_bak = document.getElementById("box");;
+var context_bak;
+
+var canvasWidth = 720;
+var canvasHeight = 1280;
+
+var canvasTop;
+var canvasLeft;
+var winHeight = window.screen.height - window.innerHeight
+var vowidth = window.screen.width
+var topwinHeightDraw = window.screen.height - window.innerHeight + 30; //计算title top 头部
+var numse = window.screen.height //-winHeight
+
+//计算title top 头部
+if (numse <= 70) {
+
+	var voheight = window.screen.height - winHeight - 34 - 20
+} else {
+	console.log("numse>>>", numse)
+	var voheight = window.screen.height - topwinHeightDraw - 20
+}
+
+//console.log("画笔大小>>>",window.innerHeight)
+//画笔大小
+var size = 1;
+var color = '#000000';
+var resolving
+//alert(winHeight)
+var url = window.location.href;
+url = url.split('/')
+
+var query = window.location.search.substring(1);
+// debugger
+// query = "clientType=3&username=WqXTc1593762177&userCardId=377"
+// debugger
+var vars = query.split("&");
+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 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')
+}) || ''
+
+var data = {}
+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.username = username.substring(9, username.length)
+data.userCardId = userCardId.substring(11, userCardId.length)
+data.ip = ip.substring(3, ip.length)
+// var urlss=url[2]
+// urlss = "14.215.128.96"
+urlss = '192.168.31.20'
+// urlss = 'test.androidscloud.com'
+// debugger
+// var cUrl = ''
+// cUrl = "ws://192.168.11.66:9101";
+// var cUrl="wss://www.ted2018.com:9101"
+var cUrl = "ws://192.168.198.11:9101"
+// if (data.clientType == 3) {
+// 	cUrl = "wss://" + urlss + "/authControlWebSocket?" + "clientType=" + data.clientType + "&username=" + data.username +
+// 		"&userCardId=" + data.userCardId
+// } else if (data.clientType == 2) {
+// 	// cUrl = "wss://" + urlss + "/shareWebSocket?" + "clientType=" + data.clientType + "&username=" + data.username +
+// 	// 	"&userCardId=" + data.userCardId + "&ip=" + data.ip
+// 	cUrl = "wss://test.androidscloud.com/videoWebSocket?clientType=1&cardIp=14.215.128.96&port=2005&sn=RK3930C2301900005";
+// } else {
+// 	cUrl = "wss://" + urlss + "/controlWebSocket?" + "clientType=" + data.clientType + "&cardIp=" + data.cardIp + "&port=" +
+// 		data.port + "&sn=" + data.sn
+// }
+console.log(cUrl, 'curl')
+// var cUrl = Number(data.clientType) === 3? "ws://"+urlss+"/authControlWebSocket?"+"clientType="+data.clientType+"&username="+data.username+"&userCardId="+data.userCardId : "ws://"+urlss+"/controlWebSocket?"+"clientType="+data.clientType+"&cardIp="+data.cardIp+"&port="+data.port+"&sn="+data.sn
+var wsss = new WebSocket(cUrl);
+console.log('wsssss==============', wsss)
+wsss.binaryType = 'arraybuffer';
+////
+// wsss = new WebSocket(
+// 	"ws://14.215.128.96/authControlWebSocket?clientType=3&username=WqXTc1593762177&userCardId=377");
+
+wsss.onopen = function() {
+	console.log("onopen==============");
+	var pings = {
+		"event": "getScreenStatus"
+	}
+	wsss.send(JSON.stringify(pings));
+	var bitRate = {
+		"data": {
+			"bitRate": 2243000
+		},
+		"event": "bitRate"
+	}
+	wsss.send(JSON.stringify(bitRate));
+};
+wsss.onmessage = function(event) {
+	// console.log("onMessage==============", event);
+	// var resets = JSON.parse(event.data)
+	// var resets = event.data;
+	// resets.errorMsg && alert(resets.errorMsg)
+	// resolving = resets.data.orientation
+	// if (resolving == 1) {} else {}
+	// console.log('>>>resolvingresolvingresolving', resolving)
+
+};
+wsss.onclose = function(event) {
+	console.log("onclose==============");
+};
+wsss.onerror = function(event) {
+	console.log("onerror==============");
+};
+$('#box').on("click", function() {
+
+	draw_graph('pencil', this)
+})
+//剪切板
+$(".upload").on("click", function() {
+	let texts = $(this).attr("data-text")
+	if (texts == "uploads") {
+		$(".mainbox").css({
+			"display": "block"
+		})
+		$(".sbox").css({
+			"display": "none"
+		})
+	} else if (texts == "Signout") {
+		//		alert()
+
+	}
+})
+
+//home 控制home
+$(".botmat1img").on("click", function() {
+	let codes = $(this).attr("data-text")
+	console.log(codes)
+	if (codes == "home") {
+		var bitRate = {
+			"data": {
+				"keyCode": "3"
+			},
+			"event": "keyCode"
+		}
+		console.log("打印主页json", JSON.stringify(bitRate))
+		wsss.send(JSON.stringify(bitRate));
+		console.log("打印主页json", wsss)
+	} else if (codes == "return") {
+		var bitRate = {
+			"data": {
+				"keyCode": "4"
+			},
+			"event": "keyCode"
+		}
+		wsss.send(JSON.stringify(bitRate));
+	} else if (codes == "gengduo") {
+		var bitRate = {
+			"data": {
+				"keyCode": "187"
+			},
+			"event": "keyCode"
+		}
+		wsss.send(JSON.stringify(bitRate));
+	}
+
+})
+//高清控制
+$(".PictureQuality").on("click", function() {
+	$(this).addClass("avit").siblings().removeClass('avit')
+	let id = $(this).attr("data-id")
+	var bitRate = {
+		"data": {
+			"bitRate": id
+		},
+		"event": "bitRate"
+	}
+	wsss.send(JSON.stringify(bitRate));
+	console.log(id)
+})
+
+//画图形
+var draw_graph = function(graphType, obj) {
+	console.log('111》》》', graphType)
+	//把蒙版放于画板上面
+	//$("#canvas_bak").css("z-index",1);
+	$("#container").css("z-index", 30);
+	$("#dedit").css("z-index", 20);
+	//先画在蒙版上 再复制到画布上
+
+	chooseImg(obj);
+	var canDraw = false;
+
+	var startX;
+	var startY;
+
+	//鼠标按下获取 开始xy开始画图
+	var touchstart = function(e) {
+		$('.control-right-img').attr({
+			"data-id": "2"
+		})
+		$(".leftmains").css({
+			"right": "-4rem"
+		})
+		//		.toFixed(2)
+		var touchfor = e.originalEvent.targetTouches; //for 的手指数组
+		var touch = e.originalEvent.targetTouches[0];
+		var thochlethng = e.originalEvent.targetTouches.length
+		//是否横屏
+		if (resolving == 0) {
+			let ping
+			for (let i = 0; i < touchfor.length; i++) {
+				let cawidthXs = touchfor[i].pageY * (1280 / voheight)
+				let caheightYs = 720 - touchfor[i].pageX * (720 / vowidth)
+				ping = {
+					"data": {
+						"action": 0,
+						"count": touchfor.length,
+						"pointerId": i,
+						"x": cawidthXs.toFixed(2),
+						"y": caheightYs.toFixed(2)
+					},
+					"event": "0"
+				}
+			}
+			wsss.send(JSON.stringify(ping));
+			console.log("鼠标按下>>>", ping)
+		} else {
+			let ping
+			for (let i = 0; i < touchfor.length; i++) {
+				let cawidthXs = touchfor[i].pageX * (720 / vowidth)
+				let caheightYs = touchfor[i].pageY * (1280 / voheight)
+				ping = {
+					"data": {
+						"action": 0,
+						"count": touchfor.length,
+						"pointerId": i,
+						"x": cawidthXs.toFixed(2),
+						"y": caheightYs.toFixed(2)
+					},
+					"event": "0"
+				}
+
+			}
+			wsss.send(JSON.stringify(ping));
+			console.log("鼠标按下>>>", ping)
+		}
+
+		canDraw = true;
+
+	};
+
+	//鼠标离开 把蒙版canvas的图片生成到canvas中
+	var touchend = function(e) {
+		var touchfor = e.originalEvent.changedTouches; //for 的手指数组
+		var touch = e.originalEvent.changedTouches[0];
+		var thochlethng = e.originalEvent.changedTouches.length
+		//	 alert(thochlethng)
+		//是否横屏 morePortionUp
+		if (resolving == 0) {
+			let ping
+			for (let i = 0; i < touchfor.length; i++) {
+				let cawidthXs = touchfor[i].pageY * (1280 / voheight)
+				let caheightYs = 720 - touchfor[i].pageX * (720 / vowidth)
+				ping = {
+					"data": {
+						"action": 1,
+						"count": touchfor.length,
+						"pointerId": i,
+						"x": cawidthXs.toFixed(2),
+						"y": caheightYs.toFixed(2)
+					},
+					"event": "1"
+				}
+			}
+
+			wsss.send(JSON.stringify(ping));
+
+		} else {
+			let ping
+			for (let i = 0; i < touchfor.length; i++) {
+				let cawidthXs = touchfor[i].pageX * (720 / vowidth)
+				let caheightYs = touchfor[i].pageY * (1280 / voheight)
+				ping = {
+					"data": {
+						"action": 1,
+						"count": touchfor.length,
+						"pointerId": i,
+						"x": cawidthXs.toFixed(2),
+						"y": caheightYs.toFixed(2)
+					},
+					"event": "1"
+				}
+			}
+
+			wsss.send(JSON.stringify(ping));
+		}
+
+		canDraw = false;
+
+	};
+
+	//清空层 云手机超出屏幕的开关
+	var clearContext = function(type) {
+		canDraw = false;
+	}
+
+	// 鼠标移动
+	var touchmove = function(e) {
+
+		e = e || window.event;
+		var touchfor = e.originalEvent.targetTouches; //for 的手指数组
+		var touch = e.originalEvent.targetTouches[0];
+		var thochlethng = e.originalEvent.targetTouches.length
+		let ping
+		//是否横屏  morePortionMove
+		if (resolving == 0) {
+			let obj = []
+			for (let i = 0; i < touchfor.length; i++) {
+				let cawidthXs = touchfor[i].pageY * (1280 / voheight)
+				let caheightYs = 720 - touchfor[i].pageX * (720 / vowidth)
+
+				ping = {
+					"data": {
+						"action": 2,
+						"count": touchfor.length,
+						"pointerId": i,
+						"x": cawidthXs.toFixed(2),
+						"y": caheightYs.toFixed(2)
+					},
+					"event": "2"
+				}
+
+			}
+
+			wsss.send(JSON.stringify(ping));
+		} else {
+			let ping
+			for (let i = 0; i < touchfor.length; i++) {
+				let cawidthXs = touchfor[i].pageX * (720 / vowidth)
+				let caheightYs = touchfor[i].pageY * (1280 / voheight)
+				ping = {
+					"data": {
+						"action": 2,
+						"count": touchfor.length,
+						"pointerId": i,
+						"x": cawidthXs.toFixed(2),
+						"y": caheightYs.toFixed(2)
+					},
+					"event": "2"
+				}
+
+			}
+
+			wsss.send(JSON.stringify(ping));
+		}
+
+
+
+		//				var ping = {"data":{"action":2,"count":1,"pointerId":0,"x":cawidthX.toFixed(2),"y":caheightY.toFixed(2)},"event":"2"}	    
+
+
+
+	};
+
+	//鼠标离开区域以外 除了涂鸦 都清空
+	var mouseout = function() {
+
+		if (graphType != 'handwriting') {
+			clearContext();
+
+		}
+	}
+
+	$(canvas_bak).unbind();
+	$(canvas_bak).bind('touchstart', touchstart);
+	$(canvas_bak).bind('touchmove', touchmove);
+	$(canvas_bak).bind('touchend', touchend);
+	$(canvas_bak).bind('mouseout', mouseout);
+}
+
+//选择功能按钮 修改样式
+function chooseImg(obj) {
+
+}

+ 30 - 29
screenAndroid/WXtrialInterface.html

@@ -58,17 +58,19 @@
 					<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"> -->
+			<div id="wine">
 
-			<!-- <video id="video1" muted="muted" x5-video-orientation="landscape" playsinline="true" autoplay="true"
+				<!-- <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 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 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;width: 100%;height:100%"
+				 disablePictureInPicture="true" autoplay poster="images/loader-thumb.jpg" id="playerVideo"></video>
+				<div id="box"></div>
+				<audio preload="auto" autoplay controls poster="images/loader-thumb.jpg" id="audioPlayer" style="position: absolute;top: 0;width: 0;height: 0;"></audio>
+			</div>
+
+
 			<div class="leftmains">
 				<div class="PictureQualityMain">
 					<div class="PictureQuality " data-id="3072000">高清</div>
@@ -132,6 +134,7 @@
 			</div>
 
 		</div>
+
 		<body oncontextmenu="Back()">
 		</body>
 		<div id="copy-txt" style="position: absolute;opacity: 0;">
@@ -156,9 +159,19 @@
 		<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 src="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';
+
 			//隐藏控件 controls
 			var fpsCount = 0;
 			var requestCount = 0;
@@ -214,9 +227,9 @@
 				isFeed = false;
 			});
 
-			myAudio.addEventListener('canplay', function() {
-				console.log("缓冲区大小 %f", myAudio.buffered.end(0) - myAudio.buffered.start(0));
-			});
+			// myAudio.addEventListener('canplay', function() {
+			// 	console.log("缓冲区大小 %f", myAudio.buffered.end(0) - myAudio.buffered.start(0));
+			// });
 
 			/*function decodeAAC(data)
 			{
@@ -424,17 +437,17 @@
 
 				});
 
-				var myPlay = document.getElementById("player");
+				var myPlay = document.getElementById("wine");
 				myPlay.onmousedown = function(event) {
 					console.log('5555555555')
 					if (event.button == 0) {
 						var posX = event.offsetX * 720 * 1.0 / myVideo.clientWidth;
 						var posY = event.offsetY * 1280 * 1.0 / myVideo.clientHeight;
 						var buffer = ExexuteMouseDown(posX.toString(), posY.toString());
-						console.log('posX=======posY', posX, posY)
-						console.log('buffer=======', buffer)
+						// console.log('posX=======posY', posX, posY)
+						// console.log('buffer=======', buffer)
 						ws.send(buffer);
-                        console.log('ws', ws)
+						console.log('ws', ws)
 						isDrag = true;
 					}
 
@@ -478,15 +491,7 @@
 				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('/')
@@ -939,10 +944,6 @@
 				})
 			})
 
-
-
-
-
 			function selectText(x) {
 				if (document.selection) {
 					var range = document.body.createTextRange();

+ 161 - 0
screenAndroid/control.js

@@ -0,0 +1,161 @@
+/**
+ * 此文件实现将控制命令封装成协议,具体协议内容请看:
+ * 链接:http://note.youdao.com/noteshare?id=dabda6c613adef7a416bd2625cd770a1
+ */
+
+/**
+ * bcc校验码计算
+ * arry: 要计算的数组
+ * 返回计算协议中校验位的校验码
+ */
+export function calBcc(arry) {
+  var bcc = 0
+  for (let i = 0; i < arry.length; i++) {
+    bcc ^= arry[i]
+  }
+  return bcc
+}
+
+// 数组打印,调试用
+export function PrintArry(data) {
+  var str = ''
+
+  for (let i = 0; i < data.length; i++) {
+    str = str + data[i].toString(16).padStart(2, '0')
+  }
+
+  str = str.toUpperCase()
+  return str
+}
+/**
+ * @param {*} sn: 板卡sn号,stirng
+ * @param {*} dataType:数据类型,数字
+ * @param {*} jsonCmd: json命令
+ * 返回值:生成一个Uint8Array,通过websocket发送给板卡
+ */
+export function makeFrame(sn, dataType, jsonCmd) {
+  var index = 0
+  var dataLen = jsonCmd.length
+  var frameLen = dataLen + 26
+  var outPut = new Uint8Array(frameLen)
+  outPut[index++] = 0x68
+  outPut[index++] = (dataLen & 0xff000000) >> 24
+  outPut[index++] = (dataLen & 0x00ff0000) >> 16
+  outPut[index++] = (dataLen & 0x0000ff00) >> 8
+  outPut[index++] = dataLen & 0x000000ff
+  outPut[index++] = 0 // 类型为client
+
+  // sn号赋值,string转ascii
+  for (let i = 0; i < sn.length; i++) {
+    outPut[index++] = sn[i].charCodeAt()
+  }
+
+  outPut[index++] = dataType // 指定数据类型为json
+  // json string转ascii
+  for (let i = 0; i < jsonCmd.length; i++) {
+    outPut[index++] = jsonCmd[i].charCodeAt()
+  }
+
+  var bccBuffer = outPut.slice(1, frameLen - 3 + 1) // 忽略协议头和协议尾
+  outPut[index++] = calBcc(bccBuffer)
+  outPut[index++] = 0x16
+  return outPut
+}
+
+/**
+ * 触发键盘事件, code表示键盘值
+ * 音量加减、home键、back事件(keyCode的值分别表示为25减音量,24加音量,4为返回键,3为home键,187为切换菜单)
+ */
+export function ExexuteKeyDown(code, sn) {
+  var jsonObj = { 'data': { 'keyCode': code.toString() }, 'type': 'keyDown' }
+  var json = JSON.stringify(jsonObj)
+  return makeFrame(sn, 0, json)
+}
+
+// 触发鼠标按下事件,x:x坐标, y:y坐标
+export function ExexuteMouseDown(x, y, sn) {
+  var jsonObj = { 'data': { 'action': 0, 'count': 1, 'pointerId': 0, 'x': x, 'y': y }, 'type': '0' }
+  var json = JSON.stringify(jsonObj)
+  return makeFrame(sn, 0, json)
+}
+
+// 触发鼠标移动事件,x:x坐标, y:y坐标
+export function ExexuteMouseMove(x, y, sn) {
+  var jsonObj = { 'data': { 'action': 2, 'count': 1, 'pointerId': 0, 'x': x, 'y': y }, 'type': '2' }
+  var json = JSON.stringify(jsonObj)
+  return makeFrame(sn, 0, json)
+}
+
+// 触发鼠标抬起事件,x:x坐标, y:y坐标
+export function ExexuteMouseUp(x, y, sn) {
+  var jsonObj = { 'data': { 'action': 1, 'count': 1, 'pointerId': 0, 'x': x, 'y': y }, 'type': '1' }
+  var json = JSON.stringify(jsonObj)
+  return makeFrame(sn, 0, json)
+}
+
+// 设置像素(200:自动/400000:极速/2243000:标清/3072000:高清)
+export function ExexutePixel(bitRate, sn) {
+  const jsonObj = { 'data': { 'bitRate': Number(bitRate) }, 'type': 'setBitRate' }
+  const json = JSON.stringify(jsonObj)
+  return makeFrame(sn, 0, json)
+}
+
+// 关闭连接事件
+export function ExexuteCloseServer(sn) {
+  const jsonObj = { 'data': { 'x': '0', 'y': '0' }, 'type': 'closeServer' }
+  const json = JSON.stringify(jsonObj)
+  return makeFrame(sn, 0, json)
+}
+
+// 根据报文识别屏幕方向, 0横屏,1竖屏
+export function CheckScreenDirection(data) {
+  let screen
+  if (data[0] === 0 && data[1] === 0 && data[2] === 0 && data[3] === 1) {
+    if (data[4] === 1 && data[5] === 1) {
+      if (data[6] === 1) {
+        screen = data[7]
+        return screen
+      }
+    }
+  }
+}
+
+// 加个请求I帧的报文
+export function RequestIFrame(sn) {
+  var outPut = new Uint8Array([0x20])
+  return makeFrameExtend(sn, 6, outPut)
+}
+
+function makeFrameExtend(sn, dataType, body) {
+  var index = 0
+  var dataLen = body.length
+  var frameLen = dataLen + 26
+  var outPut = new Uint8Array(frameLen)
+  outPut[index++] = 0x68
+  outPut[index++] = (dataLen & 0xff000000) >> 24
+  outPut[index++] = (dataLen & 0x00ff0000) >> 16
+  outPut[index++] = (dataLen & 0x0000ff00) >> 8
+  outPut[index++] = dataLen & 0x000000ff
+  outPut[index++] = 0 // 类型为client
+
+  // sn号赋值,string转ascii
+  for (let i = 0; i < sn.length; i++) {
+    outPut[index++] = sn[i].charCodeAt()
+  }
+
+  outPut[index++] = dataType // 指定数据类型为json
+  // json string转ascii
+  for (let i = 0; i < body.length; i++) {
+    outPut[index++] = body[i]
+  }
+
+  var bccBuffer = outPut.slice(1, frameLen - 3 + 1) // 忽略协议头和协议尾
+  outPut[index++] = calBcc(bccBuffer)
+  outPut[index++] = 0x16
+  return outPut
+}
+
+export function ConfigChannel(sn) {
+  var outPut = new Uint8Array([0x07])
+  return makeFrameExtend(sn, 6, outPut)
+}

+ 1 - 1
screenAndroid/css/WXtrialInterface.css

@@ -46,7 +46,7 @@ body {
 			
 			.scroll {
 				position: absolute;
-				overflow: scroll;
+				/* overflow: scroll; */
 				-webkit-overflow-scrolling: touch;
 				top: 0;
 				left: 0;

+ 3 - 1
screenAndroid/helper.js

@@ -61,7 +61,7 @@
 	 var bccBuffer = outPut.slice(1, frameLen-3 + 1);//忽略协议头和协议尾
 	 outPut[index++] = calBcc(bccBuffer);
 	 outPut[index++] = 0x16;
-	 console.log("打印数组:%s", PrintArry(outPut));
+	 // console.log("打印数组:%s", PrintArry(outPut));
 	 console.log("数组长度:%d", outPut.length);
 	 //return PrintArry(outPut);
 	 return outPut;
@@ -71,6 +71,7 @@
  {	 
 	 var jsonObj = {"data":{"keyCode":code, "event":"keyDown"}};
 	 var json = JSON.stringify(jsonObj);
+	 console.log("json==================",json);
 	 var sn = "RK3923C1201900139";
 	 return makeFrame(sn, 0, json);
  }
@@ -79,6 +80,7 @@
  {
 	 var jsonObj = {"data":{"action":0, "count":1, "pointerId":0,"x":x, "y":y}, "event":"0"};
 	 var json = JSON.stringify(jsonObj);
+	 console.log("json==================",json);
 	 var sn = "RK3923C1201900139";
 	 return  makeFrame(sn, 0, json);
  }

+ 669 - 0
screenAndroid/mobile.vue

@@ -0,0 +1,669 @@
+<template>
+  <div>
+    <el-dialog v-el-drag-dialog :visible.sync="showMobile" title="" :close-on-click-modal="false" :close-on-press-escape="false" :custom-class="mobileStyle" @close="close">
+      <div slot="title" class="cfff fs14">
+        <span class="ml20">{{ mobileName }}</span>
+        <el-dropdown placement="bottom" class="fr mr100 oln" trigger="hover" @command="handleCommand" @visible-change="handleVisble">
+          <span class="fs14 cfff">{{ bitRateText }}<i :class="caretIcon" /></span>
+          <el-dropdown-menu slot="dropdown" class="mobile-dropdown-menu">
+            <el-dropdown-item :class="bitRateStyle('1638400')" command="1638400">自动</el-dropdown-item>
+            <el-dropdown-item :class="bitRateStyle('491520')" command="491520">极速</el-dropdown-item>
+            <el-dropdown-item :class="bitRateStyle('1392640')" command="1392640">标清</el-dropdown-item>
+            <el-dropdown-item :class="bitRateStyle('2785280')" command="2785280">高清</el-dropdown-item>
+          </el-dropdown-menu>
+        </el-dropdown>
+      </div>
+      <div class="frns">
+        <div class="mobile-audio">
+          <video
+            ref="player"
+            width="372px"
+            :controls="false"
+            autoplay
+            @play="ready"
+            @error="error"
+            @pause="pause"
+            @mousedown="handleMouseDown"
+            @mousemove="handleMouseMove"
+            @mouseup="handleMouseUp"
+            @mouseleave="handleMouseLeave"
+          />
+          <audio
+            ref="audioPlayer"
+            width="372px"
+            controls
+            autoplay
+            poster="@/assets/equipment/loader-thumb.jpg"
+          />
+          <div v-if="isMask" class="mask">
+            <i v-if="isLoading" class="el-icon-loading" />
+            <img v-if="isError" class="w180h148" src="@/assets/equipment/guzhang_lixian_pic.png" alt="">
+            <div class="c999 fs12 mt15">{{ maskText }}</div>
+          </div>
+        </div>
+        <div class="mobile-sidebar">
+          <i :class="volumeUpIcon" @click="handleRoutine(24)" />
+          <i :class="volumeDownIcon" @click="handleRoutine(25)" />
+          <el-popover placement="bottom-start" popper-class="nav-popover" width="109" trigger="hover">
+            <div class="tac ptb10 c333 fs14">重启</div>
+            <i slot="reference" :class="shutDownIcon" @click="reboot" />
+          </el-popover>
+          <el-popover placement="bottom-start" popper-class="nav-popover" width="109" trigger="hover">
+            <div class="tac ptb10 c333 fs14">恢复出厂设置</div>
+            <i slot="reference" :class="restartIcon" @click="recovery" />
+          </el-popover>
+        </div>
+      </div>
+      <div class="mobile-bottombar">
+        <i :class="menuIcon" @click="handleRoutine(187)" />
+        <i :class="homeIcon" @click="handleRoutine(3)" />
+        <i :class="backIcon" @click="handleRoutine(4)" />
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import elDragDialog from '@/directive/el-drag-dialog'
+import JMuxer from 'jmuxer'
+import { getcardInfoBySn, rebootBatch, recovery, getcardStatus } from '@/api/mobile'
+import { ExexuteMouseDown, ExexuteMouseMove, ExexuteMouseUp, ExexuteKeyDown, ExexutePixel, ExexuteCloseServer, CheckScreenDirection, RequestIFrame, ConfigChannel } from '@/utils/control'
+import { keycodeMode } from '@/utils/config'
+
+const VIDEO_WIDTH = 371
+const VIDEO_HEIGHT = 660
+
+export default {
+  name: 'DragDialogDemo',
+  directives: { elDragDialog },
+  props: {
+    sn: {
+      type: Array,
+      default: () => {
+        return []
+      }
+    },
+    mobileName: {
+      type: String,
+      default: ''
+    },
+    mobileId: {
+      type: Number,
+      default: 0
+    }
+  },
+  data() {
+    return {
+      showMobile: true,
+      fpsCount: 0,
+      timeCount: 0,
+      isFeed: true,
+      curTime: new Date().getTime(),
+      requestTime: new Date().getTime(),
+      jmuxer: null,
+      audioMuxer: null,
+      ip: '', // 设备ip
+      port: '', // 设备端口号
+      size: '', // 设备分辨率
+      bitRate: '', // 设备清晰度
+      path: 'ws://192.168.11.66:9101', // websocket地址
+      socket: null, // websocket类
+      isDrag: false,
+      isLoading: true, // 加载中
+      isMask: true, // 遮罩层
+      maskText: '', // 加载文字
+      isError: false, // 是否设备故障或者离线
+      visble: false, // 下拉菜单是否展开
+      isRotate: false, // 是否横屏
+      isFlag: false
+    }
+  },
+  computed: {
+    bitRateStyle() {
+      return (num) => {
+        return this.bitRate === num ? 'pl20 bgcf3f6ff c515ff0 fs14' : 'pl20 c333 fs14'
+      }
+    },
+    bitRateText() {
+      /**
+       * 极速 | 491520,60KB/S
+       * 标清 | 1392640 ,170KB/S
+       * 自动 | 1638400 ,200KB/S
+       * 高清 | 2785280 ,340KB/S
+       */
+      const option = {
+        '1638400': '自动',
+        '491520': '极速',
+        '1392640': '标清',
+        '2785280': '高清'
+      }
+      return option[this.bitRate]
+    },
+    volumeUpIcon() {
+      return this.isLoading || this.isError ? 'icon-volume-up disabled mt50' : 'icon-volume-up mt50'
+    },
+    volumeDownIcon() {
+      return this.isLoading || this.isError ? 'icon-volume-down disabled mt40' : 'icon-volume-down mt40'
+    },
+    shutDownIcon() {
+      return this.isLoading || this.isError ? 'icon-shutdown disabled mt226ormt90' : 'icon-shutdown mt226ormt90'
+    },
+    restartIcon() {
+      return this.isLoading || this.isError ? 'icon-restart disabled mt40' : 'icon-restart mt40'
+    },
+    menuIcon() {
+      return this.isLoading || this.isError ? 'icon-background disabled' : 'icon-background'
+    },
+    homeIcon() {
+      return this.isLoading || this.isError ? 'icon-index disabled mlr64ormlr160' : 'icon-index mlr64ormlr160'
+    },
+    backIcon() {
+      return this.isLoading || this.isError ? 'icon-back disabled' : 'icon-back'
+    },
+    caretIcon() {
+      return this.visble ? 'el-icon-caret-top ml5' : 'el-icon-caret-bottom ml5'
+    },
+    mobileStyle() {
+      return this.isRotate ? 'mobile-dialog rotate' : 'mobile-dialog'
+    }
+  },
+  created() {
+    this.getcardInfoBySn()
+  },
+  mounted() {
+    document.addEventListener('visibilitychange', this.audioPlay)
+    document.addEventListener('keydown', this.handleKeyDown)
+    this.$nextTick(() => {
+      this.jmuxer = new JMuxer({
+        node: this.$refs.player,
+        flushingTime: 15,
+        fps: 30,
+        mode: 'video',
+        debug: false
+      })
+      this.audioMuxer = new JMuxer({
+        node: this.$refs.audioPlayer,
+        flushingTime: 1,
+        clearBuffer: true,
+        fps: 43, // 可以不选
+        mode: 'audio',
+        debug: false
+      })
+    })
+
+    this.curTime = new Date().getTime()
+  },
+  destroyed() {
+    document.removeEventListener('visibilitychange', this.audioPlay)
+    document.removeEventListener('keydown', this.handleKeyDown)
+    this.socket.send(ExexuteCloseServer(this.sn.join(','))) // 销毁监听
+    this.socket.close()
+  },
+  methods: {
+    handleVisble(flag) {
+      this.visble = flag
+    },
+    // 设备恢复出厂设置
+    recovery() {
+      if (this.isLoading || this.isError) {
+        this._message.warning('操作过于频繁,请稍后再试')
+        return
+      }
+      this.$confirm('<div class="c666 fs18 mb10">确认要恢复出厂设置吗?</div><div class="c999 fs14">恢复出厂后将恢复到初始设置并清除所有数据,恢复出厂过程/n中设备将不可操作。</div>', '恢复出厂', {
+        dangerouslyUseHTMLString: true,
+        confirmButtonText: '确认',
+        cancelButtonText: '取消',
+        customClass: 'cloud-phone-message-box', // 自定义消息样式类名
+        confirmButtonClass: 'cloud-phone-confirm-btn', // 自定义确认按钮样式类名
+        cancelButtonClass: 'cloud-phone-cancel-btn' // 自定义取消按钮样式类名
+      }).then(() => {
+        recovery({ sns: this.sn.join(',') }).then(res => {
+          if (res.status === 0) {
+            this.$alert('<div class="c666 fs18 mb10">恢复出厂设置指令已发送</div><div class="c999 fs14">若恢复出厂设置失败可重试</div>', '恢复出厂', {
+              dangerouslyUseHTMLString: true,
+              confirmButtonText: '确认',
+              customClass: 'cloud-phone-message-box',
+              confirmButtonClass: 'cloud-phone-confirm-btn', // 自定义确认按钮样式类名
+              callback: action => {
+                this.isMask = true
+                this.isLoading = true
+                this.maskText = '设备恢复出厂设置中...'
+                this._send()
+              }
+            })
+          } else {
+            this._message.error('恢复出厂设置指令发送失败,请稍后再试')
+          }
+        })
+      }).catch(() => {})
+    },
+    // 设备重启
+    reboot() {
+      if (this.isLoading || this.isError) {
+        this._message.warning('操作过于频繁,请稍后再试')
+        return
+      }
+      this.$confirm('<div class="c666 fs18 mb10">确认要重启设备吗?</div><div class="c999 fs14">重启后将完全关闭后台进程,重启过程中设备将不可操作。</div>', '重启', {
+        dangerouslyUseHTMLString: true,
+        confirmButtonText: '确认',
+        cancelButtonText: '取消',
+        customClass: 'cloud-phone-message-box', // 自定义消息样式类名
+        confirmButtonClass: 'cloud-phone-confirm-btn', // 自定义确认按钮样式类名
+        cancelButtonClass: 'cloud-phone-cancel-btn' // 自定义取消按钮样式类名
+      }).then(() => {
+        rebootBatch({ sns: this.sn.join(',') }).then(res => {
+          if (res.status === 0) {
+            this.$alert('<div class="c666 fs18 mb10">重启指令已发送</div><div class="c999 fs14">若重启失败可重试</div>', '重启', {
+              dangerouslyUseHTMLString: true,
+              confirmButtonText: '确认',
+              customClass: 'cloud-phone-message-box',
+              confirmButtonClass: 'cloud-phone-confirm-btn', // 自定义确认按钮样式类名
+              callback: action => {
+                this.isMask = true
+                this.isLoading = true
+                this.maskText = '设备重启中...'
+                this._send()
+              }
+            })
+          } else {
+            this._message.error('重启指令发送失败,请稍后再试')
+          }
+        })
+      }).catch(() => {})
+    },
+    async _send() {
+      const state = await this.getcardStatus()
+      if (state === '1') {
+        this.socket.send(ExexuteCloseServer(this.sn.join(','))) // 销毁监听
+        this.socket.close()
+        this.init()
+        this.isLoading = false
+        this.isMask = false
+        this.maskText = ''
+      } else {
+        setTimeout(() => {
+          this._send()
+        }, 3000)
+      }
+    },
+    async getcardStatus() {
+      const res = await getcardStatus({ sns: this.sn.join(',') }).then(res => { return res })
+      let state = '0'
+      if (res.status === 0) {
+        state = res.data[0].state
+      }
+      return state
+    },
+    // 设置像素
+    handleCommand(command) {
+      if (this.isLoading || this.isError) {
+        return
+      }
+      this.bitRate = command
+      const buffer = ExexutePixel(command, this.sn.join(','))
+      this.socket.send(buffer)
+    },
+    // 音量加减、home键、back事件(keyCode的值分别表示为25减音量,24加音量,4为返回键,3为home键,187为切换菜单)
+    handleRoutine(code) {
+      if (this.isLoading || this.isError) {
+        return
+      }
+      const buffer = ExexuteKeyDown(code, this.sn.join(','))
+      this.socket.send(buffer)
+    },
+    // 鼠标点击事件
+    handleMouseDown(event) {
+      if (this.isLoading || this.isError) {
+        return
+      }
+      if (event.button === 0) {
+        var posX = this.isRotate ? event.offsetY / VIDEO_HEIGHT * 1920 * 1.0 : event.offsetX / VIDEO_WIDTH * 1080 * 1.0
+        var posY = this.isRotate ? (VIDEO_WIDTH - event.offsetX) / VIDEO_WIDTH * 1080 * 1.0 : event.offsetY / VIDEO_HEIGHT * 1920 * 1.0
+        var buffer = ExexuteMouseDown(posX.toString(), posY.toString(), this.sn.join(','))
+        this.socket.send(buffer)
+        this.isDrag = true
+      }
+    },
+    // 鼠标移开事件
+    handleMouseLeave(event) {
+      if (this.isLoading || this.isError) {
+        return
+      }
+      this.isDrag = false
+      var posX = this.isRotate ? event.offsetY / VIDEO_HEIGHT * 1920 * 1.0 : event.offsetX / VIDEO_WIDTH * 1080 * 1.0
+      var posY = this.isRotate ? (VIDEO_WIDTH - event.offsetX) / VIDEO_WIDTH * 1080 * 1.0 : event.offsetY / VIDEO_HEIGHT * 1920 * 1.0
+      var buffer = ExexuteMouseUp(posX.toString(), posY.toString(), this.sn.join(','))
+      this.socket.send(buffer)
+    },
+    // 鼠标移动事件
+    handleMouseMove(event) {
+      if (this.isLoading || this.isError) {
+        return
+      }
+      if (this.isDrag && event.button === 0) {
+        var posX = this.isRotate ? event.offsetY / VIDEO_HEIGHT * 1920 * 1.0 : event.offsetX / VIDEO_WIDTH * 1080 * 1.0
+        var posY = this.isRotate ? (VIDEO_WIDTH - event.offsetX) / VIDEO_WIDTH * 1080 * 1.0 : event.offsetY / VIDEO_HEIGHT * 1920 * 1.0
+        var buffer = ExexuteMouseMove(posX.toString(), posY.toString(), this.sn.join(','))
+        this.socket.send(buffer)
+      }
+    },
+    // 鼠标离开事件
+    handleMouseUp(event) {
+      if (this.isLoading || this.isError) {
+        return
+      }
+      this.isDrag = false
+      var posX = this.isRotate ? event.offsetY / VIDEO_HEIGHT * 1920 * 1.0 : event.offsetX / VIDEO_WIDTH * 1080 * 1.0
+      var posY = this.isRotate ? (VIDEO_WIDTH - event.offsetX) / VIDEO_WIDTH * 1080 * 1.0 : event.offsetY / VIDEO_HEIGHT * 1920 * 1.0
+      var buffer = ExexuteMouseUp(posX.toString(), posY.toString(), this.sn.join(','))
+      this.socket.send(buffer)
+    },
+    // 键盘输入事件
+    handleKeyDown(event) {
+      if (this.isLoading || this.isError) {
+        return
+      }
+      var buffer = ExexuteKeyDown(keycodeMode[event.keyCode] || event.keyCode, this.sn.join(','))
+      this.socket.send(buffer)
+    },
+    // websocket初始化
+    init() {
+      this.socket = new WebSocket(this.path) // 实例化socket
+      this.socket.binaryType = 'arraybuffer'
+      this.socket.onopen = this.open // 监听socket连接
+      this.socket.onerror = this.onerror // 监听socket错误信息
+      this.socket.onmessage = this.getMessage // 监听socket消息
+    },
+    // websocket连接成功回调
+    open() {
+      this.isMask = false
+      this.isError = false
+      this.socket.send(ConfigChannel(this.sn))
+      this.socket.onmessage = this.getMessage
+    },
+    // websocket连接失败回调
+    onerror() {
+      console.log('websocket连接失败')
+      this.isLoading = false
+      this.isError = true
+      this.maskText = '设备故障或离线'
+    },
+    getMessage(event) {
+      const data = this.parse(event.data) // 分离音视频数据
+      const audioData = {
+        audio: data.audio,
+        video: null,
+        duration: data.duration
+      }
+      // const videoData = {
+      //   audio: null,
+      //   video: data.video,
+      //   duration: data.duration
+      // }
+
+      if (this.$refs.audioPlayer && this.$refs.audioPlayer.readyState === 2) {
+        const playPromise = this.$refs.audioPlayer.play()
+        if (playPromise !== undefined) {
+          playPromise.then(() => {
+            this.$refs.audioPlayer.play()
+          }).catch(() => {})
+        }
+      }
+      if (data.audio != null) { // 喂音频
+        this.audioMuxer.feed(audioData)
+      }
+      if (data.video != null && this.isFeed) { // 喂视频
+        this.jmuxer.feed(data)
+      }
+      if (data.video) {
+        if (new Date().getTime() - this.curTime >= 1000) {
+          this.fpsCount = 0
+          this.curTime = new Date().getTime()
+        } else {
+          this.fpsCount++
+        }
+      }
+    },
+    // 弹窗关闭
+    close() {
+      this.$emit('closeDialog', 'showMobile')
+    },
+    // 根据sn获取设备获取清晰度、端口号和ip
+    getcardInfoBySn() {
+      var list = []
+      list.push(this.mobileId)
+      getcardInfoBySn({ mobileIdList: list }).then(res => {
+        if (res.status === 0) {
+          this.ip = res.data[0].ip
+          this.port = res.data[0].port
+          this.size = res.data[0].size
+          this.bitRate = res.data[0].bitRate === '0' ? '1638400' : res.data.bitRate
+          this.path = `ws://${res.data[0].ip}:${res.data[0].websocketPort.toString()}`
+          //console.log(this.path)
+          this.init()
+        }
+      })
+    },
+    pause() {
+      this.isFeed = false
+    },
+    audioPlay() {
+      if (document.visibilityState === 'visible') {
+        this.isFlag = true
+        this.socket.send(RequestIFrame(this.sn.join(',')))
+      } else {
+        this.isFlag = false
+        this.isFeed = false
+        this.$refs.player.pause()
+      }
+    },
+    ready() {
+      this.isLoading = false
+    },
+    error() {
+      this.isMask = true
+      this.isError = true
+    },
+    parse(data) {
+      // var input = new Uint8Array(data)
+      // var dv = new DataView(input.buffer)
+      // var duration = dv.getUint16(0, true) // 获取duration
+      // var audioLength = dv.getUint16(2, true)
+      // var audio
+      // var video
+
+      // if (audioLength === 0) {
+      //   video = input.subarray(4)
+      // } else {
+      //   audio = input.subarray(4, (audioLength + 4))
+      //   video = input.subarray(audioLength + 4)
+      // }
+
+      // return {
+      //   audio: audio,
+      //   video: video,
+      //   duration: duration
+      // }
+      var input = new Uint8Array(data)
+      var duration
+      var video
+      var audio
+      if (input[0] === 0 && input[1] === 0 && input[2] === 0 && input[3] === 1) {
+        video = input
+        duration = 24
+        var nalType = input[4] & 0x1f
+        if (nalType === 0x05 && this.isFlag) { // 策略, 找到sps、sps、或I帧,才继续渲染
+          this.isFeed = true
+        }
+      } else if (input[0] === 0xff) {
+        audio = input
+        duration = 24
+      } else if (input[23] === 0x0b) {
+        this.$alert('<div class="c666 fs18 mb10">设备' + this.mobileName + '已在其它端受控</div>', '提示', {
+          dangerouslyUseHTMLString: true,
+          confirmButtonText: '确认',
+          customClass: 'cloud-phone-message-box',
+          confirmButtonClass: 'cloud-phone-confirm-btn', // 自定义确认按钮样式类名
+          callback: action => {
+            this.showMobile = false
+          }
+        })
+      } else if (input[0] === 0x68 && input[23] === 0x05) {
+        var state = CheckScreenDirection(input.slice(24, 24 + 8))
+        if (state === 1) {
+          this.isRotate = false
+        } else {
+          this.isRotate = true
+        }
+      }
+
+      return {
+        audio: audio,
+        video: video,
+        duration: duration
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+  .ml111 {margin-left: 111px;}.mt50{margin-top: 50px;}.mt40{margin-top: 40px;}
+  .w180h148 {width: 180px;height: 148px;}.mr100{margin-right: 100px;}
+  .mobile-dialog {
+    width: 417px;
+    height: 740px;
+    background: #141414;
+    box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.5);
+    border-radius: 0;
+    &.rotate {
+      width: 705px;
+      height: 452px;
+      .el-dialog__body {
+        padding: 0;
+        .mt226ormt90{
+          margin-top: 90px;
+        }
+        .mlr64ormlr160{
+          margin-left: 160px;
+          margin-right: 160px;
+        }
+        .mobile-audio {
+          width: 660px;
+          height: 372px;
+          position: relative;
+          video {
+            transform:rotate(-90deg);
+            position: absolute;
+            top: -145px;
+            left: 145px;
+          }
+          .mask {
+            width: 100%;
+            height: 100%;
+            background-color: #fff;
+            position: absolute;
+            top: 0;
+            left: 0;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            flex-direction: column;
+          }
+        }
+        .mobile-sidebar {
+          width: 45px;
+          height: 372px;
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+        }
+        .mobile-bottombar {
+          width: 100%;
+          height: 40px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
+      }
+    }
+    .el-dialog__header {
+      height: 40px;
+      line-height: 40px;
+      padding: 0;
+      .el-dialog__headerbtn {
+        top: 13px;
+        right: 15px;
+        font-size: 14px;
+        .el-dialog__close {
+          color: #fff;
+          font-weight: 800;
+        }
+      }
+    }
+    .el-dialog__body {
+      padding: 0;
+      .mt226ormt90 {
+        margin-top: 226px;
+      }
+      .mlr64ormlr160{
+        margin-left: 64px;
+        margin-right: 64px;
+      }
+      .mobile-audio {
+        width: 371px;
+        height: 660px;
+        position: relative;
+        .mask {
+          width: 100%;
+          height: 100%;
+          background-color: #fff;
+          position: absolute;
+          top: 0;
+          left: 0;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          flex-direction: column;
+        }
+      }
+      .mobile-sidebar {
+        width: 46px;
+        height: 660px;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+      }
+      .mobile-bottombar {
+        width: 100%;
+        height: 40px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+    }
+  }
+  .mobile-dropdown-menu {
+    width: 110px;
+    padding: 5px 0;
+    border: none;
+    box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.3);
+    .popper__arrow {
+      border-width: 10px;
+      border-bottom-color: #fff !important;
+      top: -8px !important;
+      left: 60px !important;
+    }
+    .el-dropdown-menu__item {
+      height: 40px;
+      line-height: 40px;
+      &:hover {
+        background-color: #F3F6FF;
+        color: #333;
+      }
+    }
+  }
+  audio {
+    display: none;
+  }
+</style>

+ 9 - 8
screenIos/WXdraw.js

@@ -81,7 +81,7 @@ urlss = '192.168.31.20'
 var cUrl = ''
 // cUrl = "ws://192.168.11.66:9101";
 // var cUrl="wss://www.ted2018.com:9101"
-var cUrl = "ws://192.168.198.11: 9101"
+var cUrl = "ws://192.168.198.11:9101"
 // if (data.clientType == 3) {
 // 	cUrl = "wss://" + urlss + "/authControlWebSocket?" + "clientType=" + data.clientType + "&username=" + data.username +
 // 		"&userCardId=" + data.userCardId
@@ -117,13 +117,13 @@ wsss.onopen = function() {
 	wsss.send(JSON.stringify(bitRate));
 };
 wsss.onmessage = function(event) {
-	console.log("onMessage==============", event);
-	var resets = JSON.parse(event.data)
-	var resets = event.data;
-	resets.errorMsg && alert(resets.errorMsg)
-	resolving = resets.data.orientation
-	if (resolving == 1) {} else {}
-	console.log('>>>resolvingresolvingresolving', resolving)
+	// console.log("onMessage==============", event);
+	// var resets = JSON.parse(event.data)
+	// var resets = event.data;
+	// resets.errorMsg && alert(resets.errorMsg)
+	// resolving = resets.data.orientation
+	// if (resolving == 1) {} else {}
+	// console.log('>>>resolvingresolvingresolving', resolving)
 
 };
 wsss.onclose = function(event) {
@@ -163,6 +163,7 @@ $(".botmat1img").on("click", function() {
 			},
 			"event": "keyCode"
 		}
+		console.log("打印主页json", JSON.stringify(bitRate))
 		wsss.send(JSON.stringify(bitRate));
 	} else if (codes == "return") {
 		var bitRate = {

+ 5 - 5
screenIos/WXtrialInterface.html

@@ -61,8 +61,8 @@
 
 				<!-- <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>
-					<canvas id="playCanvas" width="450" height="800"></canvas>
+				<div id="box">
+					<canvas id="playCanvas" width="450" height="800"></canvas> 
 				</div>
 			</div>
 			<div class="leftmains">
@@ -153,7 +153,7 @@
 		<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 src="WXdraw.js?id=105"></script>
 
 		<script>
 			var topwinHeight = window.screen.height - window.innerHeight + 30; //计算title top 头部
@@ -563,7 +563,7 @@
 							// players.off('pause');
 							// players.pause();
 							// var embed = document.embedPlay;
-							console.log(players, "fdsfdsf")
+							// console.log(players, "fdsfdsf")
 						}
 					}
 				}
@@ -775,7 +775,7 @@
 				var posY = event.offsetY * 1280 * 1.0 / myVideo.clientHeight;
 				var buffer = ExexuteMouseUp(posX.toString(), posY.toString());
 				// ws.send(buffer);
-				decodeWoker.postMessage(buffer);
+				webSocketWorker.postMessage(buffer);
 
 			}