android-cloud-H5/screenAndroid/WXdraw.js

//蒙版
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.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 + "&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 pings = { "type": "getVsStatus" }
    wsss.send(JSON.stringify(pings));
    var bitRate = {
      "data": {
        "bitRate": 1243000
      },
      "type": "bitRate"
    }
    wsss.send(JSON.stringify(bitRate));
    // 进入发起询问
    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 {
        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
    }
    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 {
              wx.miniProgram.switchTab({
                url: '/pages/home/home'
              })
            }
          });
        } 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);
  isFeed = false;
  isAudioPlay = false;
  $('.weui-mask_transparent').show();
  $('.weui-toast').show();
  if (jmuxer) {
    jmuxer.destroy();
  }
  jmuxer = new JMuxer({
    node: 'playerVideo',
    flushingTime: 33,
    fps: 30,
    mode: 'video',
    debug: false
  });
  myVideo.play();
  isWaitSps = true;
})
//画图形
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;
}