homeNew.html 37 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="initial-scale=1,maximum-scale=1, minimum-scale=1,user-scalable=no">
  7. <meta name="x5-orientation" content="portrait" />
  8. <meta name="screen-orientation" content="portrait" />
  9. <meta name="viewport" content="width=device-width, minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
  10. <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
  11. <meta name="apple-mobile-web-app-capable" content="yes">
  12. <meta name="apple-mobile-web-app-status-bar-style" content="black">
  13. <meta name="format-detection" content="telephone=no, email=no">
  14. <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
  15. <meta name="apple-mobile-web-app-capable" content="yes">
  16. <!-- 删除苹果默认的工具栏和菜单栏 -->
  17. <meta name="apple-mobile-web-app-status-bar-style" content="black">
  18. <!-- 设置苹果工具栏颜��? -->
  19. <meta name="format-detection" content="telphone=no, email=no">
  20. <!-- 忽略页面中的数字识别为电话,忽略email识别 -->
  21. <!-- 启用360浏览器的极速模��?(webkit) -->
  22. <meta name="renderer" content="webkit">
  23. <!-- 避免IE使用兼容模式 -->
  24. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  25. <!-- 针对手持设备优化,主要是针对一些老的不识别viewport的浏览器,比如黑��? -->
  26. <meta name="HandheldFriendly" content="true">
  27. <!-- 微软的老式浏览��? -->
  28. <meta name="MobileOptimized" content="320">
  29. <!-- uc强制竖屏 -->
  30. <!-- <meta name="screen-orientation" content="portrait"> -->
  31. <!-- QQ强制竖屏 -->
  32. <!-- <meta name="x5-orientation" content="portrait"> -->
  33. <!-- 不能旋转,问题出在这 -->
  34. <!-- UC强制全屏 -->
  35. <meta name="full-screen" content="yes">
  36. <!-- QQ强制全屏 -->
  37. <meta name="x5-fullscreen" content="true">
  38. <!-- UC应用模式 -->
  39. <meta name="browsermode" content="application">
  40. <!-- QQ应用模式 -->
  41. <meta name="x5-page-mode" content="app">
  42. <!-- windows phone 点击无高��? -->
  43. <meta name="msapplication-tap-highlight" content="no">
  44. <title></title>
  45. <link rel="stylesheet" href="../static/css/homeNew.css?id=104">
  46. <link rel="stylesheet" type="text/css" href="../static/css/swiper-bundle.min.css" />
  47. <script src="../static/css/swiper-bundle.min.js"></script>
  48. <style>
  49. .swiper-button-next {
  50. width: 15px;
  51. height: 15px;
  52. background: url(../static/img/xia_icon.png);
  53. right: 15px;
  54. }
  55. .swiper-button-prev {
  56. width: 15px;
  57. height: 15px;
  58. background: url(../static/img/shang_icon.png);
  59. left: 15px;
  60. }
  61. .swiper-button-next:after,
  62. .swiper-container-rtl .swiper-button-prev:after {
  63. content: "" !important;
  64. }
  65. .swiper-button-prev:after,
  66. .swiper-container-rtl .swiper-button-next:after {
  67. content: "" !important;
  68. }
  69. .wxTips {
  70. text-align: center;
  71. position: absolute;
  72. top: 50%;
  73. left: 50%;
  74. transform: translate(-50%, -50%);
  75. z-index: 99999;
  76. height: 2.5rem;
  77. line-height: 2.5rem;
  78. border-radius: .2rem;
  79. padding: 0 .8rem;
  80. background-color: rgba(0, 0, 0, 0.5);
  81. margin-top: -5rem;
  82. color: #fff;
  83. font-size: .7rem;
  84. display: none;
  85. }
  86. </style>
  87. </head>
  88. <body style="background: #F8F9FA;overflow:scroll;overflow-y: hidden;overflow-x: hidden;">
  89. <div style="width: 100%;height: 100%;" id="homeapp">
  90. <!-- Swiper -->
  91. <div class="newhelp" style="z-index: 50;">
  92. <div class="helpImg">
  93. <img src="../static/img/bangzu_icon.png" />
  94. </div>
  95. <div class="font helpfont">使用帮助?</div>
  96. </div>
  97. <div class="buyIcon" style="z-index: 50;">
  98. <img src="../static/img/goumai_icon.png" />
  99. </div>
  100. <div class="swiper-container">
  101. <div class="swiper-wrapper">
  102. <div class="swiper-slide" v-for="(item,index) in homeList" :key="item.id" :class="[index==0 ? 'swiper-slide-active' : '' , index==1 ? 'swiper-slide-next' : '']">
  103. <div class="canvas" style="z-index: 1;" @click="homeinfo(item)">
  104. <!-- <div style="height: 100%;" class="wine" :id="'wine'+index"></div> -->
  105. <canvas :id="'playCanvas'+index" width="450" height="800"></canvas>
  106. <div class="camvas-head" style="z-index: 5555;">
  107. <div class="tophead">
  108. <div class="th_left">
  109. <!-- {{item.buyVipType}} -->
  110. <img src="../static/img/xingyao_icon.png" v-if="item.buyVipType='SVIP'" />
  111. <img src="../static/img/xingdong_icon.png" v-else />
  112. </div>
  113. <div class="th_right">
  114. <div class="thl-font">{{item.diskName}}</div>
  115. <div class="thl-time">剩{{remainTime(item.ctime,item.exceptTime)}}</div>
  116. </div>
  117. </div>
  118. <div class="th_renew homeRenew" style="z-index: 5000;" @click="renew(item)">
  119. 续费
  120. </div>
  121. </div>
  122. </div>
  123. </div>
  124. <div class="swiper-slide">
  125. <div class="canvas" style="display: none;">
  126. <div style="height: 100%;" class="kongWine">
  127. <div class="kphone">
  128. <div class="kp_img">
  129. <img src="../static/img/goumai_pic.png" />
  130. </div>
  131. <div class="kp_btn" style="z-index: 5000;">
  132. 购买云手机
  133. </div>
  134. </div>
  135. </div>
  136. </div>
  137. </div>
  138. </div>
  139. <!-- Add Arrows -->
  140. <div class="swiper-button-next" @click="swiperNext()"></div>
  141. <div class="swiper-button-prev" @click="swiperPrev()"></div>
  142. </div>
  143. <!-- 没登录状态 -->
  144. <div class="canvasfalse" style="display: none;">
  145. <div class="notLoggedin">
  146. <image src="../static/img/tianjiashouji_pic.png"></image>
  147. </div>
  148. <!-- 审核-->
  149. <div id="showsuss">
  150. <div class="notLoggedin-text">
  151. <div>下载云手机</div>
  152. <div>体验更多功能</div>
  153. </div>
  154. <div class="notLoggedin-bt">
  155. 立即下载
  156. </div>
  157. </div>
  158. </div>
  159. <div class="maxs" style="display: none;">
  160. <div class="mainbox" style="display: none;">
  161. <div class="boxTitle">提示</div>
  162. <div class="boxText">
  163. <div>由于小程序的功能限制,此功能暂时</div>
  164. <div>无法使用,请下载APP使用更多功能</div>
  165. </div>
  166. <!--<div class="boxbt" onclick="cp(document.getElementById('user_ref_id'));">立即前往下载</div>-->
  167. <div class="boxbt" onclick="cp(document.getElementById('user_ref_id'));">立即前往下载</div>
  168. <div class="boximg"><img src="../static/img/wx/guanbi_icon.png"></div>
  169. </div>
  170. </div>
  171. <div class="wxTips">
  172. 云手机数量不足,请稍后再试
  173. </div>
  174. </div>
  175. <div id="copy-txt" style="position: absolute;opacity: 0;">
  176. <span id="user_ref_id">www.androidsCloud.com</span>
  177. </div>
  178. <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.0.js"></script>
  179. <!-- 视频-->
  180. <script src="../static/js/jquery-1.11.0.min.js"></script>
  181. <script type="text/javascript" src="../static/js/Decoder.js"></script>
  182. <script type="text/javascript" src="../static/js/YUVCanvas.js"></script>
  183. <script type="text/javascript" src="../static/js/Player.js"></script>
  184. <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  185. <script type="text/javascript" src="helper.js"></script>
  186. <script type="text/javascript" src="pcm-player.js"></script>
  187. <script type="text/javascript" src="webgl.js"></script>
  188. <script src="https://cdn.bootcss.com/vConsole/3.2.0/vconsole.min.js"></script>
  189. <script type="text/javascript">
  190. var html = document.querySelector("html");
  191. var clientWidth = html.getBoundingClientRect().width;
  192. var clientheight = window.innerHeight;
  193. html.style.fontSize = clientWidth / 23.4375 + "px";
  194. const ch = 14 / (clientheight / clientWidth)
  195. $('.swiper-slide').css("padding", `14% ${ch}%`)
  196. // var player = new PCMPlayer({
  197. // encoding: '16bitInt',
  198. // channels: 2,
  199. // sampleRate: 44100,
  200. // flushingTime: 22,
  201. // debug: false
  202. // });
  203. // Module = {};
  204. // Module.onRuntimeInitialized = function() {
  205. // console.log("Wasm 加载成功!")
  206. // isFinish = true;
  207. // }
  208. // function closeDecoder() //关闭解码器
  209. // {
  210. // Module._destroyDecoder();
  211. // }
  212. // function decodeAAC(data) {
  213. // var retPtr = Module._malloc(4 * 5 * 1024); //接收的数据
  214. // var inputPtr = Module._malloc(4 * data.length); //输入数据
  215. // for (i = 0; i < data.length; i++) {
  216. // Module.HEAPU8[(inputPtr) + i] = data[i]; //转换为堆数据
  217. // }
  218. // var pcmLen = Module._feedData(retPtr, inputPtr, data.length);
  219. // if (pcmLen >= 0) {
  220. // //console.log("%d帧 aac 解码成功, %d", decodeCount, pcmLen);
  221. // var pcmData = new Uint8Array(pcmLen);
  222. // for (i = 0; i < pcmLen; i++) {
  223. // pcmData[i] = Module.HEAPU8[(retPtr) + i]
  224. // }
  225. // player.feed(pcmData);
  226. // } else {
  227. // console.log("%d帧 aac 解码失败, %d", decodeCount, pcmLen);
  228. // }
  229. // decodeCount++;
  230. // Module._free(inputPtr);
  231. // Module._free(retPtr);
  232. // }
  233. var app = new Vue({
  234. el: '#homeapp',
  235. data: {
  236. message: 'Hello Vue!',
  237. homeList: [],
  238. urlData: {},
  239. rbdData: {},
  240. activeIndexData: "",
  241. swipeDirection: "",
  242. },
  243. mounted() {
  244. // //初始化一下就可以了,
  245. let vConsole = new VConsole();
  246. // //你打印的数据 比如
  247. console.log('test');
  248. //就可像小程序一样的看了和调试了。
  249. this.$nextTick(function() {
  250. this.gethomeList();
  251. });
  252. var that = this;
  253. var swiper = new Swiper('.swiper-container', {
  254. observer: true, //修改swiper自己或子元素时,自动初始化swiper
  255. observeParents: true, //修改swiper的父元素时,自动初始化swiper
  256. navigation: {
  257. nextEl: '.swiper-button-next',
  258. prevEl: '.swiper-button-prev',
  259. },
  260. on: {
  261. touchEnd: function(event) {
  262. console.log('触摸停止');
  263. console.log(swiper.swipeDirection);
  264. this.swipeDirection = swiper.swipeDirection;
  265. },
  266. transitionStart: function() {
  267. console.log("transitionStart", this.activeIndex)
  268. this.activeIndexData = this.activeIndex;
  269. },
  270. slideChangeTransitionStart: function() {
  271. console.log("slideChangeTransitionStart", this.activeIndex)
  272. this.activeIndexData = this.activeIndex;
  273. },
  274. slideChangeTransitionEnd: function() {
  275. console.log("slideChangeTransitionEnd", this.activeIndex)
  276. this.activeIndexData = this.activeIndex;
  277. if (this.swipeDirection == "next") {
  278. that.getSwiperInfo("nextSlide");
  279. } else if (this.swipeDirection == "prev") {
  280. that.getSwiperInfo("prevSlide");
  281. }
  282. },
  283. // slideChangeStart: function() {
  284. // alert(this.activeIndext);
  285. // },
  286. // slideChangeEnd: function() {
  287. // console.log("下标啊", this)
  288. // },
  289. // ransitionStart: function(activeIndex) {
  290. // console.log("下标啊", this, activeIndex)
  291. // },
  292. // slideChangeEnd: function(swiperHere) {
  293. // var txt = $('.swiper-slide-active').html();
  294. // console.log("打印索引值", txt)
  295. // }
  296. }
  297. });
  298. },
  299. methods: {
  300. homeinfo(data) {
  301. console.log("打印数据", data, this.urlData)
  302. if (this.urlData.status === 0) {
  303. console.log("打印数据", data, this.urlData.data.sn)
  304. wx.miniProgram.navigateTo({
  305. url: '/pages/trialInterface/trialInterface?record=' + data.id + '&sn=' + this
  306. .urlData.data.sn,
  307. })
  308. } else {
  309. $(".wxTips").show()
  310. $('.wxTips').delay(2000).hide(0);
  311. // wx.miniProgram.showToast({
  312. // title: this.urlData.msg,
  313. // icon: "none",
  314. // duration: 500,
  315. // });
  316. }
  317. },
  318. renew(data) {
  319. console.log("续费啊", data);
  320. wx.miniProgram.navigateTo({
  321. url: '/pages/order/renew/index?record=' + data.id,
  322. })
  323. },
  324. remainTime(ctime, exceptTime) {
  325. var date1 = ctime;
  326. var date2 = exceptTime; //结束时间
  327. var date3 = new Date(date2.replace(/-/g, '/')).getTime() - new Date(date1.replace(/-/g, '/')).getTime(); //时间差的毫秒数
  328. console.log("时间戳===========》", date3)
  329. //------------------------------
  330. var tmiss = ''
  331. //计算出相差天数
  332. var days = Math.floor(date3 / (24 * 3600 * 1000))
  333. // console.log(days + "天");
  334. //计算出小时数
  335. var leave1 = date3 % (24 * 3600 * 1000) //计算天数后剩余的毫秒数
  336. var hours = Math.floor(leave1 / (3600 * 1000))
  337. //计算相差分钟数
  338. var leave2 = leave1 % (3600 * 1000) //计算小时数后剩余的毫秒数
  339. var minutes = Math.floor(leave2 / (60 * 1000))
  340. //计算相差秒数
  341. var leave3 = leave2 % (60 * 1000) //计算分钟数后剩余的毫秒数
  342. var seconds = Math.round(leave3 / 1000)
  343. var times = ""
  344. if (Number(days) == 0) {
  345. // console.log(hours + "小时" + minutes + "分")
  346. tmiss = Number(hours) + "小时" + Number(minutes) + "分"
  347. } else {
  348. if (Number(hours) == 0 && Number(minutes) == 0) {
  349. // console.log(days + "天")
  350. tmiss = Number(days) + "天"
  351. } else {
  352. // console.log(days + "天" + hours + "小时 ")
  353. tmiss = Number(days) + "天" + Number(hours) + "小时 "
  354. }
  355. }
  356. // console.log("tmiss>>>>>>", tmiss);
  357. return tmiss
  358. },
  359. swiperNext(data) {
  360. this.getSwiperInfo("next");
  361. },
  362. swiperPrev() {
  363. this.getSwiperInfo("prev");
  364. },
  365. getSwiperInfo(data) {
  366. console.log("方向=======", data, $('.swiper-slide-active').index());
  367. // return
  368. if (data == "next") {
  369. var activeIndex = $('.swiper-slide-active').index() + 1;
  370. } else if (data == "prev") {
  371. var activeIndex = $('.swiper-slide-active').index() - 1;
  372. } else if (data == "prevSlide") {
  373. var activeIndex = $('.swiper-slide-active').index();
  374. } else if (data == "nextSlide") {
  375. var activeIndex = $('.swiper-slide-active').index();
  376. }
  377. var ids = "#wine" + $('.swiper-slide-active').index();
  378. var domprev = $(ids);
  379. console.log("下标id======", activeIndex);
  380. domprev.empty();
  381. let rbdData = {
  382. "userCardId": this.homeList[activeIndex].id,
  383. "deviceStatus": 1,
  384. };
  385. // var baseUrl = "http://192.168.31.20";
  386. var baseUrl = "http://192.168.199.243";
  387. var urlss = 'test.androidscloud.com'
  388. let that = this;
  389. var player = new Player({
  390. size: {
  391. width: 768,
  392. height: 1024
  393. }
  394. });
  395. // var id = 'wine' + activeIndex;
  396. // var secanv = document.getElementById(id);
  397. // secanv.appendChild(player.canvas);
  398. // setTimeout(() => {
  399. $.ajax({
  400. url: baseUrl + "/api/storage/v1/cardStatus/getRbd",
  401. data: JSON.stringify(rbdData),
  402. type: 'post',
  403. dataType: 'json',
  404. // async: false,
  405. contentType: "application/json;charset=UTF-8",
  406. headers: {
  407. 'token': tokens.substring(6, tokens.length),
  408. "Authorization": tokens.substring(6, tokens.length)
  409. },
  410. success: function(data) {
  411. that.urlData = data;
  412. console.log("挂载安卓卡成功", that.urlData);
  413. //
  414. }
  415. })
  416. var decodeWoker = new Worker('decoder.js');
  417. var id = 'playCanvas' + activeIndex;
  418. var myVideo = document.getElementById(id);
  419. var isDrag = false;
  420. console.log("首页=====", id);
  421. // var secanv = document.getElementById(id);
  422. decodeWoker.onmessage = function(event) {
  423. // console.log("decodeWoker.onmessage")
  424. var objData = event.data;
  425. switch (objData.cmd) {
  426. case 0:
  427. console.log(objData.data);
  428. break;
  429. case 1:
  430. var time = new Date().getTime();
  431. webglPlayer.renderFrame(objData.data, 720, 1280, 720 * 1280, (720 / 2) * (1280 / 2));
  432. //console.log("渲染耗时", new Date().getTime() - time + "ms");break;
  433. }
  434. }
  435. if (typeof(Worker) !== "undefined") {
  436. console.log("支持webworker");
  437. } else {
  438. alert("不支持webworker");
  439. }
  440. var isFinish = false;
  441. this.canvas = document.getElementById(id);
  442. var webglPlayer = new WebGLPlayer(this.canvas, {
  443. preserveDrawingBuffer: false
  444. });
  445. var webSocketWorker = new Worker('websocket.js');
  446. var startTime = new Date().getTime();
  447. webSocketWorker.onmessage = function(event) {
  448. // console.log("event.data", event.data)
  449. decodeWoker.postMessage(event.data);
  450. }
  451. document.addEventListener("visibilitychange", () => {
  452. if (document.visibilityState == "visible") {
  453. } else {
  454. console.log("页面不可见");
  455. }
  456. });
  457. function Close() //webworker 关闭,清理
  458. {
  459. var cmd = {
  460. cmd: 0
  461. };
  462. decodeWoker.postMessage(cmd);
  463. decodeWoker.terminate();
  464. webSocketWorker.postMessage(cmd);
  465. webSocketWorker.terminate();
  466. }
  467. myVideo.onmousedown = function(event) {
  468. console.log("22222")
  469. //放在此处只是为了方便演示,实际使用中查找横竖屏只要刚连接上时调用一次就好。
  470. //var checkBuffer = GetScreenState();
  471. //ws.send(checkBuffer);
  472. /*if(!isFeed)
  473. {
  474. console.log("重新申请I帧");
  475. requestTime = new Date().getTime();
  476. var buffer = RequestIFrame();
  477. ws.send(buffer);
  478. }*/
  479. //console.log("报文 %s", PrintArry(buffer));
  480. if (event.button == 0) {
  481. var posX = event.offsetX * 1080 * 1.0 / myVideo.clientWidth;
  482. var posY = event.offsetY * 1920 * 1.0 / myVideo.clientHeight;
  483. var buffer = ExexuteMouseDown(posX.toString(), posY.toString());
  484. // ws.send(buffer);
  485. // decodeWoker.postMessage(event.data);
  486. // console.log("打印buffer", PrintArry(buffer))
  487. decodeWoker.postMessage(buffer);
  488. isDrag = true;
  489. }
  490. }
  491. // var strhost = "wss://" + urlss + "/videoWebSocket?clientType=1&cardIp=" +
  492. // that.urlData.exIp +
  493. // "&port=" + that.urlData.exPort + "&sn=" + that.urlData.sn;
  494. // var strhost = "ws://192.168.11.66:9101";
  495. // var strhost = "ws://" + that.urlData.exIp + ":" + that.urlData.exPort
  496. // var strhost="wss://www.ted2018.com:9101";
  497. // var strhost = "wss://test.androidscloud.com:9105";
  498. // // var strhost="wss://test.androidscloud.com/videoWebSocket?clientType=1&cardIp=14.215.128.96&port=2005&sn=RK3930C2301900005";
  499. // var client = new WebSocket(strhost);
  500. // console.log('wsssss==============', client)
  501. // client.binaryType = 'arraybuffer';
  502. // // debugger
  503. // client.onopen = function(evt) {
  504. // // onOpen(evt)
  505. // console.log("开始链接==============", evt);
  506. // };
  507. // client.onclose = function(evt) {
  508. // // onClose(evt)
  509. // };
  510. // client.onmessage = function(evt) {
  511. // // onMessage(evt)
  512. // // console.log("onMessage==============", evt);
  513. // var messageData = new Uint8Array(evt.data);
  514. // player.decode(messageData);
  515. // };
  516. // client.onerror = function(evt) {
  517. // // onError(evt)
  518. // };
  519. // }, 1)
  520. },
  521. gethomeList() {
  522. var baseUrl = 'http://192.168.199.243';
  523. // var baseUrl = "http://192.168.31.20";
  524. var query = window.location.search.substring(1);
  525. var vars = query.split("&");
  526. var tokens = vars.find(e => {
  527. return e.startsWith('token')
  528. }) || ''
  529. var data = {}
  530. var clientType = vars.find(e => {
  531. return e.startsWith('clientType')
  532. }) || ''
  533. var cardIp = vars.find(e => {
  534. return e.startsWith('cardIp')
  535. }) || ''
  536. var port = vars.find(e => {
  537. return e.startsWith('port')
  538. }) || ''
  539. var sn = vars.find(e => {
  540. return e.startsWith('sn')
  541. }) || ''
  542. var demoTime = vars.find(e => {
  543. return e.startsWith('demoTime')
  544. }) || ''
  545. var id = vars.find(e => {
  546. return e.startsWith('id')
  547. }) || ''
  548. var vip = vars.find(e => {
  549. return e.startsWith('vip')
  550. }) || ''
  551. var diskName = vars.find(e => {
  552. return e.startsWith('diskName')
  553. }) || ''
  554. var times = vars.find(e => {
  555. return e.startsWith('times')
  556. }) || ''
  557. var username = vars.find(e => {
  558. return e.startsWith('username')
  559. }) || ''
  560. var userCardId = vars.find(e => {
  561. return e.startsWith('userCardId')
  562. }) || ''
  563. var ip = vars.find(e => {
  564. return e.startsWith('ip')
  565. }) || ''
  566. var windowHeight = vars.find(e => {
  567. return e.startsWith('windowHeight')
  568. }) || ''
  569. var tokens = vars.find(e => {
  570. return e.startsWith('token')
  571. }) || ''
  572. data.clientType = clientType.substring(11, clientType.length)
  573. data.cardIp = cardIp.substring(7, cardIp.length)
  574. data.port = port.substring(5, port.length)
  575. data.sn = sn.substring(3, sn.length)
  576. data.demoTime = demoTime.substring(9, demoTime.length)
  577. data.id = id.substring(3, id.length)
  578. data.vip = vip.substring(4, vip.length)
  579. data.diskName = diskName.substring(9, diskName.length)
  580. data.times = times.substring(6, times.length)
  581. data.username = username.substring(9, username.length)
  582. data.userCardId = userCardId.substring(11, userCardId.length)
  583. data.ip = ip.substring(3, ip.length)
  584. console.log("data====", data);
  585. this.urlData = data;
  586. let that = this;
  587. $.ajax({
  588. url: baseUrl + "/api/user/v1/client/disk/info",
  589. data: {},
  590. type: 'get',
  591. dataType: 'json',
  592. headers: {
  593. 'token': tokens.substring(6, tokens.length),
  594. "Authorization": tokens.substring(6, tokens.length)
  595. },
  596. success: function(data) {
  597. console.log("云手机信息=======", data);
  598. if (data.data) {
  599. that.homeList = data.data.diskInfo;
  600. console.log("云手机this.homeListthis.homeListthis.homeList=======", that.homeList);
  601. var urlss = 'test.androidscloud.com'
  602. let rbdData = {
  603. "userCardId": that.homeList[0].id,
  604. "deviceStatus": 1,
  605. };
  606. let activeIndex = $('.swiper-slide-active').index();
  607. // let that = this;
  608. setTimeout(() => {
  609. $.ajax({
  610. url: baseUrl + "/api/storage/v1/cardStatus/getRbd",
  611. data: JSON.stringify(rbdData),
  612. // data:rbdData,
  613. type: 'post',
  614. dataType: 'json',
  615. contentType: "application/json;charset=UTF-8",
  616. async: false,
  617. headers: {
  618. 'token': tokens.substring(6, tokens.length),
  619. "Authorization": tokens.substring(6, tokens.length)
  620. },
  621. success: function(data) {
  622. that.urlData = data.data;
  623. console.log("挂载安卓卡成功", that.urlData);
  624. //
  625. }
  626. })
  627. console.log("that.urlDatathat.urlDatathat.urlDatathat.urlData", that.urlData);
  628. var decodeWoker = new Worker('decoder.js');
  629. var id = 'playCanvas' + activeIndex;
  630. var myVideo = document.getElementById(id);
  631. decodeWoker.postMessage(RequestIFrame(that.homeList[0].sn));
  632. var isDrag = false;
  633. console.log("首页=====", id);
  634. // var secanv = document.getElementById(id);
  635. decodeWoker.onmessage = function(event) {
  636. // console.log("decodeWoker.onmessage")
  637. var objData = event.data;
  638. switch (objData.cmd) {
  639. case 0:
  640. console.log(objData.data);
  641. break;
  642. case 1:
  643. var time = new Date().getTime();
  644. webglPlayer.renderFrame(objData.data, 720, 1280, 720 * 1280, (720 / 2) * (1280 / 2));
  645. //console.log("渲染耗时", new Date().getTime() - time + "ms");break;
  646. }
  647. }
  648. if (typeof(Worker) !== "undefined") {
  649. console.log("支持webworker");
  650. } else {
  651. alert("不支持webworker");
  652. }
  653. var isFinish = false;
  654. this.canvas = document.getElementById(id);
  655. var webglPlayer = new WebGLPlayer(this.canvas, {
  656. preserveDrawingBuffer: false
  657. });
  658. var webSocketWorker = new Worker('websocket.js');
  659. var startTime = new Date().getTime();
  660. webSocketWorker.onmessage = function(event) {
  661. // console.log("event.data", event.data)
  662. decodeWoker.postMessage(event.data);
  663. }
  664. document.addEventListener("visibilitychange", () => {
  665. if (document.visibilityState == "visible") {
  666. } else {
  667. console.log("页面不可见");
  668. }
  669. });
  670. function Close() //webworker 关闭,清理
  671. {
  672. var cmd = {
  673. cmd: 0
  674. };
  675. decodeWoker.postMessage(cmd);
  676. decodeWoker.terminate();
  677. webSocketWorker.postMessage(cmd);
  678. webSocketWorker.terminate();
  679. }
  680. // myVideo.onmousedown = function(event) {
  681. // console.log("22222")
  682. // if (event.button == 0) {
  683. // var posX = event.offsetX * 1080 * 1.0 / myVideo.clientWidth;
  684. // var posY = event.offsetY * 1920 * 1.0 / myVideo.clientHeight;
  685. // var buffer = ExexuteMouseDown(posX.toString(), posY.toString());
  686. // // ws.send(buffer);
  687. // // decodeWoker.postMessage(event.data);
  688. // // console.log("打印buffer", PrintArry(buffer))
  689. // decodeWoker.postMessage(buffer);
  690. // isDrag = true;
  691. // }
  692. // }
  693. myVideo.onmousedown = function(event) {
  694. if (event.button == 0) {
  695. var posX = event.offsetX * 720 * 1.0 / myVideo.clientWidth;
  696. var posY = event.offsetY * 1280 * 1.0 / myVideo.clientHeight;
  697. var buffer = ExexuteMouseDown(posX.toString(), posY.toString());
  698. // ws.send(buffer);
  699. decodeWoker.postMessage(buffer);
  700. isDrag = true;
  701. }
  702. }
  703. myVideo.onmousemove = function(event) {
  704. if (isDrag && event.button == 0) {
  705. var posX = event.offsetX * 720 * 1.0 / myVideo.clientWidth;
  706. var posY = event.offsetY * 1280 * 1.0 / myVideo.clientHeight;
  707. var buffer = ExexuteMouseMove(posX.toString(), posY.toString());
  708. ws.send(buffer);
  709. console.log("移动位置 %d, %d", posX, posY);
  710. }
  711. }
  712. myVideo.onmouseup = function(event) {
  713. isDrag = false;
  714. var posX = event.offsetX * 720 * 1.0 / myVideo.clientWidth;
  715. var posY = event.offsetY * 1280 * 1.0 / myVideo.clientHeight;
  716. var buffer = ExexuteMouseUp(posX.toString(), posY.toString());
  717. ws.send(buffer);
  718. }
  719. myVideo.onkeydown = function(event) {
  720. ExexuteKeyDown(e.keyCode);
  721. }
  722. }, 1)
  723. } else {
  724. }
  725. //
  726. }
  727. })
  728. }
  729. }
  730. })
  731. var homeList = []; //云手机列表信息
  732. var url = window.location.href;
  733. url = url.split('/')
  734. console.log(url)
  735. // var baseUrl = 'https://' + url[2] //'http://192.168.31.159'//'http://' + url[2]
  736. // var baseUrl = 'http://192.168.31.20'
  737. var baseUrl = 'http://192.168.199.243';
  738. var query = window.location.search.substring(1);
  739. var vars = query.split("&");
  740. // var urls = "https://xcx.androidscloud.com"
  741. // 审核
  742. $.ajax({
  743. url: baseUrl + "/api/user/v1/config/download/isShow",
  744. data: {},
  745. type: 'get',
  746. dataType: 'json',
  747. contentType: "application/json;charset=UTF-8",
  748. success: function(data) {
  749. if (data.data) {
  750. $("#showsuss").show()
  751. } else {
  752. $("#showsuss").hide()
  753. }
  754. //
  755. }
  756. })
  757. // var baseUrl = window.location.href; //"http://192.168.31.20"
  758. document.body.addEventListener('touchmove', function(e) {
  759. e.preventDefault()
  760. }, {
  761. passive: false
  762. })
  763. var data = {}
  764. var clientType = vars.find(e => {
  765. return e.startsWith('clientType')
  766. }) || ''
  767. var cardIp = vars.find(e => {
  768. return e.startsWith('cardIp')
  769. }) || ''
  770. var port = vars.find(e => {
  771. return e.startsWith('port')
  772. }) || ''
  773. var sn = vars.find(e => {
  774. return e.startsWith('sn')
  775. }) || ''
  776. var demoTime = vars.find(e => {
  777. return e.startsWith('demoTime')
  778. }) || ''
  779. var id = vars.find(e => {
  780. return e.startsWith('id')
  781. }) || ''
  782. var vip = vars.find(e => {
  783. return e.startsWith('vip')
  784. }) || ''
  785. var diskName = vars.find(e => {
  786. return e.startsWith('diskName')
  787. }) || ''
  788. var times = vars.find(e => {
  789. return e.startsWith('times')
  790. }) || ''
  791. var username = vars.find(e => {
  792. return e.startsWith('username')
  793. }) || ''
  794. var userCardId = vars.find(e => {
  795. return e.startsWith('userCardId')
  796. }) || ''
  797. var ip = vars.find(e => {
  798. return e.startsWith('ip')
  799. }) || ''
  800. var windowHeight = vars.find(e => {
  801. return e.startsWith('windowHeight')
  802. }) || ''
  803. var tokens = vars.find(e => {
  804. return e.startsWith('token')
  805. }) || ''
  806. $(".swiper-container").css("height", windowHeight.substring(13, windowHeight.length));
  807. console.log("获取网页高度", windowHeight.substring(13, windowHeight.length));
  808. // $(".aaa").text(clientType.substring(11, clientType.length))
  809. // let cardIp = getUrlParam('cardIp');
  810. // console.log(cardIp)
  811. $.ajax({
  812. url: baseUrl + "/api/user/v1/client/disk/info",
  813. data: {},
  814. type: 'get',
  815. dataType: 'json',
  816. headers: {
  817. 'token': tokens.substring(6, tokens.length),
  818. "Authorization": tokens.substring(6, tokens.length)
  819. },
  820. success: function(data) {
  821. console.log("云手机信息=======", data);
  822. if (data.data) {
  823. homeList = data.data.diskInfo;
  824. } else {
  825. }
  826. //
  827. }
  828. })
  829. getQueryString: (name) => {
  830. let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
  831. let r = window.location.search.substr(1).match(reg);
  832. console.log(name)
  833. if (r != null) {
  834. return unescape(decodeURI(r[2]));
  835. return null;
  836. }
  837. }
  838. data.clientType = clientType.substring(11, clientType.length)
  839. data.cardIp = cardIp.substring(7, cardIp.length)
  840. data.port = port.substring(5, port.length)
  841. data.sn = sn.substring(3, sn.length)
  842. data.demoTime = demoTime.substring(9, demoTime.length)
  843. data.id = id.substring(3, id.length)
  844. data.vip = vip.substring(4, vip.length)
  845. data.diskName = diskName.substring(9, diskName.length)
  846. data.times = times.substring(6, times.length)
  847. data.username = username.substring(9, username.length)
  848. data.userCardId = userCardId.substring(11, userCardId.length)
  849. data.ip = ip.substring(3, ip.length)
  850. let timestext = "剩" + decodeURI(data.times) || data.demoTime / 3600 + "小时"
  851. $(".diskName").text(decodeURI(data.diskName) || data.username)
  852. console.log("timestext>>>>>>", timestext);
  853. $(".canvastime").text(timestext)
  854. if (data.vip == "0") {
  855. $(".canvasfalse").css({
  856. "display": "block"
  857. })
  858. $(".canvas").css({
  859. "display": "none"
  860. })
  861. } else {
  862. $(".canvas").css({
  863. "display": "block"
  864. })
  865. $(".canvasfalse").css({
  866. "display": "none"
  867. })
  868. }
  869. // // 云手机相关逻辑
  870. // var player = new Player({
  871. // size: {
  872. // width: 768,
  873. // height: 1024
  874. // }
  875. // });
  876. // console.log("player====", player, player.canvas);
  877. // // document.body.appendChild(player.canvas);
  878. // // var urlss = url[2]
  879. // var urlss = 'test.androidscloud.com'
  880. // for (var i = 0; i <= homeList; i++) {
  881. // console.log("i=============",i,homeList);
  882. // }
  883. // var secanv = document.getElementById("wine");
  884. // secanv.appendChild(player.canvas);
  885. // // var strhost = Number(data.clientType) ===2? "wss://"+ urlss +"/shareWebSocket?clientType=2&username="+data.username+"&userCardId="+data.userCardId+"&ip="+data.ip : Number(data.clientType) ===3?"wss://"+ urlss +"/authVideoWebSocket?clientType=3&username="+data.username+"&userCardId="+data.userCardId :"wss://"+ urlss +"/videoWebSocket?clientType="+ data.clientType +"&cardIp="+data.cardIp +"&port="+ data.port +"&sn="+data.sn;
  886. // var strhost = "wss://" + urlss + "/videoWebSocket?clientType=" + data.clientType + "&cardIp=" + data.cardIp +
  887. // "&port=" + data.port + "&sn=" + data.sn;
  888. // var client = new WebSocket(strhost);
  889. // console.log('wsssss==============', client)
  890. // client.binaryType = 'arraybuffer';
  891. // // debugger
  892. // client.onopen = function(evt) {
  893. // // onOpen(evt)
  894. // };
  895. // client.onclose = function(evt) {
  896. // // onClose(evt)
  897. // };
  898. // client.onmessage = function(evt) {
  899. // onMessage(evt)
  900. // };
  901. // client.onerror = function(evt) {
  902. // // onError(evt)
  903. // };
  904. function onMessage(evt) {
  905. console.log("onMessage==============", evt);
  906. var messageData = new Uint8Array(evt.data);
  907. player.decode(messageData);
  908. }
  909. $("canvas").on("click", function() {
  910. client.close()
  911. // ?clientType=0&cardIp=30.30.30.42&port=9100&sn=RK3930C2301900042&demoTime=3600&id=3
  912. setTimeout(() => {
  913. wx.miniProgram.navigateTo({
  914. url: '/pages/trialInterface/trialInterface?clientType=' + data.clientType + "&cardIp=" + data.cardIp +
  915. "&port=" + data.port + "&sn=" + data.sn + "&username=" + data.username + "&userCardId=" + data.userCardId +
  916. "&demoTime=3600&id=" + data.id + "&diskName=" + decodeURI(data.diskName)
  917. })
  918. }, 100);
  919. })
  920. $(".helps").click(function() {
  921. // wx.miniProgram.navigateTo({
  922. // url: '/pages/viewurl/viewurl'
  923. // })
  924. //按点击处理
  925. var set = $('.helps').attr("data-id")
  926. if (set == '1') {
  927. $('.helps').attr({
  928. "data-id": "2"
  929. })
  930. $(".helps").hide();
  931. $(".help").css({
  932. "right": "0"
  933. })
  934. } else {
  935. $('.helps').attr({
  936. "data-id": "1"
  937. })
  938. $(".help").css({
  939. "right": "-4rem"
  940. })
  941. }
  942. });
  943. function stopPropagation(e) {
  944. if (e.stopPropagation)
  945. e.stopPropagation();
  946. else
  947. e.cancelBubble = true;
  948. }
  949. $(document).bind('click', function() {
  950. $(".help").css({
  951. "right": "-4rem"
  952. })
  953. $('.helps').attr({
  954. "data-id": "1"
  955. })
  956. $(".helps").show();
  957. });
  958. $('.helpfont').bind('click', function(e) {
  959. console.log("帮助啊啊");
  960. // stopPropagation(e);
  961. wx.miniProgram.navigateTo({
  962. url: '/pages/viewurl/viewurl'
  963. })
  964. });
  965. $('.buyIcon,.kp_btn').bind('click', function(e) {
  966. console.log("购买");
  967. // stopPropagation(e);
  968. wx.miniProgram.navigateTo({
  969. url: '/pages/order/buy/index'
  970. })
  971. });
  972. // $('.homeRenew').bind('click', function(e) {
  973. // console.log("续费啊");
  974. // // stopPropagation(e);
  975. // wx.miniProgram.navigateTo({
  976. // url: '/pages/order/buy/index'
  977. // })
  978. // });
  979. $(".homeRenew").on("click", function() {
  980. console.log("续费啊");
  981. wx.miniProgram.navigateTo({
  982. url: '/pages/order/renew/index'
  983. })
  984. });
  985. $('.helps').bind('click', function(e) {
  986. stopPropagation(e);
  987. });
  988. //
  989. // var player = new Player({
  990. // size: {
  991. // width: 1280,
  992. // height: 720
  993. // }
  994. // });
  995. // var secanv = document.getElementById("wine");
  996. // secanv.appendChild(player.canvas);
  997. // var players = AV.Player.fromWebSocket("ws://" + urlss + '/videoWebSocket?' + "clientType=" + data.clientType +
  998. // "&cardIp=" + data.cardIp + "&port=" + data.port + "&sn=" + data.sn);
  999. // players.play();
  1000. $(".boximg").on("click", function() {
  1001. $(".mainbox").css({
  1002. "display": "none"
  1003. })
  1004. $(".maxs").css({
  1005. "display": "none"
  1006. })
  1007. })
  1008. $(".maxs").on("click", function() {
  1009. $(".mainbox").css({
  1010. "display": "none"
  1011. })
  1012. $(".maxs").css({
  1013. "display": "none"
  1014. })
  1015. })
  1016. $(".addto").on("click", function() {
  1017. $(".mainbox").css({
  1018. "display": "block"
  1019. })
  1020. $(".maxs").css({
  1021. "display": "block"
  1022. })
  1023. })
  1024. $(".notLoggedin-bt").on("click", function() {
  1025. // $(".mainbox").css({
  1026. // "display": "block"
  1027. // })
  1028. // $(".maxs").css({
  1029. // "display": "block"
  1030. // })
  1031. })
  1032. function selectText(x) {
  1033. if (document.selection) {
  1034. var range = document.body.createTextRange();
  1035. range.moveToElementText(x);
  1036. range.select();
  1037. } else if (window.getSelection) {
  1038. var selection = window.getSelection();
  1039. var range = document.createRange();
  1040. selection.removeAllRanges();
  1041. range.selectNodeContents(x);
  1042. selection.addRange(range);
  1043. }
  1044. }
  1045. function cp(x) {
  1046. $(".mainbox").css({
  1047. "display": "none"
  1048. })
  1049. $(".sbox").css({
  1050. "display": "block"
  1051. })
  1052. selectText(x);
  1053. document.execCommand("copy");
  1054. alert("复制成功")
  1055. }
  1056. </script>
  1057. </body>
  1058. </html>