android-cloud-H5/screenIos/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 // -winHeight
//计算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.sn = parameters['sn'];
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 videoWidth = 720
var videoHeight = 1280
var wsss;
var 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 screenPic = {
      type: 'getScreenPic',
      data: {
        taskUid: '346789',
        intervalTime: 0
      }
    }
    wsss.send(JSON.stringify(screenPic));
    // 获取分辨率
    var phoneSize = {
      "type": "getPhoneSize"
    }
    wsss.send(JSON.stringify(phoneSize));
  };
  wsss.onerror = function () {
    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
    }
    if (result.type === 'getPhoneSize') {
      if (result.data.status === 0) {
        videoWidth = result.data.width
        videoHeight = result.data.height
      }
      return
    }
    var unit8Arr = new Uint8Array(result);
    if (unit8Arr[0] == 0x68 && unit8Arr[1] == 0x09 && first) {
      first = false;
      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', this)
})
//剪切板
$(".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 canDraw = false;
var ongoingTouches = [];
//画图形
var draw_graph = function (graphType) {
  //把蒙版放于画板上面
  $("#container").css("z-index", 30);
  $("#dedit").css("z-index", 20);
  // 先画在蒙版上 再复制到画布上
  //鼠标按下获取 开始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 * (videoHeight / voheight);
    var acrossHeightY = videoWidth - touchfor.pageX * (videoWidth / vowidth);
    var verticalWidthX = touchfor.pageX * (videoWidth / vowidth);
    var verticalHeightY = touchfor.pageY * (videoHeight / 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 * (videoHeight / voheight);
    var acrossHeightY = videoWidth - touchfor.pageX * (videoWidth / vowidth);
    var verticalWidthX = touchfor.pageX * (videoWidth / vowidth);
    var verticalHeightY = touchfor.pageY * (videoHeight / 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 * (videoHeight / voheight);
    var acrossHeightY = videoWidth - touchfor.pageX * (videoWidth / vowidth);
    var verticalWidthX = touchfor.pageX * (videoWidth / vowidth);
    var verticalHeightY = touchfor.pageY * (videoHeight / 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);
}

function GetRequest() {
  var url = location.search; // 获取url中"?"符后的字串
  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;
}