android-cloud-H5/static/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 videoWidth, videoHeight;
var isControl = false; // 是否是观看模式
changIsControl(true);
var isAuth = parameters['authPhone']; // 是否是获取的云手机
var wsss;
var errorTime = 0;
var first = true;
function changIsControl(value) {
  isControl = value;
  // if(){}
  $('#open-set-phone-size-dialog-btn').attr('hidden', !value);
}

function throttle(fn, delay) {
  var flag = true;
  return () => {
    if (!flag) return;
    flag = false;
    errorTime += delay;
    timer = setTimeout(() => {
      fn();
      flag = true;
    }, delay);
  };
}

const throttleDoConnectDirectives = throttle(() => {
  doConnectDirectives();
}, 100);

function doConnectDirectives() {
  videoWidth = Number(resolvingPower) ? Number(resolvingPower) : 720;
  videoHeight = videoWidth === 720 ? 1280 : 1920;
  wsss = new WebSocket(cUrl);
  wsss.binaryType = 'arraybuffer';

  wsss.onopen = function () {
    // 获取虚拟场景状态
    errorTime = 0;
    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',
        username,
        desc: '询问是否有在控制', // 可选
      },
    };
    wsss.send(JSON.stringify(pings2));

    wsss.send(
      JSON.stringify({
        type: 'getPhoneSize',
      }),
    );
  };
  wsss.onerror = function (e) {
    // console.log('🚀 ~ file: WXdraw.js ~ line 82 ~ onerror ~ e', e);
    wsss.close(1006);
    // throttle(doConnectDirectives, 100);
    // if (errorTime > 1000) {
    //   quit();
    // }
  };
  wsss.onclose = function (e) {
    // console.log('🚀 ~ file: WXdraw.js ~ line 93 ~ onclose ~ e', e);
    // new WebSocket(e.)
    // doConnectDirectives();
    if (e.code === 1006) {
      // 异常关闭，重连
      throttleDoConnectDirectives();
      // doConnectDirectives();
      // throttle(doConnectDirectives, 100);
      if (errorTime > 1000) {
        quit();
      }
    }
  };
  wsss.onmessage = function (res) {
    var result = typeof res.data === 'string' ? JSON.parse(res.data) : res.data;
    console.log(
      '🚀 ~ file: WXdraw.js ~ line 78 ~ doConnectDirectives ~ result',
      result,
    );

    if (result.type === 'cutting') {
      if (result.data.status === 0) {
        $.toast('复制成功', 'text');
      } else {
        $.toast(result.msg, 'text');
      }
      return;
    }
    if (result.type === 'forwardMsgRep') {
      // 当前云机无其他终端在线，获得控制权
      changIsControl(true);
    }
    if (result.type === 'forwardMsg') {
      /**
       * @type {boolean} isControl 当前是否拥有控制权，初始化时为false
       * @type {string} isAuth 当前云机类型 - huo: 获取的云机，none: 自己的云机
       * @type {string} username 当前登录的双子星账号username
       */

      if (result.data.username !== username) {
        switch (String(result.data.code)) {
          case '3000': {
            if (isControl) {
              // 回复有控制
              wsss.send(
                JSON.stringify({
                  type: 'forwardMsg',
                  data: {
                    code: '4000',
                    username,
                    desc: '有控制', // 可选
                  },
                }),
              );
              return;
            }
            // 回复有观看
            wsss.send(
              JSON.stringify({
                type: 'forwardMsg',
                data: {
                  code: '4100',
                  username,
                  desc: '有观看', // 可选
                },
              }),
            );
            return;
          }
          case '4000': {
            // 当前是获取方
            if (isAuth === 'huo' && isControl) {
              $.confirm(
                '授权方已收回控制权，您进入观看屏幕模式',
                function () {
                  //点击确认后的回调函数
                  changIsControl(false);
                },
                function () {
                  changIsControl(false);
                  //点击取消后的回调函数
                  quit();
                },
              );
              return;
            }
            if (!isControl && isAuth === 'shou') {
              // 当前是授权方切没有控制权
              $.confirm(
                '当前云手机正在授控，是否请求获取云手机控制权？',
                function () {
                  //点击确认后的回调函数
                  wsss.send(
                    JSON.stringify({
                      type: 'forwardMsg',
                      data: {
                        code: '5000',
                        username,
                        desc: '控制权限收回', // 可选
                      },
                    }),
                  );
                  changIsControl(true);
                },
                function () {
                  //点击取消后的回调函数
                  changIsControl(false);
                },
              );

              return;
            }
          }
          case '5000': {
            // if (result.data.username === username) {
            //   changIsControl(true);
            //   return;
            // }
            if (isAuth === 'huo' && isControl) {
              $.confirm(
                '授权方已收回控制权，您进入观看屏幕模式',
                function () {
                  //点击确认后的回调函数
                  changIsControl(false);
                },
                function () {
                  changIsControl(false);
                  //点击取消后的回调函数
                  quit();
                },
              );
              return;
            }

            return;
          }
          default: {
            return;
          }
        }
      }
      return;
    }
    if (result.type === 'payInitiateEvent') {
      var url = window.location.href;
      url = url.split('/');
      var baseUrl = url[0] + '//' + url[2];
      $.ajax({
        url: baseUrl + '/api/pay/third/order',
        data: JSON.stringify({
          orderNum: result.data.orderNum,
          orderAmount: result.data.orderAmount,
          appKey: result.data.appKey,
        }),
        type: 'POST',
        dataType: 'json',
        contentType: 'application/json;charset=UTF-8',
        success: function (res) {
          if (result.data.payType === 1) {
            // 微信
            if (window.__wxjs_environment === 'miniprogram') {
              // 小程序
              // copyUrl(result.data.payUrl);
            } else {
              window.location.href = result.data.payUrl;
            }
          } else {
            window.location.href = result.data.payUrl;
          }
        },
      });
      return;
    }
    if (result.type === 'getPhoneSize' || result.type === 'setPhoneSize') {
      // console.log(result);
      if (
        window.currentPhoneSize &&
        (window.currentPhoneSize.width !==
          Math.min(result.data.width, result.data.height) ||
          window.currentPhoneSize.height !==
            Math.max(result.data.width, result.data.height) ||
          window.currentPhoneSize.dpi !== result.data.dpi)
      ) {
        // 获取到的分辨率与当前分辨率不符

        const data = window.phoneSizeList.find(function (v) {
          return (
            v.width === Math.min(result.data.width, result.data.height) &&
            v.height === Math.max(result.data.width, result.data.height) &&
            v.dpi === result.data.dpi
          );
        });
        window.currentPhoneSize = data || {
          width: Math.min(result.data.width, result.data.height),
          height: Math.max(result.data.width, result.data.height),
          dpi: result.data.dpi,
        };

        if (result.type === 'setPhoneSize') {
          lastSetPhone = Date.now();
        }
        // if (result.type === 'getPhoneSize') {
        // 上报给后端
        $.ajax({
          url:
            baseUrl +
            '/api/resources/v5/machine/resolution/operationResolvingPower',
          headers: {
            Authorization: token,
          },
          type: 'post',
          dataType: 'json',
          contentType: 'application/json; charset=UTF-8',
          data: JSON.stringify({
            userCardId: window.userCardId,
            resolvingPowerId: window.currentPhoneSize.id,
          }),
        });
      }
      // }

      updateDB(db, storeName, {
        id: userCardId,
        socketURL: socketURL,
        cUrl: cUrl,
        cardToken: cardToken,
        resolvingPower: resolvingPower,
        width: window.currentPhoneSize.width,
        height: window.currentPhoneSize.height,
        dpi: window.currentPhoneSize.dpi,
      });

      return;
    }

    if (result.type === 'reProduceText') {
      // 接收到云机剪贴板复制事件
      // window.copyToClipboard(result.data.text);

      if (navigator.clipboard) {
        navigator.clipboard.writeText(result.data.text);
      }
    }
  };
}
$('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' && 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 cmd = {
    type: 'switchSharpness',
  };

  decodeWoker.postMessage(cmd); //通知解码器worker切换分辨率
  var buffer = makeSharpness(Number(id));
  webSocketWorker.postMessage(buffer);
});
var canDraw = false;
//画图形
var draw_graph = function (graphType) {
  //把蒙版放于画板上面
  $('#container').css('z-index', 30);
  $('#dedit').css('z-index', 20);
  // 先画在蒙版上 再复制到画布上
  //鼠标按下获取 开始xy开始画图
  // var ongoingTouches = [];
  var touchstart = function (e) {
    // console.log('🚀 ~ file: WXdraw.js ~ line 244 ~ touchstart ~ e', e);

    if (!isControl) {
      return;
    }
    const action = 0;
    Array.from(e.originalEvent.changedTouches).forEach(function (item, index) {
      const x = item.clientX - item.target.getBoundingClientRect().x;
      const y = item.clientY - item.target.getBoundingClientRect().y;
      return wsss.send(
        JSON.stringify({
          type: 'event',
          data: {
            action,
            count: e.originalEvent.touches.length,
            pointerId: item.identifier,
            x: (function () {
              return (
                resolving
                  ? x * (window.currentPhoneSize.width / vowidth)
                  : y * (window.currentPhoneSize.height / voheight)
              ).toFixed(2);
            })(),
            y: (function () {
              return (
                resolving
                  ? y * (window.currentPhoneSize.height / voheight)
                  : (vowidth - x) * (window.currentPhoneSize.width / vowidth)
              ).toFixed(2);
            })(),
          },
        }),
      );
    });
    canDraw = true;
  };

  //鼠标离开 把蒙版canvas的图片生成到canvas中
  var touchend = function (e) {
    if (!isControl) {
      return;
    }
    const action = 1;
    Array.from(e.originalEvent.changedTouches).forEach(function (item, index) {
      const x = item.clientX - item.target.getBoundingClientRect().x;
      const y = item.clientY - item.target.getBoundingClientRect().y;
      return wsss.send(
        JSON.stringify({
          type: 'event',
          data: {
            action,
            count: e.originalEvent.touches.length,
            pointerId: item.identifier,
            x: (function () {
              return (
                resolving
                  ? x * (window.currentPhoneSize.width / vowidth)
                  : y * (window.currentPhoneSize.height / voheight)
              ).toFixed(2);
            })(),
            y: (function () {
              return (
                resolving
                  ? y * (window.currentPhoneSize.height / voheight)
                  : (vowidth - x) * (window.currentPhoneSize.width / vowidth)
              ).toFixed(2);
            })(),
          },
        }),
      );
    });
    // 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);
    //   // if (resolving) {
    //   //   var verticalWidthX =
    //   //     touchfor[i].pageX * (window.currentPhoneSize.width / vowidth);
    //   //   var verticalHeightY =
    //   //     touchfor[i].pageY * (window.currentPhoneSize.height / voheight);
    //   // } else {
    //   //   var verticalWidthX =
    //   //     touchfor[i].pageX * (window.currentPhoneSize.width / vowidth);
    //   //   var verticalHeightY =
    //   //     touchfor[i].pageY * (window.currentPhoneSize.height / 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: (() =>
    //           (resolving
    //             ? touchfor[i].pageX * (window.currentPhoneSize.width / vowidth)
    //             : touchfor[i].pageY * (window.currentPhoneSize.width / voheight)
    //           ).toFixed(2))(),
    //         y: (() =>
    //           (resolving
    //             ? touchfor[i].pageY *
    //               (window.currentPhoneSize.height / voheight)
    //             : (vowidth - touchfor[i].pageX) *
    //               (window.currentPhoneSize.height / vowidth)
    //           ).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) {
    e.preventDefault();
    if (!isControl) {
      return;
    }
    const action = 2;
    Array.from(e.originalEvent.changedTouches).forEach(function (item, index) {
      const x = item.clientX - item.target.getBoundingClientRect().x;
      const y = item.clientY - item.target.getBoundingClientRect().y;
      return wsss.send(
        JSON.stringify({
          type: 'event',
          data: {
            action,
            count: e.originalEvent.touches.length,
            pointerId: item.identifier,
            x: (function () {
              return (
                resolving
                  ? x * (window.currentPhoneSize.width / vowidth)
                  : y * (window.currentPhoneSize.height / voheight)
              ).toFixed(2);
            })(),
            y: (function () {
              return (
                resolving
                  ? y * (window.currentPhoneSize.height / voheight)
                  : (vowidth - x) * (window.currentPhoneSize.width / vowidth)
              ).toFixed(2);
            })(),
          },
        }),
      );
    });
    // 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);

    //   // let verticalWidthX = 0;
    //   // let verticalHeightY = 0;
    //   // if (resolving) {
    //   //   verticalWidthX =
    //   //     touchfor[i].pageX * (window.currentPhoneSize.width / vowidth);
    //   //   verticalHeightY =
    //   //     touchfor[i].pageY * (window.currentPhoneSize.height / voheight);
    //   // } else {
    //   //   verticalWidthX =
    //   //     touchfor[i].pageX * (window.currentPhoneSize.width / vowidth);
    //   //   verticalHeightY =
    //   //     touchfor[i].pageY * (window.currentPhoneSize.height / 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: (() =>
    //           (resolving
    //             ? touchfor[i].pageX * (window.currentPhoneSize.width / vowidth)
    //             : touchfor[i].pageY * (window.currentPhoneSize.width / voheight)
    //           ).toFixed(2))(),
    //         y: (() =>
    //           (resolving
    //             ? touchfor[i].pageY *
    //               (window.currentPhoneSize.height / voheight)
    //             : (vowidth - touchfor[i].pageX) *
    //               (window.currentPhoneSize.height / vowidth)
    //           ).toFixed(2))(),
    //       },
    //       type: 'event',
    //     };
    //   wsss.send(JSON.stringify(ping));
    // }
  };

  //鼠标离开区域以外 除了涂鸦 都清空
  var mouseout = function () {
    if (graphType != 'handwriting') {
      clearContext();
    }
  };
  $(canvas_bak).off();
  $(canvas_bak).on('touchstart', touchstart);
  $(canvas_bak).on('touchmove', touchmove);
  $(canvas_bak).on('touchend', touchend);
  $(canvas_bak).on('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;
}