WXdraw.js 25 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799
  1. let noOperationSetTimeoutTime = null
  2. let noOperationSetIntervalTime = null
  3. let isFiringNoOperationSetTimeout = false
  4. // 没有任何触碰时会触发该定时器
  5. function noOperationSetTimeout() {
  6. clearTimeout(noOperationSetTimeoutTime)
  7. clearTimeout(noOperationSetIntervalTime)
  8. noOperationSetTimeoutTime = setTimeout(() => {
  9. let index = 10
  10. $.modal({
  11. text: "由于您长时间未操作,将自动断开视频链接(不影响云手机内应用运行)",
  12. buttons: [
  13. { text: "继续操作", className: "default", onClick: function () { noOperationSetTimeout() } },
  14. { text: "退出(10秒)", className: 'operate-time-exit', onClick: function () { quit() } },
  15. ]
  16. });
  17. noOperationSetIntervalTime = setInterval(() => {
  18. if (index <= 0) {
  19. $('.operate-time-exit').text(`退出`)
  20. clearInterval(noOperationSetIntervalTime)
  21. quit()
  22. $.closeModal();
  23. return
  24. }
  25. index--
  26. $('.operate-time-exit').text(`退出(${index}秒)`)
  27. }, 1000)
  28. }, 300000)
  29. }
  30. // 蒙版
  31. var canvas_bak = document.getElementById('box');
  32. var winHeight = window.screen.height - window.innerHeight;
  33. var vowidth = window.screen.width;
  34. var topwinHeightDraw = window.screen.height - window.innerHeight + 30; //计算title top 头部
  35. var numse = window.screen.height; // -winHeight
  36. //计算title top 头部
  37. if (numse <= 70) {
  38. var voheight = window.screen.height - winHeight - 34 - 20;
  39. } else {
  40. var voheight = window.screen.height - topwinHeightDraw - 20;
  41. }
  42. //画笔大小
  43. var resolving = 1; // 1: 竖屏;2:横屏;
  44. var url = window.location.href;
  45. url = url.split('/');
  46. var parameters = GetRequest();
  47. var videoWidth, videoHeight;
  48. var isControl = false; // 是否是观看模式
  49. changIsControl(true);
  50. var isAuth = parameters['authPhone']; // 是否是获取的云手机
  51. var wsss;
  52. var errorTime = 0;
  53. var first = true;
  54. let intervalerPing = null
  55. function changIsControl(value) {
  56. isControl = value;
  57. // if(){}
  58. $('#open-set-phone-size-dialog-btn').attr('hidden', !value);
  59. }
  60. let directivesTimeInterval = 1
  61. // function throttle(fn, delay) {
  62. // var flag = true;
  63. // return () => {
  64. // if (!flag) return;
  65. // flag = false;
  66. // errorTime += delay;
  67. // timer = setTimeout(() => {
  68. // fn();
  69. // flag = true;
  70. // }, delay);
  71. // };
  72. // }
  73. // const throttleDoConnectDirectives = throttle(() => {
  74. // doConnectDirectives();
  75. // }, 100);
  76. function doConnectDirectives() {
  77. videoWidth = Number(resolvingPower) ? Number(resolvingPower) : 720;
  78. videoHeight = videoWidth === 720 ? 1280 : 1920;
  79. wsss = new WebSocket(cUrl);
  80. wsss.binaryType = 'arraybuffer';
  81. wsss.onopen = function () {
  82. $.ajax({
  83. url: baseUrl + '/api/public/v5/pushflow/popup',
  84. headers: {
  85. Authorization: token,
  86. versionName: '5.9.0'
  87. },
  88. type: 'get',
  89. dataType: 'json',
  90. success: function (res) {
  91. let { data } = res
  92. if (data) {
  93. isFiringNoOperationSetTimeout = data
  94. noOperationSetTimeout()
  95. }
  96. },
  97. });
  98. clearInterval(intervalerPing)
  99. // 获取虚拟场景状态
  100. intervalerPing = setInterval(() => {
  101. if (wsss.readyState === 1) {
  102. wsss.send(JSON.stringify({type: 'ping'}));
  103. } else {
  104. clearInterval(intervalerPing);
  105. }
  106. }, 3000)
  107. errorTime = 0;
  108. var pings = { type: 'getVsStatus' };
  109. wsss.send(JSON.stringify(pings));
  110. var bitRate = {
  111. data: {
  112. bitRate: 1243000,
  113. },
  114. type: 'bitRate',
  115. };
  116. wsss.send(JSON.stringify(bitRate));
  117. // 键盘透传 2 是用云机内置的
  118. wsss.send(JSON.stringify({ data: { type: 2 }, type: 'InputMethod' }));
  119. // // 进入发起询问
  120. // var pings2 = {
  121. // type: 'forwardMsg',
  122. // data: {
  123. // code: '3000',
  124. // userName: username,
  125. // desc: '询问是否有在控制', // 可选
  126. // },
  127. // };
  128. // wsss.send(JSON.stringify(pings2));
  129. wsss.send(
  130. JSON.stringify({
  131. type: 'getPhoneSize',
  132. }),
  133. );
  134. // 5.9.5需求: 华为荣耀渠道包应用隐藏,进入其他客户端推流应用全部展示包含(IOS,H5,小程序,PC,安卓其他包);
  135. // H5发送指令显示所有应用
  136. wsss.send(
  137. JSON.stringify({
  138. type: 'hideApp',
  139. data: {
  140. action: 2, // 1: 隐藏 2: 显示
  141. }
  142. }),
  143. );
  144. };
  145. wsss.onerror = function (e) {
  146. clearInterval(intervalerPing)
  147. if (!quitBool) return
  148. if (directivesTimeInterval > 7) {
  149. quit();
  150. return
  151. }
  152. // console.log('🚀 ~ file: WXdraw.js ~ line 82 ~ onerror ~ e', e);
  153. // wsss.close(1006);
  154. // throttle(doConnectDirectives, 100);
  155. // if (errorTime > 1000) {
  156. // quit();
  157. // }
  158. directivesTimeInterval++
  159. // 异常关闭,重连
  160. doConnectDirectives();
  161. // doConnectDirectives();
  162. // throttle(doConnectDirectives, 100);
  163. };
  164. wsss.onclose = function (e) {
  165. // console.log('🚀 ~ file: WXdraw.js ~ line 93 ~ onclose ~ e', e);
  166. // new WebSocket(e.)
  167. // doConnectDirectives();
  168. // if (e.code === 1006) {
  169. // // 异常关闭,重连
  170. // throttleDoConnectDirectives();
  171. // // doConnectDirectives();
  172. // // throttle(doConnectDirectives, 100);
  173. // if (errorTime > 1000) {
  174. // quit();
  175. // }
  176. // }
  177. };
  178. wsss.onmessage = function (res) {
  179. var result = typeof res.data === 'string' ? JSON.parse(res.data) : res.data;
  180. console.log(
  181. '🚀 ~ file: WXdraw.js ~ line 78 ~ doConnectDirectives ~ result',
  182. result,
  183. );
  184. // 接受到这个消息就自动退出云机
  185. if(result.type === 'exitPhone') {
  186. quit()
  187. return
  188. }
  189. if (result.type === 'cutting') {
  190. if (result.data.status === 0) {
  191. $.toast('复制成功', 'text');
  192. } else {
  193. $.toast(result.msg, 'text');
  194. }
  195. return;
  196. }
  197. // if (result.type === 'forwardMsgRep') {
  198. // // 当前云机无其他终端在线,获得控制权
  199. // changIsControl(true);
  200. // }
  201. if (result.type === 'downAdnInstallRep') {
  202. $.toast(result.data.msg, 'text', 4000);
  203. }
  204. // if (result.type === 'forwardMsg') {
  205. // /**
  206. // * @type {boolean} isControl 当前是否拥有控制权,初始化时为false
  207. // * @type {string} isAuth 当前云机类型 - huo: 获取的云机,none: 自己的云机
  208. // * @type {string} username 当前登录的双子星账号username
  209. // */
  210. // if (result.data.userName !== username) {
  211. // switch (String(result.data.code)) {
  212. // case '3000': {
  213. // if (isControl) {
  214. // // 回复有控制
  215. // wsss.send(
  216. // JSON.stringify({
  217. // type: 'forwardMsg',
  218. // data: {
  219. // code: '4000',
  220. // userName: username,
  221. // desc: '有控制', // 可选
  222. // },
  223. // }),
  224. // );
  225. // return;
  226. // }
  227. // // 回复有观看
  228. // wsss.send(
  229. // JSON.stringify({
  230. // type: 'forwardMsg',
  231. // data: {
  232. // code: '4100',
  233. // userName: username,
  234. // desc: '有观看', // 可选
  235. // },
  236. // }),
  237. // );
  238. // return;
  239. // }
  240. // case '4000': {
  241. // // console.log(
  242. // // '🚀 ~ file: WXdraw.js ~ line 184 ~ doConnectDirectives ~ isAuth',
  243. // // isAuth,
  244. // // );
  245. // // 当前是获取方
  246. // if (isAuth === 'huo' && isControl) {
  247. // $.confirm(
  248. // '授权方已收回控制权,您进入观看屏幕模式',
  249. // function () {
  250. // //点击确认后的回调函数
  251. // changIsControl(false);
  252. // },
  253. // function () {
  254. // changIsControl(false);
  255. // //点击取消后的回调函数
  256. // quit();
  257. // },
  258. // );
  259. // return;
  260. // }
  261. // if (isAuth === 'shou') {
  262. // // 当前是授权方切没有控制权
  263. // $.confirm(
  264. // '当前云手机正在授控,是否请求获取云手机控制权?',
  265. // function () {
  266. // //点击确认后的回调函数
  267. // wsss.send(
  268. // JSON.stringify({
  269. // type: 'forwardMsg',
  270. // data: {
  271. // code: '5000',
  272. // userName: username,
  273. // desc: '控制权限收回', // 可选
  274. // },
  275. // }),
  276. // );
  277. // changIsControl(true);
  278. // },
  279. // function () {
  280. // //点击取消后的回调函数
  281. // changIsControl(false);
  282. // },
  283. // );
  284. // return;
  285. // }
  286. // }
  287. // case '5000': {
  288. // // if (result.data.username === username) {
  289. // // changIsControl(true);
  290. // // return;
  291. // // }
  292. // if (isAuth === 'huo' && isControl) {
  293. // $.confirm(
  294. // '授权方已收回控制权,您进入观看屏幕模式',
  295. // function () {
  296. // //点击确认后的回调函数
  297. // changIsControl(false);
  298. // },
  299. // function () {
  300. // changIsControl(false);
  301. // //点击取消后的回调函数
  302. // quit();
  303. // },
  304. // );
  305. // return;
  306. // }
  307. // return;
  308. // }
  309. // default: {
  310. // return;
  311. // }
  312. // }
  313. // }
  314. // return;
  315. // }
  316. if (result.type === 'payInitiateEvent') {
  317. // var url = window.location.href;
  318. // url = url.split('/');
  319. // var baseUrl = url[0] + '//' + url[2];
  320. $.ajax({
  321. url: baseUrl + '/api/pay/third/order',
  322. data: JSON.stringify({
  323. orderNum: result.data.orderNum,
  324. orderAmount: result.data.orderAmount,
  325. appKey: result.data.appKey,
  326. }),
  327. type: 'POST',
  328. dataType: 'json',
  329. contentType: 'application/json;charset=UTF-8',
  330. success: function (res) {
  331. if (result.data.payType === 1) {
  332. // 微信
  333. if (window.__wxjs_environment === 'miniprogram') {
  334. // 小程序
  335. // copyUrl(result.data.payUrl);
  336. } else {
  337. window.location.href = result.data.payUrl;
  338. }
  339. } else {
  340. window.location.href = result.data.payUrl;
  341. }
  342. },
  343. });
  344. return;
  345. }
  346. if (result.type === 'getPhoneSize' || result.type === 'setPhoneSize') {
  347. // console.log(result);
  348. if (
  349. window.currentPhoneSize &&
  350. (window.currentPhoneSize.width !==
  351. Math.min(result.data.width, result.data.height) ||
  352. window.currentPhoneSize.height !==
  353. Math.max(result.data.width, result.data.height) ||
  354. window.currentPhoneSize.dpi !== result.data.dpi)
  355. ) {
  356. // 获取到的分辨率与当前分辨率不符
  357. const data = window.phoneSizeList.find(function (v) {
  358. return (
  359. v.width === Math.min(result.data.width, result.data.height) &&
  360. v.height === Math.max(result.data.width, result.data.height) &&
  361. v.dpi === result.data.dpi
  362. );
  363. });
  364. window.currentPhoneSize = data || {
  365. width: Math.min(result.data.width, result.data.height),
  366. height: Math.max(result.data.width, result.data.height),
  367. dpi: result.data.dpi,
  368. };
  369. if (result.type === 'setPhoneSize') {
  370. lastSetPhone = Date.now();
  371. }
  372. // if (result.type === 'getPhoneSize') {
  373. // 上报给后端
  374. $.ajax({
  375. url:
  376. baseUrl +
  377. '/api/resources/v5/machine/resolution/operationResolvingPower',
  378. headers: {
  379. Authorization: token,
  380. },
  381. type: 'post',
  382. dataType: 'json',
  383. contentType: 'application/json; charset=UTF-8',
  384. data: JSON.stringify({
  385. userCardId: window.userCardId,
  386. resolvingPowerId: window.currentPhoneSize.id,
  387. }),
  388. });
  389. }
  390. // }
  391. updateDB(db, storeName, {
  392. id: userCardId,
  393. socketURL: socketURL,
  394. cUrl: cUrl,
  395. cardToken: cardToken,
  396. resolvingPower: resolvingPower,
  397. width: window.currentPhoneSize.width,
  398. height: window.currentPhoneSize.height,
  399. dpi: window.currentPhoneSize.dpi,
  400. });
  401. return;
  402. }
  403. if (result.type === 'reProduceText') {
  404. // 接收到云机剪贴板复制事件
  405. // window.copyToClipboard(result.data.text);
  406. if (navigator.clipboard) {
  407. navigator.clipboard.writeText(result.data.text);
  408. }
  409. }
  410. };
  411. }
  412. draw_graph('pencil', $('body'));
  413. //剪切板
  414. $('.upload').on('click', function () {
  415. var texts = $(this).attr('data-text');
  416. if (texts == 'uploads') {
  417. $('.mainbox').css({
  418. display: 'block',
  419. });
  420. $('.sbox').css({
  421. display: 'none',
  422. });
  423. }
  424. });
  425. //home 控制home
  426. $('.botmat1img').on('click', function () {
  427. var codes = $(this).attr('data-text');
  428. if (codes == 'home' && isControl) {
  429. wsss.send(ExexuteKeyBoard(3));
  430. } else if (codes == 'return' && isControl) {
  431. wsss.send(ExexuteKeyBoard(4));
  432. } else if (codes == 'gengduo' && isControl) {
  433. wsss.send(ExexuteKeyBoard(187));
  434. }
  435. });
  436. // 高清控制
  437. $('.PictureQuality').on('click', function () {
  438. if (!isControl) {
  439. return;
  440. }
  441. $(this).addClass('avit').siblings().removeClass('avit');
  442. var id = $(this).attr('data-id');
  443. var cmd = {
  444. type: 'switchSharpness',
  445. };
  446. decodeWoker.postMessage(cmd); //通知解码器worker切换分辨率
  447. var buffer = makeSharpness(Number(id));
  448. webSocketWorker.postMessage(buffer);
  449. $('.control-right-img').attr({
  450. 'data-id': '1',
  451. });
  452. $('.leftmains').css({
  453. right: '-4rem',
  454. });
  455. });
  456. // virtual-key-btn 显/隐藏虚拟键
  457. $('#virtual-key-btn').on('click', function () {
  458. // 获取当前点击的按钮的innerText
  459. let innerText = $(this).text();
  460. if (innerText.indexOf('显示') !== -1) {
  461. innerText = '隐藏虚拟键';
  462. $('#wine').css('height', window.innerHeight - 50);
  463. $('.bottommains').css('display', 'block');
  464. } else {
  465. innerText = '显示虚拟键';
  466. $('#wine').css('height', window.innerHeight);
  467. $('.bottommains').css('display', 'none');
  468. }
  469. // 更新按钮的innerText
  470. $(this).text(innerText);
  471. })
  472. var canDraw = false;
  473. //画图形
  474. function draw_graph(graphType) {
  475. //把蒙版放于画板上面
  476. $('#container').css('z-index', 30);
  477. $('#dedit').css('z-index', 20);
  478. // 先画在蒙版上 再复制到画布上
  479. //鼠标按下获取 开始xy开始画图
  480. // var ongoingTouches = [];
  481. var touchstart = function (e) {
  482. if (isFiringNoOperationSetTimeout) noOperationSetTimeout()
  483. // console.log('🚀 ~ file: WXdraw.js ~ line 244 ~ touchstart ~ e', e);
  484. if (!isControl) {
  485. return;
  486. }
  487. const action = 0;
  488. Array.from(e.originalEvent.changedTouches).forEach(function (item, index) {
  489. const x = item.clientX - item.target.getBoundingClientRect().x;
  490. const y = item.clientY - item.target.getBoundingClientRect().y;
  491. return wsss.send(
  492. JSON.stringify({
  493. type: 'event',
  494. data: {
  495. action,
  496. count: e.originalEvent.touches.length,
  497. pointerId: item.identifier,
  498. x: (function () {
  499. return (
  500. resolving
  501. ? x * (window.currentPhoneSize.width / vowidth)
  502. : y * (window.currentPhoneSize.height / voheight)
  503. ).toFixed(2);
  504. })(),
  505. y: (function () {
  506. return (
  507. resolving
  508. ? y * (window.currentPhoneSize.height / voheight)
  509. : (vowidth - x) * (window.currentPhoneSize.width / vowidth)
  510. ).toFixed(2);
  511. })(),
  512. },
  513. }),
  514. );
  515. });
  516. canDraw = true;
  517. };
  518. //鼠标离开 把蒙版canvas的图片生成到canvas中
  519. var touchend = function (e) {
  520. if (!isControl) {
  521. return;
  522. }
  523. if (isFiringNoOperationSetTimeout) noOperationSetTimeout()
  524. const action = 1;
  525. Array.from(e.originalEvent.changedTouches).forEach(function (item, index) {
  526. const x = item.clientX - item.target.getBoundingClientRect().x;
  527. const y = item.clientY - item.target.getBoundingClientRect().y;
  528. return wsss.send(
  529. JSON.stringify({
  530. type: 'event',
  531. data: {
  532. action,
  533. count: e.originalEvent.touches.length,
  534. pointerId: item.identifier,
  535. x: (function () {
  536. return (
  537. resolving
  538. ? x * (window.currentPhoneSize.width / vowidth)
  539. : y * (window.currentPhoneSize.height / voheight)
  540. ).toFixed(2);
  541. })(),
  542. y: (function () {
  543. return (
  544. resolving
  545. ? y * (window.currentPhoneSize.height / voheight)
  546. : (vowidth - x) * (window.currentPhoneSize.width / vowidth)
  547. ).toFixed(2);
  548. })(),
  549. },
  550. }),
  551. );
  552. });
  553. // var touchfor = e.originalEvent.changedTouches; //for 的手指数组
  554. // //是否横屏
  555. // for (var i = 0; i < touchfor.length; i++) {
  556. // // var acrossWidthX = touchfor[i].pageY * (videoHeight / voheight);
  557. // // var acrossHeightY =
  558. // // videoWidth - touchfor[i].pageX * (videoWidth / vowidth);
  559. // // if (resolving) {
  560. // // var verticalWidthX =
  561. // // touchfor[i].pageX * (window.currentPhoneSize.width / vowidth);
  562. // // var verticalHeightY =
  563. // // touchfor[i].pageY * (window.currentPhoneSize.height / voheight);
  564. // // } else {
  565. // // var verticalWidthX =
  566. // // touchfor[i].pageX * (window.currentPhoneSize.width / vowidth);
  567. // // var verticalHeightY =
  568. // // touchfor[i].pageY * (window.currentPhoneSize.height / voheight);
  569. // // }
  570. // var ping =
  571. // // resolving == 0 ?
  572. // // { "data": { "action": 1, "count": ongoingTouches.length, "pointerId": touchfor[i].identifier, "x": acrossWidthX.toFixed(2), "y": acrossHeightY.toFixed(2) }, "type": "event" } :
  573. // {
  574. // data: {
  575. // action: 1,
  576. // count: ongoingTouches.length,
  577. // pointerId: touchfor[i].identifier,
  578. // x: (() =>
  579. // (resolving
  580. // ? touchfor[i].pageX * (window.currentPhoneSize.width / vowidth)
  581. // : touchfor[i].pageY * (window.currentPhoneSize.width / voheight)
  582. // ).toFixed(2))(),
  583. // y: (() =>
  584. // (resolving
  585. // ? touchfor[i].pageY *
  586. // (window.currentPhoneSize.height / voheight)
  587. // : (vowidth - touchfor[i].pageX) *
  588. // (window.currentPhoneSize.height / vowidth)
  589. // ).toFixed(2))(),
  590. // },
  591. // type: 'event',
  592. // };
  593. // wsss.send(JSON.stringify(ping));
  594. // ongoingTouches.forEach(function (item, index) {
  595. // if (item.identifier === touchfor[i].identifier) {
  596. // ongoingTouches.splice(index, 1);
  597. // }
  598. // });
  599. // }
  600. canDraw = false;
  601. };
  602. //清空层 云手机超出屏幕的开关
  603. var clearContext = function () {
  604. canDraw = false;
  605. };
  606. // 鼠标移动
  607. var touchmove = function (e) {
  608. e.preventDefault();
  609. if (isFiringNoOperationSetTimeout) noOperationSetTimeout()
  610. if (!isControl) {
  611. return;
  612. }
  613. const action = 2;
  614. Array.from(e.originalEvent.changedTouches).forEach(function (item, index) {
  615. const x = item.clientX - item.target.getBoundingClientRect().x;
  616. const y = item.clientY - item.target.getBoundingClientRect().y;
  617. return wsss.send(
  618. JSON.stringify({
  619. type: 'event',
  620. data: {
  621. action,
  622. count: e.originalEvent.touches.length,
  623. pointerId: item.identifier,
  624. x: (function () {
  625. return (
  626. resolving
  627. ? x * (window.currentPhoneSize.width / vowidth)
  628. : y * (window.currentPhoneSize.height / voheight)
  629. ).toFixed(2);
  630. })(),
  631. y: (function () {
  632. return (
  633. resolving
  634. ? y * (window.currentPhoneSize.height / voheight)
  635. : (vowidth - x) * (window.currentPhoneSize.width / vowidth)
  636. ).toFixed(2);
  637. })(),
  638. },
  639. }),
  640. );
  641. });
  642. // var touchfor = e.originalEvent.targetTouches; //for 的手指数组
  643. // for (var i = 0; i < touchfor.length; i++) {
  644. // // var acrossWidthX = touchfor[i].pageY * (videoHeight / voheight);
  645. // // var acrossHeightY =
  646. // // videoWidth - touchfor[i].pageX * (videoWidth / vowidth);
  647. // // let verticalWidthX = 0;
  648. // // let verticalHeightY = 0;
  649. // // if (resolving) {
  650. // // verticalWidthX =
  651. // // touchfor[i].pageX * (window.currentPhoneSize.width / vowidth);
  652. // // verticalHeightY =
  653. // // touchfor[i].pageY * (window.currentPhoneSize.height / voheight);
  654. // // } else {
  655. // // verticalWidthX =
  656. // // touchfor[i].pageX * (window.currentPhoneSize.width / vowidth);
  657. // // verticalHeightY =
  658. // // touchfor[i].pageY * (window.currentPhoneSize.height / voheight);
  659. // // }
  660. // var ping =
  661. // // resolving == 0 ?
  662. // // { "data": { "action": 2, "count": touchfor.length, "pointerId": touchfor[i].identifier, "x": acrossWidthX.toFixed(2), "y": acrossHeightY.toFixed(2) }, "type": "event" } :
  663. // {
  664. // data: {
  665. // action: 2,
  666. // count: touchfor.length,
  667. // pointerId: touchfor[i].identifier,
  668. // x: (() =>
  669. // (resolving
  670. // ? touchfor[i].pageX * (window.currentPhoneSize.width / vowidth)
  671. // : touchfor[i].pageY * (window.currentPhoneSize.width / voheight)
  672. // ).toFixed(2))(),
  673. // y: (() =>
  674. // (resolving
  675. // ? touchfor[i].pageY *
  676. // (window.currentPhoneSize.height / voheight)
  677. // : (vowidth - touchfor[i].pageX) *
  678. // (window.currentPhoneSize.height / vowidth)
  679. // ).toFixed(2))(),
  680. // },
  681. // type: 'event',
  682. // };
  683. // wsss.send(JSON.stringify(ping));
  684. // }
  685. };
  686. //鼠标离开区域以外 除了涂鸦 都清空
  687. var mouseout = function () {
  688. if (isFiringNoOperationSetTimeout) noOperationSetTimeout()
  689. if (graphType != 'handwriting') {
  690. clearContext();
  691. }
  692. };
  693. $(canvas_bak).off();
  694. $(canvas_bak).on('touchstart', touchstart);
  695. $(canvas_bak).on('touchmove', touchmove);
  696. $(canvas_bak).on('touchend', touchend);
  697. $(canvas_bak).on('mouseout', mouseout);
  698. };
  699. function GetRequest() {
  700. var url = location.search; // 获取url中"?"符后的字串
  701. var obj = new Object();
  702. if (url.indexOf('?') != -1) {
  703. var str = url.substr(1);
  704. strs = str.split('&');
  705. for (var i = 0; i < strs.length; i++) {
  706. obj[strs[i].split('=')[0]] = strs[i].split('=')[1];
  707. }
  708. }
  709. return obj;
  710. }
  711. // 添加监听 页面显示或隐藏 事件
  712. document.addEventListener('visibilitychange', visibilitychanged);
  713. // 监听 页面显示或隐藏 执行的函数
  714. function visibilitychanged() {
  715. // 获取当前环境
  716. const env = isBrowserEnvironment();
  717. // 获取当前页面的可见性状态
  718. const visibilityState = document.visibilityState;
  719. if (visibilityState === 'visible') {
  720. // 页面显示时的逻辑
  721. // 网页重载
  722. if (env.isBrowser && env.isTopWindow && env.isIPhone) {
  723. location.reload();
  724. }
  725. } else if (visibilityState === 'hidden') {
  726. // 页面隐藏时的逻辑
  727. // video.pause();
  728. } else if (visibilityState === 'prerender') {
  729. // 页面预渲染时的逻辑
  730. console.log('页面处于预渲染状态');
  731. } else if (visibilityState === 'unloaded') {
  732. // 页面即将卸载时的逻辑 移除监听
  733. document.removeEventListener('visibilitychange', visibilitychanged);
  734. }
  735. }
  736. /**
  737. * @description: 判断当前页面运行环境
  738. * @return {Object} 返回当前页面运行环境
  739. */
  740. function isBrowserEnvironment() {
  741. // 判断是否在浏览器环境中
  742. const isBrowser = typeof window !== 'undefined' && typeof document !== 'undefined' && typeof navigator !== 'undefined';
  743. // 判断是否在微信环境中
  744. const isWechat = /MicroMessenger/i.test(navigator.userAgent);
  745. // 判断是否在微信小程序的 web-view 中
  746. const isMiniProgramWebview = isWechat && /miniProgram/i.test(navigator.userAgent);
  747. // 判断是否是 iPhone 设备
  748. const isIPhone = /iPhone/i.test(navigator.userAgent);
  749. // 判断是否是顶级窗口(不是嵌套在 iframe 中)目前只有ios的浏览器中才会是顶级窗口
  750. const isTopWindow = window.parent === window.self;
  751. return {
  752. isBrowser, // 是否在浏览器环境中
  753. isWechat, // 是否在微信环境中
  754. isMiniProgramWebview, // 是否在微信小程序的 web-view 中
  755. isIPhone, // 是否是 iPhone 设备
  756. isTopWindow, // 是否是顶级窗口
  757. };
  758. }