WXtrialInterface.html 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title></title>
  6. <meta name="x5-orientation" content="portrait" />
  7. <meta name="screen-orientation" content="portrait" />
  8. <meta name="apple-mobile-web-app-capable" content="yes">
  9. <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
  10. <!-- 删除苹果默认的工具栏和菜单栏 -->
  11. <meta name="apple-mobile-web-app-status-bar-style" content="black">
  12. <!-- 设置苹果工具栏颜 -->
  13. <meta name="format-detection" content="telphone=no, email=no">
  14. <!-- 忽略页面中的数字识别为电话,忽略email识别 -->
  15. <!-- 启用360浏览器的极速模(webkit) -->
  16. <meta name="renderer" content="webkit">
  17. <!-- 避免IE使用兼容模式 -->
  18. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  19. <!-- 针对手持设备优化,主要是针对一些老的不识别viewport的浏览器,比如黑 -->
  20. <meta name="HandheldFriendly" content="true">
  21. <!-- 微软的老式浏览 -->
  22. <meta name="MobileOptimized" content="320">
  23. <!-- 不能旋转,问题出在这 -->
  24. <!-- UC强制全屏 -->
  25. <meta name="full-screen" content="yes">
  26. <!-- QQ强制全屏 -->
  27. <meta name="x5-fullscreen" content="true">
  28. <!-- UC应用模式 -->
  29. <meta name="browsermode" content="application">
  30. <!-- QQ应用模式 -->
  31. <meta name="x5-page-mode" content="app">
  32. <!-- windows phone 点击无高 -->
  33. <meta name="msapplication-tap-highlight" content="no">
  34. <link rel="stylesheet" type="text/css" href="css/WXtrialInterface.css" />
  35. <link rel="stylesheet" href="https://cdn.bootcss.com/weui/1.1.3/style/weui.min.css">
  36. <link rel="stylesheet" href="https://cdn.bootcss.com/jquery-weui/1.2.1/css/jquery-weui.min.css">
  37. </head>
  38. <body class="scroll h-player" style="overscroll-behavior: contain;">
  39. <div class="container" id="player">
  40. <div class="muted" id="btnMuted">
  41. <div class="control-right-img" data-id="1">
  42. <img src="../static/img/xuanfu_icon.png">
  43. </div>
  44. </div>
  45. <div id="wine">
  46. <div id="box">
  47. <canvas id="playCanvas" width="450" height="800"></canvas>
  48. </div>
  49. </div>
  50. <div class="leftmains">
  51. <div class="PictureQualityMain">
  52. <div class="PictureQuality " data-id="3072000">高清</div>
  53. <div class="PictureQuality avit" data-id="2243000">标清</div>
  54. <div class="PictureQuality" data-id="400000">极速</div>
  55. <div class="PictureQuality" data-id="400000">自动</div>
  56. </div>
  57. <div class="operation">
  58. <div class="upload" id="showsuss" data-text="uploads">
  59. <img src="../static/img/wx/shangchuan_icon.png">
  60. <div>上传</div>
  61. </div>
  62. <div class="upload" onclick="cp(document.getElementById('user_ref_id'));" data-text="Shearplate">
  63. <img src="../static/img/wx/jianqieban_icon.png">
  64. <div>剪切板</div>
  65. </div>
  66. <div class="upload" id="upload" data-text="Signout">
  67. <img src="../static/img/wx/tuichu_icon.png">
  68. <div>退出</div>
  69. </div>
  70. </div>
  71. </div>
  72. <div class="bottommains">
  73. <div class="botmat1">
  74. <div class="botmat1img" data-text="gengduo">
  75. <img src="../static/img/wx/gengduo_icon.png">
  76. </div>
  77. </div>
  78. <div class="botmat1">
  79. <div class="botmat1img" data-text="home">
  80. <img src="../static/img/wx/home_icon.png">
  81. </div>
  82. </div>
  83. <div class="botmat1">
  84. <div class="botmat1img" data-text="return">
  85. <img src="../static/img/wx/fanhui_icon.png">
  86. </div>
  87. </div>
  88. </div>
  89. <div class="mainbox" style="display: none;">
  90. <div class="boxTitle">提示</div>
  91. <div class="boxText">
  92. <div>由于小程序的功能限制,此功能暂时</div>
  93. <div>无法使用,请下载APP使用更多功能</div>
  94. </div>
  95. <div class="boxbt" onclick="cp(document.getElementById('user_ref_id'));">立即前往下载</div>
  96. <div class="boximg"><img src="../static/img/wx/guanbi_icon.png"></div>
  97. </div>
  98. <div class="sbox" style="display: none;">
  99. <div class="sboxText">下载地址已复制到剪切板</div>
  100. <div class="sboxbu">确定</div>
  101. </div>
  102. <div class="loading"></div>
  103. </div>
  104. <div class="weui-mask_transparent"></div>
  105. <div class="weui-toast weui_loading_toast weui-toast--visible">
  106. <div class="weui_loading"><i class="weui-loading weui-icon_toast"></i></div>
  107. <p class="weui-toast_content">数据加载中</p>
  108. </div>
  109. <div id="copy-txt" style="position: absolute;opacity: 0;">
  110. <span id="user_ref_id">www.androidsCloud.com</span>
  111. </div>
  112. <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
  113. <script type="text/javascript" src="jquery-1.11.0.min.js"></script>
  114. <!-- ffm软解 -->
  115. <script type="text/javascript" src="helper.js"></script>
  116. <script type="text/javascript" src="jquery-weui.min.js"></script>
  117. <script type="text/javascript" src="pcm-player.js"></script>
  118. <script type="text/javascript" src="webgl.js"></script>
  119. <script type="text/javascript" src="https://cdn.bootcss.com/vConsole/3.2.0/vconsole.min.js"></script>
  120. <script type="text/javascript" src="WXdraw.js?id=105"></script>
  121. <script>
  122. var topwinHeight = window.screen.height - window.innerHeight + 30; //计算title top 头部
  123. var renderCount = 0
  124. $('#wine').css({
  125. "width": window.screen.width,
  126. "height": window.screen.height - topwinHeight - 20,
  127. "position": "absolute"
  128. })
  129. $('.loading').css({
  130. "width": window.screen.width,
  131. "height": window.screen.height - topwinHeight - 20
  132. });
  133. var winese = document.createElement("wine");
  134. wine.style.top = "-" + winese + 'px';
  135. var isAudioPlay = false;
  136. $.alert({
  137. title: '提示',
  138. text: '开始使用云手机',
  139. onOK: function () {
  140. isAudioPlay = true;
  141. }
  142. });
  143. var url = window.location.href;
  144. url = url.split('/');
  145. var baseUrl = "http://192.168.199.243";
  146. var form = {};
  147. // 审核
  148. $.ajax({
  149. url: baseUrl + "/api/user/v1/config/download/isShow",
  150. data: {},
  151. type: 'get',
  152. dataType: 'json',
  153. success: function (data) {
  154. if (data.data) {
  155. $("#showsuss").show()
  156. } else {
  157. $("#showsuss").hide()
  158. }
  159. }
  160. })
  161. var parameters = GetRequest();
  162. form.clientType = parameters['clientType'];
  163. form.diskName = parameters['clientType'];
  164. if (form.clientType == 1) {
  165. form.cardIp = parameters['cardIp'];
  166. form.port = parameters['port'];
  167. form.sn = parameters['sn'];
  168. form.demoTime = parameters['demoTime'];
  169. form.id = parameters['id'];
  170. } else if (form.clientType == 2) { // 分享屏幕
  171. $(".leftmains").css({
  172. "right": "-4rem"
  173. })
  174. $('.leftmains').hide()
  175. $('.bottommains').hide()
  176. $('#btnMuted').hide()
  177. form.id = parameters['id'];
  178. form.username = parameters['username'];
  179. form.ip = parameters['ip'];
  180. form.userCardId = parameters['userCardId'];
  181. } else {
  182. form.username = parameters['username'];
  183. form.userCardId = parameters['userCardId'];
  184. }
  185. var orientation = 0; //0 竖屏,1横屏
  186. document.body.addEventListener('touchmove', function (e) {
  187. e.preventDefault();
  188. }, {
  189. passive: false
  190. })
  191. // 初始化一下就可以了,
  192. var vConsole = new VConsole();
  193. var btnMuted = document.querySelector("#btnMuted");
  194. btnMuted && (function () {
  195. var setHistory = function (left, top) {
  196. try {
  197. localStorage.setItem("muted-btn-loc", JSON.stringify({
  198. left: left,
  199. top: top
  200. }));
  201. } catch (ex) { }
  202. };
  203. var getHistory = function () {
  204. try {
  205. var value = localStorage.getItem("muted-btn-loc");
  206. if (!value) return null;
  207. value = JSON.parse(value);
  208. if (!value) return null;
  209. return value;
  210. } catch (ex) {
  211. return null
  212. }
  213. };
  214. var fixLoc = function (loc) {
  215. var rect = btnMuted.getBoundingClientRect();
  216. rect = {
  217. top: rect.top,
  218. left: rect.left,
  219. width: rect.width,
  220. height: rect.height
  221. }; // 部分低版本浏览器,该属性为只读
  222. if (loc) {
  223. rect.left = loc.left;
  224. rect.top = loc.top;
  225. }
  226. var minX = 0;
  227. var minY = 0;
  228. var docRect = document.documentElement.getBoundingClientRect();
  229. var maxY = docRect.height - rect.height;
  230. var maxX = docRect.width - rect.width;
  231. var left = rect.left;
  232. var top = rect.top;
  233. left = Math.min(left, maxX);
  234. left = Math.max(left, minX);
  235. top = Math.min(top, maxY);
  236. top = Math.max(top, minY);
  237. if (loc || top !== rect.top || left !== rect.left) {
  238. btnMuted.style.cssText += "left:" + left + "px;top:" + top + "px;";
  239. }
  240. }
  241. window.addEventListener("resize", function () {
  242. fixLoc();
  243. });
  244. var touchPoint = {
  245. pageY: 0,
  246. pageX: 0
  247. };
  248. var currentLoc = {
  249. top: 0,
  250. left: 0,
  251. curTop: 0,
  252. curLeft: 0
  253. };
  254. var toMove = false;
  255. var touchmove = function (e) {
  256. e.preventDefault();
  257. var point = e.changedTouches[0];
  258. var top = -touchPoint.pageY + point.pageY;
  259. var left = -touchPoint.pageX + point.pageX;
  260. if (toMove) {
  261. top += currentLoc.top;
  262. left += currentLoc.left;
  263. currentLoc.curLeft = left;
  264. currentLoc.curTop = top;
  265. btnMuted.style.cssText += "left:" + left + "px;top:" + top + "px;";
  266. } else {
  267. if (Math.abs(top) >= 5 || Math.abs(left) >= 5) {
  268. toMove = true;
  269. }
  270. }
  271. };
  272. var touchend = function () {
  273. window.removeEventListener("touchmove", touchmove, {
  274. passive: false
  275. });
  276. window.removeEventListener("touchend", touchend, {
  277. passive: false
  278. });
  279. if (toMove) {
  280. setHistory(currentLoc.curLeft, currentLoc.curTop);
  281. fixLoc();
  282. } else {
  283. //按点击处理
  284. var set = $('.control-right-img').attr("data-id")
  285. if (set == '1') {
  286. $('.control-right-img').attr({
  287. "data-id": "2"
  288. })
  289. $(".leftmains").css({
  290. "right": "-4rem"
  291. })
  292. } else {
  293. $('.control-right-img').attr({
  294. "data-id": "1"
  295. })
  296. $(".leftmains").css({
  297. "right": "0rem"
  298. })
  299. }
  300. }
  301. }
  302. btnMuted.addEventListener("touchstart", function (e) {
  303. e.preventDefault();
  304. toMove = false;
  305. var point = e.changedTouches[0];
  306. touchPoint.pageX = point.pageX;
  307. touchPoint.pageY = point.pageY;
  308. var rect = e.target.getBoundingClientRect();
  309. currentLoc.top = rect.top;
  310. currentLoc.left = rect.left;
  311. window.addEventListener("touchmove", touchmove, {
  312. passive: false
  313. });
  314. window.addEventListener("touchend", touchend, {
  315. passive: false
  316. });
  317. }, {
  318. passive: false
  319. });
  320. var history = getHistory();
  321. if (history) {
  322. fixLoc(history);
  323. }
  324. btnMuted.classList.remove("hide");
  325. })();
  326. $(".boximg").on("click", function () {
  327. $(".mainbox").css({
  328. "display": "none"
  329. })
  330. })
  331. // 剪切板
  332. $(".sboxbu").on("click", function () {
  333. $(".sbox").css({
  334. "display": "none"
  335. })
  336. })
  337. // 剪切板
  338. $(".uploadss").on("click", function () {
  339. $(".sbox").css({
  340. "display": "none"
  341. })
  342. })
  343. $("#upload").on("click", function () {
  344. wx.miniProgram.switchTab({
  345. url: '/pages/home/home'
  346. })
  347. })
  348. function selectText(x) {
  349. if (document.selection) {
  350. var range = document.body.createTextRange();
  351. range.moveToElementText(x);
  352. range.select();
  353. } else if (window.getSelection) {
  354. var selection = window.getSelection();
  355. var range = document.createRange();
  356. selection.removeAllRanges();
  357. range.selectNodeContents(x);
  358. selection.addRange(range);
  359. }
  360. }
  361. function cp(x) {
  362. $(".mainbox").css({
  363. "display": "none"
  364. })
  365. $(".sbox").css({
  366. "display": "block"
  367. })
  368. selectText(x);
  369. document.execCommand("copy");
  370. }
  371. var decodeCount = 1;
  372. var isFinish = false;
  373. var player = new PCMPlayer({
  374. encoding: '16bitInt',
  375. channels: 2,
  376. sampleRate: 44100,
  377. flushingTime: 22,
  378. debug: false
  379. });
  380. Module = {};
  381. Module.onRuntimeInitialized = function () {
  382. isFinish = true;
  383. }
  384. function decodeAAC(data) {
  385. var retPtr = Module._malloc(4 * 5 * 1024); //接收的数据
  386. var inputPtr = Module._malloc(4 * data.length); //输入数据
  387. for (var i = 0; i < data.length; i++) {
  388. Module.HEAPU8[(inputPtr) + i] = data[i]; //转换为堆数据
  389. }
  390. var pcmLen = Module._feedData(retPtr, inputPtr, data.length);
  391. if (pcmLen >= 0) {
  392. var pcmData = new Uint8Array(pcmLen);
  393. for (var i = 0; i < pcmLen; i++) {
  394. pcmData[i] = Module.HEAPU8[(retPtr) + i]
  395. }
  396. player.feed(pcmData);
  397. }
  398. decodeCount++;
  399. Module._free(inputPtr);
  400. Module._free(retPtr);
  401. }
  402. var decodeWoker = new Worker('decoder.js');
  403. var myVideo = document.getElementById("playCanvas");
  404. decodeWoker.onmessage = function (event) {
  405. var objData = event.data;
  406. switch (objData.cmd) {
  407. case 0:
  408. break;
  409. case 1:
  410. if (renderCount++ < 3 || !isAudioPlay) {
  411. return
  412. }
  413. webglPlayer.renderFrame(objData.data, 720, 1280, 720 * 1280, (720 / 2) * (1280 / 2));
  414. $('.weui-mask_transparent').hide()
  415. $('.weui-toast').hide()
  416. $('.loading').hide()
  417. }
  418. }
  419. var isFinish = false;
  420. var webglPlayer = new WebGLPlayer(myVideo, {
  421. preserveDrawingBuffer: false
  422. });
  423. function GetRequest() {
  424. var url = location.search; // 获取url中"?"符后的字串
  425. var obj = new Object();
  426. if (url.indexOf("?") != -1) {
  427. var str = url.substr(1);
  428. strs = str.split("&");
  429. for (var i = 0; i < strs.length; i++) {
  430. obj[strs[i].split("=")[0]] = (strs[i].split("=")[1]);
  431. }
  432. }
  433. return obj;
  434. }
  435. var ip = parameters["ip"];
  436. var domainName = parameters["domainName"];
  437. var webSocketWorker = new Worker('websocket.js?ip=' + ip + '&domainName=' + domainName);
  438. webSocketWorker.onmessage = function (event) {
  439. var input = event.data;
  440. if (input[0] == 0xff && isAudioPlay && renderCount >= 3) {
  441. decodeAAC(input);
  442. }
  443. if (input[0] == 0 && input[1] == 0 && input[2] == 0 && input[3] == 1) {
  444. decodeWoker.postMessage(event.data);
  445. }
  446. if (input[0] == 0x68) {
  447. if (input[23] == 0x05) { //横竖屏标识
  448. var state = CheckScreenDirection(input.slice(24, 24 + 8));
  449. if (state == 1) {
  450. console.log("安卓卡此时竖屏");
  451. //竖屏处理
  452. resolving = 0;
  453. } else {
  454. console.log("安卓卡此时横屏");
  455. //横屏处理
  456. resolving = 1;
  457. }
  458. }
  459. if (input[23] == 0x0b) {
  460. console.log("多端登陆");
  461. }
  462. }
  463. if (event.data === 'close') {
  464. webSocketWorker.postMessage('restart');
  465. }
  466. }
  467. function Close() { // webworker 关闭,清理
  468. var cmd = {
  469. cmd: 0
  470. };
  471. decodeWoker.postMessage(cmd);
  472. decodeWoker.terminate();
  473. webSocketWorker.postMessage(cmd);
  474. webSocketWorker.terminate();
  475. }
  476. var isDrag = false;
  477. myVideo.onkeydown = function (event) {
  478. ExexuteKeyDown(e.keyCode, form.sn);
  479. }
  480. </script>
  481. <script type="text/javascript" src="aac.js"></script>
  482. </body>
  483. </html>