//蒙版 var canvas_bak = document.getElementById("box"); 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; // 计算title top 头部 连接断开,是否准备重连? if (numse <= 70) { var voheight = window.screen.height - winHeight - 34 - 20 } else { var voheight = window.screen.height - topwinHeightDraw - 20 } // 画笔大小 var resolving = 1; // 1: 竖屏;2:横屏; var url = window.location.href; url = url.split('/'); var parameters = GetRequest(); var form = {}; var cardToken = parameters["cardToken"]; cardToken = cardToken && cardToken.replace(/@/g,"="); form.cardIp = parameters["cardIp"]; form.port = parameters["port"]; form.username = parameters["username"]; form.userCardId = parameters["userCardId"]; form.ip = parameters["ip"]; form.domainName = parameters["domainName"]; var isWSS = true; var cUrl = isWSS ? "wss://" + form.domainName + "?cardIp=" + form.ip + "&token=" + cardToken : "ws://" + form.domainName + "?cardIp=" + form.ip + "&token=" + cardToken; // var cUrl = "wss://192.168.31.198/businessChannel?cardIp=192.168.20.53&token=LDAz32tutqS9wQqi0WlmvJ68/Is83cX+kavJQij1IMRvewgZ1dLvviFZqd4b8gcaR1eLztR/ViRLyyAVvZO7GA=="; var wsss,errorTime = 0; doConnect(); function throttle(fn, delay) { var flag = true; errorTime += delay; return () => { if (!flag) return; flag = false; timer = setTimeout(() => { fn(); flag = true; }, delay); }; } function doConnect() { wsss = new WebSocket(cUrl); wsss.binaryType = 'arraybuffer'; wsss.onopen = function () { // 获取虚拟场景状态 var pings = { "type": "getVsStatus" } wsss.send(JSON.stringify(pings)); var bitRate = { "data": { "bitRate": 1243000 }, "type": "bitRate" } wsss.send(JSON.stringify(bitRate)); // 获取实时截图 var screenPic = { type: 'getScreenPic', data: { taskUid: '346789', intervalTime: 0 } } wsss.send(JSON.stringify(screenPic)); }; wsss.onerror = function (evt) { wsss.close(); throttle(doConnect,100); if(errorTime > 1000){ wx.miniProgram.switchTab({ url: '/pages/home/home' }) } }; wsss.onmessage = function(res) { var result = typeof res.data === 'string' ? JSON.parse(res.data) : res.data if (result.type === 'cutting') { if (result.data.status === 0) { $.toast('复制成功', "text"); } else { $.toast(result.msg, "text"); } return } var unit8Arr = new Uint8Array(result); if (unit8Arr[0] == 0x68 && unit8Arr[1] == 0x09) { unit8Arr = unit8Arr.slice(12,unit8Arr.length-2); var base64 = 'data:image/jpg;base64,' + window.btoa(String.fromCharCode(...new Uint8Array(unit8Arr))); $(".loading_sceen_pic").attr('src', base64) } } } $('body').on("click", function () { draw_graph('pencil'); }) //剪切板 $(".upload").on("click", function () { var texts = $(this).attr("data-text") if (texts == "uploads") { $(".mainbox").css({ "display": "block" }) $(".sbox").css({ "display": "none" }) } }) //home 控制home $(".botmat1img").on("click", function () { var codes = $(this).attr("data-text") if (codes == "home") { wsss.send(ExexuteKeyBoard(3)); } else if (codes == "return") { wsss.send(ExexuteKeyBoard(4)); } else if (codes == "gengduo") { wsss.send(ExexuteKeyBoard(187)); } }) //高清控制 $(".PictureQuality").on("click", function () { $(this).addClass("avit").siblings().removeClass('avit') var id = $(this).attr("data-id") var bitRate = { "data": { "bitRate": id }, "type": "bitRate" } wsss.send(JSON.stringify(bitRate)) }) var ongoingTouches = []; //画图形 var draw_graph = function (graphType, obj) { //把蒙版放于画板上面 $("#container").css("z-index", 30); $("#dedit").css("z-index", 20); var canDraw = false; //鼠标按下获取 开始xy开始画图 var touchstart = function (e) { $('.control-right-img').attr({ "data-id": "2" }) $(".leftmains").css({ "right": "-4rem" }) var touchfor = e.originalEvent.changedTouches[0]; //for 的手指数组 ongoingTouches.push(touchfor); var acrossWidthX = touchfor.pageY * (1280 / voheight); var acrossHeightY = 720 - touchfor.pageX * (720 / vowidth); var verticalWidthX = touchfor.pageX * (720 / vowidth); var verticalHeightY = touchfor.pageY * (1280 / voheight); //是否横屏 var ping = resolving == 0 ? {"data":{"action": 0, "count": ongoingTouches.length, "id": touchfor.identifier, "x": acrossWidthX.toFixed(2), "y": acrossHeightY.toFixed(2)},"type": "event"} : {"data":{"action": 0, "count": ongoingTouches.length, "id": touchfor.identifier, "x": verticalWidthX.toFixed(2), "y": verticalHeightY.toFixed(2)},"type": "event"}; wsss.send(JSON.stringify(ping)); canDraw = true; }; //鼠标离开 把蒙版canvas的图片生成到canvas中 var touchend = function (e) { var touchfor = e.originalEvent.changedTouches[0]; //for 的手指数组 var acrossWidthX = touchfor.pageY * (1280 / voheight); var acrossHeightY = 720 - touchfor.pageX * (720 / vowidth); var verticalWidthX = touchfor.pageX * (720 / vowidth); var verticalHeightY = touchfor.pageY * (1280 / voheight); //是否横屏 var ping = resolving == 0 ? {"data":{"action": 1, "count": ongoingTouches.length, "id": touchfor.identifier, "x": acrossWidthX.toFixed(2), "y": acrossHeightY.toFixed(2)},"type": "event"} : {"data":{"action": 1, "count": ongoingTouches.length, "id": touchfor.identifier, "x": verticalWidthX.toFixed(2), "y": verticalHeightY.toFixed(2)},"type": "event"}; wsss.send(JSON.stringify(ping)); ongoingTouches.splice(touchfor.identifier, 1); canDraw = false; }; //清空层 云手机超出屏幕的开关 var clearContext = function () { canDraw = false; } // 鼠标移动 var touchmove = function (e) { e = e || window.event; var touchfor = e.originalEvent.changedTouches[0]; //for 的手指数组 var acrossWidthX = touchfor.pageY * (1280 / voheight); var acrossHeightY = 720 - touchfor.pageX * (720 / vowidth); var verticalWidthX = touchfor.pageX * (720 / vowidth); var verticalHeightY = touchfor.pageY * (1280 / voheight); var ping = resolving == 0 ? {"data":{"action": 2, "count": ongoingTouches.length, "id": touchfor.identifier, "x": acrossWidthX.toFixed(2), "y": acrossHeightY.toFixed(2)},"type": "event"} : {"data":{"action": 2, "count": ongoingTouches.length, "id": touchfor.identifier, "x": verticalWidthX.toFixed(2), "y": verticalHeightY.toFixed(2)},"type": "event"}; wsss.send(JSON.stringify(ping)); }; //鼠标离开区域以外 除了涂鸦 都清空 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); } // 获取url中"?"符后的字串 function GetRequest() { var url = location.search; var obj = new Object(); if (url.indexOf("?") != -1) { var str = url.substr(1); strs = str.split("&"); for (var i = 0; i < strs.length; i++) { obj[strs[i].split("=")[0]] = (strs[i].split("=")[1]); } } return obj; }