//蒙版 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 && decodeURIComponent(cardToken); form.ip = parameters["ip"]; form.domainName = parameters["domainName"]; var isWSS = true; var cUrl = isWSS ? "wss://" + form.domainName + "?cardIp=" + form.ip + "&token=" + cardToken + "&type=directives" : "ws://" + form.domainName + "?cardIp=" + form.ip + "&token=" + cardToken + "&type=directives"; var videoWidth = Number(parameters['resolvingPower']) ? Number(parameters['resolvingPower']) : 720 var videoHeight = videoWidth === 720 ? 1280 : 1920 var isControl = true; // 是否是观看模式 var isAuth = parameters['authPhone']; // 是否是获取的云手机 var wsss, errorTime = 0; var first = true; 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 pings2 = { "type": "forwardMsg", "data": { "code": "3000", "desc": "询问是否有在控制" // 可选 } } wsss.send(JSON.stringify(pings2)); }; wsss.onerror = function (evt) { wsss.close(); throttle(doConnect, 100); if (errorTime > 1000) { if (navigator.userAgent.toLowerCase().includes('toutiaomicroapp')) { tt.miniProgram.switchTab({ url: '/pages/home/home' }) } else if (window.__wxjs_environment === 'miniprogram') { wx.miniProgram.switchTab({ url: '/pages/home/home' }) } else { document.addEventListener('UniAppJSBridgeReady', function () { uni.webView.navigateTo({ url: '/pages/index/index' }); }) } } }; 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 } if (result.type === 'forwardMsg' && isAuth !== 'none') { if (result.data.code === 4000 || result.data.code === 3000) { if (isAuth === 'huo') { $.confirm("授权方已收回控制权,您进入观看屏幕模式", function () { //点击确认后的回调函数 isControl = false; }, function () { isControl = false; //点击取消后的回调函数 if (navigator.userAgent.toLowerCase().includes('toutiaomicroapp')) { tt.miniProgram.switchTab({ url: '/pages/home/home' }) } else if (window.__wxjs_environment === 'miniprogram') { wx.miniProgram.switchTab({ url: '/pages/home/home' }) } else { document.addEventListener('UniAppJSBridgeReady', function () { uni.webView.navigateTo({ url: '/pages/index/index' }); }) } }); } else { $.confirm("当前云手机正在授控,是否请求获取云手机控制权?", function () { //点击确认后的回调函数 var ping = { "type": "forwardMsg", "data": { "code": "5000", "desc": "控制权限收回" // 可选 } } wsss.send(JSON.stringify(ping)); isControl = true; }, function () { //点击取消后的回调函数 isControl = false; }); } } return } } } $('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" && isControl) { wsss.send(ExexuteKeyBoard(3)); } else if (codes == "return" && isControl) { wsss.send(ExexuteKeyBoard(4)); } else if (codes == "gengduo" && isControl) { wsss.send(ExexuteKeyBoard(187)); } }) // 高清控制 $(".PictureQuality").on("click", function () { if (!isControl) { return } $(this).addClass("avit").siblings().removeClass('avit') var id = $(this).attr("data-id") var buffer = makeSharpness(Number(id)); ws.send(buffer); }) //画图形 var draw_graph = function (graphType, obj) { //把蒙版放于画板上面 $("#container").css("z-index", 30); $("#dedit").css("z-index", 20); var canDraw = false; //鼠标按下获取 开始xy开始画图 var ongoingTouches = []; var touchstart = function (e) { if (!isControl) { return } $('.control-right-img').attr({ "data-id": "2" }) $(".leftmains").css({ "right": "-4rem" }) var touchfor = e.originalEvent.changedTouches; //for 的手指数组 //是否横屏 for (var i = 0; i < touchfor.length; i++) { var acrossWidthX = touchfor[i].pageY * (videoHeight / voheight); var acrossHeightY = videoWidth - touchfor[i].pageX * (videoWidth / vowidth); var verticalWidthX = touchfor[i].pageX * (videoWidth / vowidth); var verticalHeightY = touchfor[i].pageY * (videoHeight / voheight); var idx = ongoingTouches.findIndex(function (ele) { return ele.identifier === touchfor[i].identifier }) if (idx < 0) { ongoingTouches.push(touchfor[i]); } var ping = resolving == 0 ? { "data": { "action": 0, "count": ongoingTouches.length, "pointerId": touchfor[i].identifier, "x": acrossWidthX.toFixed(2), "y": acrossHeightY.toFixed(2) }, "type": "event" } : { "data": { "action": 0, "count": ongoingTouches.length, "pointerId": touchfor[i].identifier, "x": verticalWidthX.toFixed(2), "y": verticalHeightY.toFixed(2) }, "type": "event" }; wsss.send(JSON.stringify(ping)); } canDraw = true; }; //鼠标离开 把蒙版canvas的图片生成到canvas中 var touchend = function (e) { if (!isControl) { return } var touchfor = e.originalEvent.changedTouches; //for 的手指数组 //是否横屏 for (var i = 0; i < touchfor.length; i++) { var acrossWidthX = touchfor[i].pageY * (videoHeight / voheight); var acrossHeightY = videoWidth - touchfor[i].pageX * (videoWidth / vowidth); var verticalWidthX = touchfor[i].pageX * (videoWidth / vowidth); var verticalHeightY = touchfor[i].pageY * (videoHeight / voheight); var ping = resolving == 0 ? { "data": { "action": 1, "count": ongoingTouches.length, "pointerId": touchfor[i].identifier, "x": acrossWidthX.toFixed(2), "y": acrossHeightY.toFixed(2) }, "type": "event" } : { "data": { "action": 1, "count": ongoingTouches.length, "pointerId": touchfor[i].identifier, "x": verticalWidthX.toFixed(2), "y": verticalHeightY.toFixed(2) }, "type": "event" }; wsss.send(JSON.stringify(ping)); ongoingTouches.forEach(function (item, index) { if (item.identifier === touchfor[i].identifier) { ongoingTouches.splice(index, 1) } }) } canDraw = false; }; //清空层 云手机超出屏幕的开关 var clearContext = function () { canDraw = false; } // 鼠标移动 var touchmove = function (e) { if (!isControl) { return } var touchfor = e.originalEvent.targetTouches; //for 的手指数组 for (var i = 0; i < touchfor.length; i++) { var acrossWidthX = touchfor[i].pageY * (videoHeight / voheight); var acrossHeightY = videoWidth - touchfor[i].pageX * (videoWidth / vowidth); var verticalWidthX = touchfor[i].pageX * (videoWidth / vowidth); var verticalHeightY = touchfor[i].pageY * (videoHeight / voheight); var ping = resolving == 0 ? { "data": { "action": 2, "count": touchfor.length, "pointerId": touchfor[i].identifier, "x": acrossWidthX.toFixed(2), "y": acrossHeightY.toFixed(2) }, "type": "event" } : { "data": { "action": 2, "count": touchfor.length, "pointerId": touchfor[i].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; }