homeNew.html 49 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486148714881489149014911492149314941495149614971498149915001501150215031504150515061507150815091510151115121513151415151516151715181519152015211522152315241525152615271528152915301531153215331534153515361537153815391540154115421543154415451546154715481549155015511552155315541555155615571558155915601561156215631564156515661567156815691570157115721573157415751576157715781579158015811582158315841585158615871588158915901591159215931594159515961597159815991600160116021603160416051606160716081609161016111612161316141615161616171618161916201621162216231624162516261627162816291630163116321633163416351636163716381639164016411642164316441645164616471648164916501651165216531654165516561657165816591660166116621663166416651666166716681669167016711672167316741675167616771678167916801681
  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=103">
  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. <script async defer src="https://buttons.github.io/buttons.js"></script>
  49. <style>
  50. .swiper-button-next {
  51. width: 15px;
  52. height: 15px;
  53. background: url(../static/img/xia_icon.png);
  54. right: 15px;
  55. }
  56. .swiper-button-prev {
  57. width: 15px;
  58. height: 15px;
  59. background: url(../static/img/shang_icon.png);
  60. left: 15px;
  61. }
  62. .swiper-button-next:after,
  63. .swiper-container-rtl .swiper-button-prev:after {
  64. content: "" !important;
  65. }
  66. .swiper-button-prev:after,
  67. .swiper-container-rtl .swiper-button-next:after {
  68. content: "" !important;
  69. }
  70. </style>
  71. </head>
  72. <body style="background: #F8F9FA;overflow:scroll;overflow-y: hidden;overflow-x: hidden;">
  73. <div style="width: 100%;height: 100%;" id="homeapp">
  74. <!-- Swiper -->
  75. <div class="newhelp" style="z-index: 50;">
  76. <div class="helpImg">
  77. <img src="../static/img/bangzu_icon.png" />
  78. </div>
  79. <div class="font helpfont">使用帮助?</div>
  80. </div>
  81. <div class="buyIcon" style="z-index: 50;">
  82. <img src="../static/img/goumai_icon.png" />
  83. </div>
  84. <div class="swiper-container">
  85. <div class="swiper-wrapper">
  86. <div class="swiper-slide" v-for="(item,index) in homeList" :key="item.id"
  87. :class="[index==0 ? 'swiper-slide-active' : '' , index==1 ? 'swiper-slide-next' : '']">
  88. <div class="canvas" style="z-index: 1;" @click="homeinfo(item)">
  89. <!-- <div style="height: 100%;" class="wine" :id="'wine'+index"></div> -->
  90. <!-- <canvas :id="'playCanvas'+index" width="450" height="800"></canvas> -->
  91. <video width="100%" height="100%" style="border-radius: 1.25rem;object-fit: fill;"
  92. disablePictureInPicture="true" autoplay poster="images/loader-thumb.jpg"
  93. :id="'player'+index"></video>
  94. <audio width="100 %" preload="auto" autoplay controls poster="images/loader-thumb.jpg"
  95. :id="'audioPlayer'+index"></audio>
  96. <div class="camvas-head" style="z-index: 5555;">
  97. <div class="tophead">
  98. <div class="th_left">
  99. <!-- {{item.buyVipType}} -->
  100. <img src="../static/img/xingyao_icon.png" v-if="item.buyVipType='SVIP'" />
  101. <img src="../static/img/xingdong_icon.png" v-else />
  102. </div>
  103. <div class="th_right">
  104. <div class="thl-font">{{item.diskName}}</div>
  105. <div class="thl-time">{{remainTime(item.ctime,item.exceptTime)}}</div>
  106. </div>
  107. </div>
  108. <div class="th_renew homeRenew" style="z-index: 5000;" @click="renew(item)">
  109. 续费
  110. </div>
  111. </div>
  112. </div>
  113. </div>
  114. <div class="swiper-slide">
  115. <div class="canvas" style="display: none;">
  116. <div style="height: 100%;" class="kongWine">
  117. <div class="kphone">
  118. <div class="kp_img">
  119. <img src="../static/img/goumai_pic.png" />
  120. </div>
  121. <div class="kp_btn" style="z-index: 5000;">
  122. 购买云手机
  123. </div>
  124. </div>
  125. </div>
  126. </div>
  127. </div>
  128. </div>
  129. <!-- Add Arrows -->
  130. <div class="swiper-button-next" @click="swiperNext()"></div>
  131. <div class="swiper-button-prev" @click="swiperPrev()"></div>
  132. </div>
  133. <!-- 没登录状态 -->
  134. <div class="canvasfalse" style="display: none;">
  135. <div class="notLoggedin">
  136. <image src="../static/img/tianjiashouji_pic.png"></image>
  137. </div>
  138. <!-- 审核-->
  139. <div id="showsuss">
  140. <div class="notLoggedin-text">
  141. <div>下载云手机</div>
  142. <div>体验更多功能</div>
  143. </div>
  144. <div class="notLoggedin-bt">
  145. 立即下载
  146. </div>
  147. </div>
  148. </div>
  149. <div class="maxs" style="display: none;">
  150. <div class="mainbox" style="display: none;">
  151. <div class="boxTitle">提示</div>
  152. <div class="boxText">
  153. <div>由于小程序的功能限制,此功能暂时</div>
  154. <div>无法使用,请下载APP使用更多功能</div>
  155. </div>
  156. <!--<div class="boxbt" onclick="cp(document.getElementById('user_ref_id'));">立即前往下载</div>-->
  157. <div class="boxbt" onclick="cp(document.getElementById('user_ref_id'));">立即前往下载</div>
  158. <div class="boximg"><img src="../static/img/wx/guanbi_icon.png"></div>
  159. </div>
  160. </div>
  161. </div>
  162. <div id="copy-txt" style="position: absolute;opacity: 0;">
  163. <span id="user_ref_id">www.androidsCloud.com</span>
  164. </div>
  165. <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.0.js"></script>
  166. <!-- 视频-->
  167. <script src="../static/js/jquery-1.11.0.min.js"></script>
  168. <!-- <script type="text/javascript" src="../static/js/Decoder.js"></script>
  169. <script type="text/javascript" src="../static/js/YUVCanvas.js"></script>
  170. <script type="text/javascript" src="../static/js/Player.js"></script> -->
  171. <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  172. <!-- <script type="text/javascript" src="helper.js"></script>
  173. <script type="text/javascript" src="pcm-player.js"></script>
  174. <script type="text/javascript" src="webgl.js"></script> -->
  175. <script src="helper.js"></script>
  176. <script type="text/javascript" src="jmuxer.js"></script>
  177. <script src="https://cdn.bootcss.com/vConsole/3.2.0/vconsole.min.js"></script>
  178. <script type="text/javascript">
  179. var html = document.querySelector("html");
  180. var clientWidth = html.getBoundingClientRect().width;
  181. var clientheight = window.innerHeight;
  182. html.style.fontSize = clientWidth / 23.4375 + "px";
  183. const ch = 14 / (clientheight / clientWidth)
  184. $('.swiper-slide').css("padding", `14% ${ch}%`)
  185. var app = new Vue({
  186. el: '#homeapp',
  187. data: {
  188. message: 'Hello Vue!',
  189. homeList: [],
  190. urlData: {},
  191. rbdData: {},
  192. activeIndexData: "",
  193. swipeDirection: "",
  194. },
  195. mounted() {
  196. // var jmuxer = new JMuxer({
  197. // node: 'player',
  198. // flushingTime: 15,
  199. // fps: 30,
  200. // mode: 'video',
  201. // debug: false
  202. // });
  203. // var audioMuxer = new JMuxer({
  204. // node: 'audioPlayer',
  205. // flushingTime: 15,
  206. // clearBuffer: true,
  207. // fps: 60, //可以不选,原先43
  208. // mode: 'audio',
  209. // debug: false
  210. // });
  211. // //初始化一下就可以了,
  212. let vConsole = new VConsole();
  213. // //你打印的数据 比如
  214. console.log('test');
  215. //就可像小程序一样的看了和调试了。
  216. this.$nextTick(function() {
  217. this.gethomeList();
  218. });
  219. var that = this;
  220. var swiper = new Swiper('.swiper-container', {
  221. observer: true, //修改swiper自己或子元素时,自动初始化swiper
  222. observeParents: true, //修改swiper的父元素时,自动初始化swiper
  223. navigation: {
  224. nextEl: '.swiper-button-next',
  225. prevEl: '.swiper-button-prev',
  226. },
  227. on: {
  228. touchEnd: function(event) {
  229. console.log('触摸停止');
  230. console.log(swiper.swipeDirection);
  231. this.swipeDirection = swiper.swipeDirection;
  232. },
  233. transitionStart: function() {
  234. console.log("transitionStart", this.activeIndex)
  235. this.activeIndexData = this.activeIndex;
  236. },
  237. slideChangeTransitionStart: function() {
  238. console.log("slideChangeTransitionStart", this.activeIndex)
  239. this.activeIndexData = this.activeIndex;
  240. },
  241. slideChangeTransitionEnd: function() {
  242. console.log("slideChangeTransitionEnd", this.activeIndex)
  243. this.activeIndexData = this.activeIndex;
  244. if (this.swipeDirection == "next") {
  245. that.getSwiperInfo("nextSlide");
  246. } else if (this.swipeDirection == "prev") {
  247. that.getSwiperInfo("prevSlide");
  248. }
  249. },
  250. // slideChangeStart: function() {
  251. // alert(this.activeIndext);
  252. // },
  253. // slideChangeEnd: function() {
  254. // console.log("下标啊", this)
  255. // },
  256. // ransitionStart: function(activeIndex) {
  257. // console.log("下标啊", this, activeIndex)
  258. // },
  259. // slideChangeEnd: function(swiperHere) {
  260. // var txt = $('.swiper-slide-active').html();
  261. // console.log("打印索引值", txt)
  262. // }
  263. }
  264. });
  265. },
  266. methods: {
  267. homeinfo(data) {
  268. console.log("打印数据", data, this.urlData)
  269. if (this.urlData.status === 0) {
  270. console.log("打印数据", data, this.urlData.data.sn)
  271. wx.miniProgram.navigateTo({
  272. url: '/pages/trialInterface/trialInterface?record=' + data.id + '&sn=' + this
  273. .urlData.sn,
  274. })
  275. } else {
  276. wx.showToast({
  277. title: this.urlData.msg,
  278. icon: "none",
  279. duration: 500,
  280. });
  281. }
  282. },
  283. renew(data) {
  284. console.log("续费啊", data);
  285. wx.miniProgram.navigateTo({
  286. url: '/pages/order/renew/index?record=' + data.id,
  287. })
  288. },
  289. remainTime(ctime, exceptTime) {
  290. var date1 = ctime;
  291. var date2 = exceptTime; //结束时间
  292. var date3 = new Date(date2.replace(/-/g, '/')).getTime() - new Date(date1.replace(/-/g, '/'))
  293. .getTime(); //时间差的毫秒数
  294. console.log("时间戳===========》", date3)
  295. //------------------------------
  296. var tmiss = ''
  297. //计算出相差天数
  298. var days = Math.floor(date3 / (24 * 3600 * 1000))
  299. // console.log(days + "天");
  300. //计算出小时数
  301. var leave1 = date3 % (24 * 3600 * 1000) //计算天数后剩余的毫秒数
  302. var hours = Math.floor(leave1 / (3600 * 1000))
  303. //计算相差分钟数
  304. var leave2 = leave1 % (3600 * 1000) //计算小时数后剩余的毫秒数
  305. var minutes = Math.floor(leave2 / (60 * 1000))
  306. //计算相差秒数
  307. var leave3 = leave2 % (60 * 1000) //计算分钟数后剩余的毫秒数
  308. var seconds = Math.round(leave3 / 1000)
  309. var times = ""
  310. if (Number(days) == 0) {
  311. // console.log(hours + "小时" + minutes + "分")
  312. tmiss = Number(hours) + "小时" + Number(minutes) + "分"
  313. } else {
  314. if (Number(hours) == 0 && Number(minutes) == 0) {
  315. // console.log(days + "天")
  316. tmiss = Number(days) + "天"
  317. } else {
  318. // console.log(days + "天" + hours + "小时 ")
  319. tmiss = Number(days) + "天" + Number(hours) + "小时 "
  320. }
  321. }
  322. // console.log("tmiss>>>>>>", tmiss);
  323. return tmiss
  324. },
  325. swiperNext(data) {
  326. this.getSwiperInfo("next");
  327. },
  328. swiperPrev() {
  329. this.getSwiperInfo("prev");
  330. },
  331. getSwiperInfo(data) {
  332. console.log("方向=======", data, $('.swiper-slide-active').index());
  333. // return
  334. if (data == "next") {
  335. var activeIndex = $('.swiper-slide-active').index() + 1;
  336. } else if (data == "prev") {
  337. var activeIndex = $('.swiper-slide-active').index() - 1;
  338. } else if (data == "prevSlide") {
  339. var activeIndex = $('.swiper-slide-active').index();
  340. } else if (data == "nextSlide") {
  341. var activeIndex = $('.swiper-slide-active').index();
  342. }
  343. var ids = "#wine" + $('.swiper-slide-active').index();
  344. var domprev = $(ids);
  345. console.log("下标id======", activeIndex);
  346. domprev.empty();
  347. // var baseUrl = "http://192.168.31.20";
  348. var baseUrl = "http://192.168.199.243";
  349. var urlss = 'test.androidscloud.com'
  350. let that = this;
  351. let rbdData = {
  352. "userCardId": that.homeList[activeIndex].id,
  353. "deviceStatus": 1,
  354. };
  355. // setTimeout(() => {
  356. $.ajax({
  357. url: baseUrl + "/api/storage/v1/cardStatus/getRbd",
  358. data: JSON.stringify(rbdData),
  359. type: 'post',
  360. dataType: 'json',
  361. // async: false,
  362. contentType: "application/json;charset=UTF-8",
  363. headers: {
  364. 'token': tokens.substring(6, tokens.length),
  365. "Authorization": tokens.substring(6, tokens.length)
  366. },
  367. success: function(data) {
  368. that.urlData = data.data;
  369. console.log("挂载安卓卡成功", that.urlData);
  370. //
  371. }
  372. })
  373. var fpsCount = 0;
  374. var requestCount = 0;
  375. var timeCount = 0;
  376. var isVisuable = true;
  377. var isFeed = true;
  378. var isDrag = false;
  379. var shoudDrop = false;
  380. var isEnough = true;
  381. var ifCanPlay = false;
  382. var isFinish = false;
  383. var delayTime = new Date().getTime();
  384. var feedTime = new Date().getTime();
  385. var readyTime = new Date().getTime();
  386. var requestTime = new Date().getTime();
  387. var curTime = new Date().getTime();
  388. var requestTime = new Date().getTime(); //记录离开时间
  389. var playerid = 'player' + activeIndex;
  390. var audioPlayerid = 'audioPlayer' + activeIndex;
  391. var myVideo = document.getElementById(playerid);
  392. var myAudio = document.getElementById(audioPlayerid);
  393. var audioBuffer = [];
  394. var audioBack = [];
  395. Module = {};
  396. Module.onRuntimeInitialized = function() {
  397. console.log("Wasm 加载成功!")
  398. isFinish = true;
  399. }
  400. document.addEventListener("visibilitychange", () => {
  401. if (document.visibilityState == "visible") {
  402. console.log("页面可见,继续喂视频");
  403. //requestTime = new Date().getTime();
  404. isVisuable = true;
  405. } else {
  406. isVisuable = false;
  407. isFeed = false;
  408. myVideo.pause();
  409. }
  410. });
  411. myVideo.play();
  412. myVideo.addEventListener('pause', function() {
  413. //console.log("视频播放暂停");
  414. isFeed = false;
  415. });
  416. myAudio.addEventListener('canplay', function() {
  417. console.log("缓冲区大小 %f", myAudio.buffered.end(0) - myAudio.buffered.start(0));
  418. });
  419. // var socketURL = "ws://192.168.11.66:9101";
  420. var socketURL = "ws://192.168.198.11:9101"
  421. // socketURL = "ws://14.215.128.98:14077";
  422. //socketURL = "wss://192.168.11.242:9104";
  423. var jmuxer = new JMuxer({
  424. node: playerid,
  425. flushingTime: 15,
  426. fps: 30,
  427. mode: 'video',
  428. debug: false
  429. });
  430. var audioMuxer = new JMuxer({
  431. node: audioPlayerid,
  432. flushingTime: 15,
  433. clearBuffer: true,
  434. fps: 60, //可以不选,原先43
  435. mode: 'audio',
  436. debug: false
  437. });
  438. curTime = new Date().getTime();
  439. var ws = new WebSocket(socketURL);
  440. ws.binaryType = 'arraybuffer';
  441. //断开检测
  442. ws.onclose = function(e) {
  443. alert("websocket连接断开");
  444. console.log('websocket 断开: ' + e.code + ' ' + e.reason + ' ' + e.wasClean);
  445. console.log(e);
  446. }
  447. ws.addEventListener('open', function(event) {
  448. console.log("发送配置帧");
  449. // ws.send(ConfigChannel("RK3923C1201900139"));
  450. });
  451. ws.addEventListener('error', function(event) {
  452. console.log("连接失败");
  453. });
  454. ws.addEventListener('message', function(event) {
  455. var data = that.ParseProto(event.data); //JAVA服务器转发
  456. //console.log("收到数据");
  457. var audioData = {
  458. audio: data.audio,
  459. video: null,
  460. duration: data.duration
  461. };
  462. var videoData = {
  463. audio: null,
  464. video: data.video,
  465. duration: data.duration
  466. };
  467. if (myAudio.readyState == 2) {
  468. requestTime = new Date().getTime();
  469. isEnough = false;
  470. console.log("数据存储不够,出现声音停止,时间差 %f", myAudio.buffered.end(0));
  471. myAudio.pause();
  472. //myAudio.playbackRate = 2;
  473. } else if (myAudio.readyState == 4 && isEnough == false) {
  474. myAudio.play();
  475. var time = new Date().getTime();
  476. isEnough = true;
  477. console.log("填满耗时 %d ms, 填充帧数 %d, 填充延迟 %d ms", time - requestTime, requestCount,
  478. requestCount * 23);
  479. console.log("----接收到启动 %d ms, 缓冲区 %f---", time - delayTime, myAudio.buffered.end(
  480. 0) - myAudio.played
  481. .end(0));
  482. }
  483. if (data.audio != null) //喂音频
  484. {
  485. if (myAudio.buffered.length > 0 && myAudio.played.length > 0) {
  486. var bufferTime = myAudio.buffered.end(0) - myAudio.played.end(0);
  487. //console.log(" bufferTime %d", bufferTime);
  488. if (bufferTime > 1) {
  489. //console.log("丢掉一些包");
  490. //return;
  491. }
  492. }
  493. audioMuxer.feed(audioData);
  494. }
  495. if (data.video != null) //喂视频
  496. {
  497. if (isFeed) {
  498. jmuxer.feed(data);
  499. }
  500. //jmuxer.feed(videoData);
  501. }
  502. });
  503. myVideo.onmousedown = function(event) {
  504. //放在此处只是为了方便演示,实际使用中查找横竖屏只要刚连接上时调用一次就好。
  505. //var checkBuffer = GetScreenState();
  506. //ws.send(checkBuffer);
  507. if (!isFeed) {
  508. console.log("重新申请I帧");
  509. requestTime = new Date().getTime();
  510. var buffer = RequestIFrame();
  511. //var buffer = new Uint8Array([0x01]);
  512. ws.send(buffer);
  513. }
  514. //console.log("报文 %s", PrintArry(buffer));
  515. if (event.button == 0) {
  516. var posX = event.offsetX * 1080 * 1.0 / myVideo.clientWidth;
  517. var posY = event.offsetY * 1920 * 1.0 / myVideo.clientHeight;
  518. var buffer = ExexuteMouseDown(posX.toString(), posY.toString());
  519. ws.send(buffer);
  520. isDrag = true;
  521. }
  522. }
  523. myVideo.onmousemove = function(event) {
  524. if (isDrag && event.button == 0) {
  525. var posX = event.offsetX * 1080 * 1.0 / myVideo.clientWidth;
  526. var posY = event.offsetY * 1920 * 1.0 / myVideo.clientHeight;
  527. var buffer = ExexuteMouseMove(posX.toString(), posY.toString());
  528. ws.send(buffer);
  529. //console.log("移动位置 %d, %d", posX, posY);
  530. }
  531. }
  532. myVideo.onmouseup = function(event) {
  533. isDrag = false;
  534. var posX = event.offsetX * 1080 * 1.0 / myVideo.clientWidth;
  535. var posY = event.offsetY * 1920 * 1.0 / myVideo.clientHeight;
  536. var buffer = ExexuteMouseUp(posX.toString(), posY.toString());
  537. ws.send(buffer);
  538. }
  539. myVideo.onkeydown = function(event) {
  540. ExexuteKeyDown(e.keyCode);
  541. }
  542. },
  543. //解协议
  544. ParseProto(data) {
  545. //隐藏控件 controls
  546. var fpsCount = 0;
  547. var requestCount = 0;
  548. var timeCount = 0;
  549. var isVisuable = true;
  550. var isFeed = true;
  551. var isDrag = false;
  552. var shoudDrop = false;
  553. var isEnough = true;
  554. var ifCanPlay = false;
  555. var isFinish = false;
  556. var delayTime = new Date().getTime();
  557. var feedTime = new Date().getTime();
  558. var readyTime = new Date().getTime();
  559. var requestTime = new Date().getTime();
  560. var curTime = new Date().getTime();
  561. var requestTime = new Date().getTime(); //记录离开时间
  562. var temp = "";
  563. var input = new Uint8Array(data),
  564. duration,
  565. video,
  566. audio;
  567. if (input[0] == 0 && input[1] == 0 && input[2] == 0 && input[3] == 1) {
  568. // debugger
  569. video = input;
  570. duration = 24;
  571. var nalType = input[4] & 0x1f; //nalType == 0x07|| nalType == 0x08 || nalType == 0x05
  572. if (!isFeed) {
  573. if (nalType == 0x05) {
  574. console.log("发现I帧");
  575. }
  576. if (nalType == 0x05 && isVisuable) {
  577. console.log("检测到I帧 %d,重新渲染, 耗时 %d ms", nalType, new Date().getTime() - requestTime);
  578. isFeed = true;
  579. }
  580. }
  581. } else if (input[0] == 0xff) {
  582. if (!isEnough) {
  583. requestCount++;
  584. //audioBuffer.push(input);
  585. }
  586. audio = input;
  587. if (new Date().getTime() - curTime > 100) {
  588. delayTime = new Date().getTime();
  589. console.log("接收时间 %d ms", new Date().getTime() - curTime);
  590. }
  591. curTime = new Date().getTime();
  592. duration = 24;
  593. //console.log("duration %d", duration);
  594. } else if (input[0] == 0x68) {
  595. if (input[23] == 0x05) //横竖屏标识
  596. {
  597. var state = CheckScreenDirection(input.slice(24, 24 + 8));
  598. if (state == 1) {
  599. console.log("安卓卡此时竖屏");
  600. //竖屏处理
  601. } else {
  602. console.log("安卓卡此时横屏");
  603. //横屏处理
  604. }
  605. }
  606. if (input[23] == 0x0b) {
  607. console.log("多端登陆");
  608. }
  609. //console.log("屏幕旋转 %s", PrintArry(input));
  610. }
  611. return {
  612. audio: audio,
  613. video: video,
  614. duration: duration
  615. };
  616. },
  617. gethomeList() {
  618. var baseUrl = 'http://192.168.199.243';
  619. // var baseUrl = "http://192.168.31.20";
  620. var query = window.location.search.substring(1);
  621. var vars = query.split("&");
  622. var tokens = vars.find(e => {
  623. return e.startsWith('token')
  624. }) || ''
  625. var data = {}
  626. var clientType = vars.find(e => {
  627. return e.startsWith('clientType')
  628. }) || ''
  629. var cardIp = vars.find(e => {
  630. return e.startsWith('cardIp')
  631. }) || ''
  632. var port = vars.find(e => {
  633. return e.startsWith('port')
  634. }) || ''
  635. var sn = vars.find(e => {
  636. return e.startsWith('sn')
  637. }) || ''
  638. var demoTime = vars.find(e => {
  639. return e.startsWith('demoTime')
  640. }) || ''
  641. var id = vars.find(e => {
  642. return e.startsWith('id')
  643. }) || ''
  644. var vip = vars.find(e => {
  645. return e.startsWith('vip')
  646. }) || ''
  647. var diskName = vars.find(e => {
  648. return e.startsWith('diskName')
  649. }) || ''
  650. var times = vars.find(e => {
  651. return e.startsWith('times')
  652. }) || ''
  653. var username = vars.find(e => {
  654. return e.startsWith('username')
  655. }) || ''
  656. var userCardId = vars.find(e => {
  657. return e.startsWith('userCardId')
  658. }) || ''
  659. var ip = vars.find(e => {
  660. return e.startsWith('ip')
  661. }) || ''
  662. var windowHeight = vars.find(e => {
  663. return e.startsWith('windowHeight')
  664. }) || ''
  665. var tokens = vars.find(e => {
  666. return e.startsWith('token')
  667. }) || ''
  668. data.clientType = clientType.substring(11, clientType.length)
  669. data.cardIp = cardIp.substring(7, cardIp.length)
  670. data.port = port.substring(5, port.length)
  671. data.sn = sn.substring(3, sn.length)
  672. data.demoTime = demoTime.substring(9, demoTime.length)
  673. data.id = id.substring(3, id.length)
  674. data.vip = vip.substring(4, vip.length)
  675. data.diskName = diskName.substring(9, diskName.length)
  676. data.times = times.substring(6, times.length)
  677. data.username = username.substring(9, username.length)
  678. data.userCardId = userCardId.substring(11, userCardId.length)
  679. data.ip = ip.substring(3, ip.length)
  680. console.log("data====", data);
  681. this.urlData = data;
  682. let that = this;
  683. $.ajax({
  684. url: baseUrl + "/api/user/v1/client/disk/info",
  685. data: {},
  686. type: 'get',
  687. dataType: 'json',
  688. headers: {
  689. 'token': tokens.substring(6, tokens.length),
  690. "Authorization": tokens.substring(6, tokens.length)
  691. },
  692. success: function(data) {
  693. console.log("云手机信息=======", data);
  694. if (data.data) {
  695. that.homeList = data.data.diskInfo;
  696. console.log("云手机this.homeListthis.homeListthis.homeList=======", that
  697. .homeList);
  698. var urlss = 'test.androidscloud.com'
  699. let rbdData = {
  700. "userCardId": that.homeList[0].id,
  701. "deviceStatus": 1,
  702. };
  703. let activeIndex = $('.swiper-slide-active').index();
  704. // let that = this;
  705. setTimeout(() => {
  706. $.ajax({
  707. url: baseUrl +
  708. "/api/storage/v1/cardStatus/getRbd",
  709. data: JSON.stringify(rbdData),
  710. // data:rbdData,
  711. type: 'post',
  712. dataType: 'json',
  713. contentType: "application/json;charset=UTF-8",
  714. async: false,
  715. headers: {
  716. 'token': tokens.substring(6, tokens.length),
  717. "Authorization": tokens.substring(6, tokens
  718. .length)
  719. },
  720. success: function(data) {
  721. that.urlData = data;
  722. console.log("挂载安卓卡成功", that.urlData);
  723. //
  724. }
  725. })
  726. console.log(
  727. "that.urlDatathat.urlDatathat.urlDatathat.urlData",
  728. that.urlData);
  729. //隐藏控件 controls
  730. var fpsCount = 0;
  731. var requestCount = 0;
  732. var timeCount = 0;
  733. var isVisuable = true;
  734. var isFeed = true;
  735. var isDrag = false;
  736. var shoudDrop = false;
  737. var isEnough = true;
  738. var ifCanPlay = false;
  739. var isFinish = false;
  740. var delayTime = new Date().getTime();
  741. var feedTime = new Date().getTime();
  742. var readyTime = new Date().getTime();
  743. var requestTime = new Date().getTime();
  744. var curTime = new Date().getTime();
  745. var requestTime = new Date().getTime(); //记录离开时间
  746. var playerid = 'player' + activeIndex;
  747. var audioPlayerid = 'audioPlayer' + activeIndex;
  748. var myVideo = document.getElementById(playerid);
  749. var myAudio = document.getElementById(audioPlayerid);
  750. var audioBuffer = [];
  751. var audioBack = [];
  752. Module = {};
  753. Module.onRuntimeInitialized = function() {
  754. console.log("Wasm 加载成功!")
  755. isFinish = true;
  756. }
  757. document.addEventListener("visibilitychange", () => {
  758. if (document.visibilityState == "visible") {
  759. console.log("页面可见,继续喂视频");
  760. //requestTime = new Date().getTime();
  761. isVisuable = true;
  762. } else {
  763. isVisuable = false;
  764. isFeed = false;
  765. myVideo.pause();
  766. }
  767. });
  768. myVideo.play();
  769. myVideo.addEventListener('pause', function() {
  770. //console.log("视频播放暂停");
  771. isFeed = false;
  772. });
  773. myAudio.addEventListener('canplay', function() {
  774. console.log("缓冲区大小 %f", myAudio.buffered.end(0) -
  775. myAudio.buffered.start(0));
  776. });
  777. // var socketURL = "ws://192.168.11.66:9101";
  778. var socketURL = "ws://192.168.198.11:9101"
  779. // socketURL = "ws://14.215.128.98:14077";
  780. //socketURL = "wss://192.168.11.242:9104";
  781. var jmuxer = new JMuxer({
  782. node: playerid,
  783. flushingTime: 15,
  784. fps: 30,
  785. mode: 'video',
  786. debug: false
  787. });
  788. var audioMuxer = new JMuxer({
  789. node: audioPlayerid,
  790. flushingTime: 15,
  791. clearBuffer: true,
  792. fps: 60, //可以不选,原先43
  793. mode: 'audio',
  794. debug: false
  795. });
  796. curTime = new Date().getTime();
  797. var ws = new WebSocket(socketURL);
  798. ws.binaryType = 'arraybuffer';
  799. //断开检测
  800. ws.onclose = function(e) {
  801. alert("websocket连接断开");
  802. console.log('websocket 断开: ' + e.code + ' ' + e
  803. .reason + ' ' + e.wasClean);
  804. console.log(e);
  805. }
  806. ws.addEventListener('open', function(event) {
  807. console.log("发送配置帧");
  808. // ws.send(ConfigChannel("RK3923C1201900139"));
  809. });
  810. ws.addEventListener('error', function(event) {
  811. console.log("连接失败");
  812. });
  813. ws.addEventListener('message', function(event) {
  814. var data = that.ParseProto(event
  815. .data); //JAVA服务器转发
  816. //console.log("收到数据");
  817. var audioData = {
  818. audio: data.audio,
  819. video: null,
  820. duration: data.duration
  821. };
  822. var videoData = {
  823. audio: null,
  824. video: data.video,
  825. duration: data.duration
  826. };
  827. if (myAudio.readyState == 2) {
  828. requestTime = new Date().getTime();
  829. isEnough = false;
  830. console.log("数据存储不够,出现声音停止,时间差 %f", myAudio
  831. .buffered.end(0));
  832. myAudio.pause();
  833. //myAudio.playbackRate = 2;
  834. } else if (myAudio.readyState == 4 && isEnough ==
  835. false) {
  836. myAudio.play();
  837. var time = new Date().getTime();
  838. isEnough = true;
  839. console.log(
  840. "填满耗时 %d ms, 填充帧数 %d, 填充延迟 %d ms",
  841. time - requestTime, requestCount,
  842. requestCount * 23);
  843. console.log("----接收到启动 %d ms, 缓冲区 %f---",
  844. time - delayTime, myAudio.buffered
  845. .end(0) - myAudio.played
  846. .end(0));
  847. }
  848. if (data.audio != null) //喂音频
  849. {
  850. if (myAudio.buffered.length > 0 && myAudio
  851. .played.length > 0) {
  852. var bufferTime = myAudio.buffered.end(
  853. 0) - myAudio.played.end(0);
  854. //console.log(" bufferTime %d", bufferTime);
  855. if (bufferTime > 1) {
  856. //console.log("丢掉一些包");
  857. //return;
  858. }
  859. }
  860. audioMuxer.feed(audioData);
  861. }
  862. if (data.video != null) //喂视频
  863. {
  864. if (isFeed) {
  865. jmuxer.feed(data);
  866. }
  867. //jmuxer.feed(videoData);
  868. }
  869. });
  870. myVideo.onmousedown = function(event) {
  871. //放在此处只是为了方便演示,实际使用中查找横竖屏只要刚连接上时调用一次就好。
  872. //var checkBuffer = GetScreenState();
  873. //ws.send(checkBuffer);
  874. if (!isFeed) {
  875. console.log("重新申请I帧");
  876. requestTime = new Date().getTime();
  877. var buffer = RequestIFrame();
  878. //var buffer = new Uint8Array([0x01]);
  879. ws.send(buffer);
  880. }
  881. //console.log("报文 %s", PrintArry(buffer));
  882. if (event.button == 0) {
  883. var posX = event.offsetX * 1080 * 1.0 / myVideo
  884. .clientWidth;
  885. var posY = event.offsetY * 1920 * 1.0 / myVideo
  886. .clientHeight;
  887. var buffer = ExexuteMouseDown(posX.toString(),
  888. posY.toString());
  889. ws.send(buffer);
  890. isDrag = true;
  891. }
  892. }
  893. myVideo.onmousemove = function(event) {
  894. if (isDrag && event.button == 0) {
  895. var posX = event.offsetX * 1080 * 1.0 / myVideo
  896. .clientWidth;
  897. var posY = event.offsetY * 1920 * 1.0 / myVideo
  898. .clientHeight;
  899. var buffer = ExexuteMouseMove(posX.toString(),
  900. posY.toString());
  901. ws.send(buffer);
  902. //console.log("移动位置 %d, %d", posX, posY);
  903. }
  904. }
  905. myVideo.onmouseup = function(event) {
  906. isDrag = false;
  907. var posX = event.offsetX * 1080 * 1.0 / myVideo
  908. .clientWidth;
  909. var posY = event.offsetY * 1920 * 1.0 / myVideo
  910. .clientHeight;
  911. var buffer = ExexuteMouseUp(posX.toString(), posY
  912. .toString());
  913. ws.send(buffer);
  914. }
  915. myVideo.onkeydown = function(event) {
  916. ExexuteKeyDown(e.keyCode);
  917. }
  918. }, 1)
  919. } else {
  920. }
  921. //
  922. }
  923. })
  924. }
  925. }
  926. })
  927. var homeList = []; //云手机列表信息
  928. var url = window.location.href;
  929. url = url.split('/')
  930. console.log(url)
  931. // var baseUrl = 'https://' + url[2] //'http://192.168.31.159'//'http://' + url[2]
  932. // var baseUrl = 'http://192.168.31.20'
  933. var baseUrl = 'http://192.168.199.243';
  934. var query = window.location.search.substring(1);
  935. var vars = query.split("&");
  936. // var urls = "https://xcx.androidscloud.com"
  937. // 审核
  938. $.ajax({
  939. url: baseUrl + "/api/user/v1/config/download/isShow",
  940. data: {},
  941. type: 'get',
  942. dataType: 'json',
  943. contentType: "application/json;charset=UTF-8",
  944. success: function(data) {
  945. if (data.data) {
  946. $("#showsuss").show()
  947. } else {
  948. $("#showsuss").hide()
  949. }
  950. //
  951. }
  952. })
  953. // var baseUrl = window.location.href; //"http://192.168.31.20"
  954. document.body.addEventListener('touchmove', function(e) {
  955. e.preventDefault()
  956. }, {
  957. passive: false
  958. })
  959. var data = {}
  960. var clientType = vars.find(e => {
  961. return e.startsWith('clientType')
  962. }) || ''
  963. var cardIp = vars.find(e => {
  964. return e.startsWith('cardIp')
  965. }) || ''
  966. var port = vars.find(e => {
  967. return e.startsWith('port')
  968. }) || ''
  969. var sn = vars.find(e => {
  970. return e.startsWith('sn')
  971. }) || ''
  972. var demoTime = vars.find(e => {
  973. return e.startsWith('demoTime')
  974. }) || ''
  975. var id = vars.find(e => {
  976. return e.startsWith('id')
  977. }) || ''
  978. var vip = vars.find(e => {
  979. return e.startsWith('vip')
  980. }) || ''
  981. var diskName = vars.find(e => {
  982. return e.startsWith('diskName')
  983. }) || ''
  984. var times = vars.find(e => {
  985. return e.startsWith('times')
  986. }) || ''
  987. var username = vars.find(e => {
  988. return e.startsWith('username')
  989. }) || ''
  990. var userCardId = vars.find(e => {
  991. return e.startsWith('userCardId')
  992. }) || ''
  993. var ip = vars.find(e => {
  994. return e.startsWith('ip')
  995. }) || ''
  996. var windowHeight = vars.find(e => {
  997. return e.startsWith('windowHeight')
  998. }) || ''
  999. var tokens = vars.find(e => {
  1000. return e.startsWith('token')
  1001. }) || ''
  1002. $(".swiper-container").css("height", windowHeight.substring(13, windowHeight.length));
  1003. console.log("获取网页高度", windowHeight.substring(13, windowHeight.length));
  1004. // $(".aaa").text(clientType.substring(11, clientType.length))
  1005. // let cardIp = getUrlParam('cardIp');
  1006. // console.log(cardIp)
  1007. $.ajax({
  1008. url: baseUrl + "/api/user/v1/client/disk/info",
  1009. data: {},
  1010. type: 'get',
  1011. dataType: 'json',
  1012. headers: {
  1013. 'token': tokens.substring(6, tokens.length),
  1014. "Authorization": tokens.substring(6, tokens.length)
  1015. },
  1016. success: function(data) {
  1017. console.log("云手机信息=======", data);
  1018. if (data.data) {
  1019. homeList = data.data.diskInfo;
  1020. } else {
  1021. }
  1022. //
  1023. }
  1024. })
  1025. getQueryString: (name) => {
  1026. let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
  1027. let r = window.location.search.substr(1).match(reg);
  1028. console.log(name)
  1029. if (r != null) {
  1030. return unescape(decodeURI(r[2]));
  1031. return null;
  1032. }
  1033. }
  1034. data.clientType = clientType.substring(11, clientType.length)
  1035. data.cardIp = cardIp.substring(7, cardIp.length)
  1036. data.port = port.substring(5, port.length)
  1037. data.sn = sn.substring(3, sn.length)
  1038. data.demoTime = demoTime.substring(9, demoTime.length)
  1039. data.id = id.substring(3, id.length)
  1040. data.vip = vip.substring(4, vip.length)
  1041. data.diskName = diskName.substring(9, diskName.length)
  1042. data.times = times.substring(6, times.length)
  1043. data.username = username.substring(9, username.length)
  1044. data.userCardId = userCardId.substring(11, userCardId.length)
  1045. data.ip = ip.substring(3, ip.length)
  1046. let timestext = "剩" + decodeURI(data.times) || data.demoTime / 3600 + "小时"
  1047. $(".diskName").text(decodeURI(data.diskName) || data.username)
  1048. console.log("timestext>>>>>>", timestext);
  1049. $(".canvastime").text(timestext)
  1050. if (data.vip == "0") {
  1051. $(".canvasfalse").css({
  1052. "display": "block"
  1053. })
  1054. $(".canvas").css({
  1055. "display": "none"
  1056. })
  1057. } else {
  1058. $(".canvas").css({
  1059. "display": "block"
  1060. })
  1061. $(".canvasfalse").css({
  1062. "display": "none"
  1063. })
  1064. }
  1065. function onMessage(evt) {
  1066. console.log("onMessage==============", evt);
  1067. var messageData = new Uint8Array(evt.data);
  1068. player.decode(messageData);
  1069. }
  1070. $("canvas").on("click", function() {
  1071. client.close()
  1072. // ?clientType=0&cardIp=30.30.30.42&port=9100&sn=RK3930C2301900042&demoTime=3600&id=3
  1073. setTimeout(() => {
  1074. wx.miniProgram.navigateTo({
  1075. url: '/pages/trialInterface/trialInterface?clientType=' + data.clientType +
  1076. "&cardIp=" + data.cardIp +
  1077. "&port=" + data.port + "&sn=" + data.sn + "&username=" + data.username +
  1078. "&userCardId=" + data.userCardId +
  1079. "&demoTime=3600&id=" + data.id + "&diskName=" + decodeURI(data.diskName)
  1080. })
  1081. }, 100);
  1082. })
  1083. $(".helps").click(function() {
  1084. // wx.miniProgram.navigateTo({
  1085. // url: '/pages/viewurl/viewurl'
  1086. // })
  1087. //按点击处理
  1088. var set = $('.helps').attr("data-id")
  1089. if (set == '1') {
  1090. $('.helps').attr({
  1091. "data-id": "2"
  1092. })
  1093. $(".helps").hide();
  1094. $(".help").css({
  1095. "right": "0"
  1096. })
  1097. } else {
  1098. $('.helps').attr({
  1099. "data-id": "1"
  1100. })
  1101. $(".help").css({
  1102. "right": "-4rem"
  1103. })
  1104. }
  1105. });
  1106. function stopPropagation(e) {
  1107. if (e.stopPropagation)
  1108. e.stopPropagation();
  1109. else
  1110. e.cancelBubble = true;
  1111. }
  1112. $(document).bind('click', function() {
  1113. $(".help").css({
  1114. "right": "-4rem"
  1115. })
  1116. $('.helps').attr({
  1117. "data-id": "1"
  1118. })
  1119. $(".helps").show();
  1120. });
  1121. $('.helpfont').bind('click', function(e) {
  1122. console.log("帮助啊啊");
  1123. // stopPropagation(e);
  1124. wx.miniProgram.navigateTo({
  1125. url: '/pages/viewurl/viewurl'
  1126. })
  1127. });
  1128. $('.buyIcon,.kp_btn').bind('click', function(e) {
  1129. console.log("购买");
  1130. // stopPropagation(e);
  1131. wx.miniProgram.navigateTo({
  1132. url: '/pages/order/buy/index'
  1133. })
  1134. });
  1135. // $('.homeRenew').bind('click', function(e) {
  1136. // console.log("续费啊");
  1137. // // stopPropagation(e);
  1138. // wx.miniProgram.navigateTo({
  1139. // url: '/pages/order/buy/index'
  1140. // })
  1141. // });
  1142. $(".homeRenew").on("click", function() {
  1143. console.log("续费啊");
  1144. wx.miniProgram.navigateTo({
  1145. url: '/pages/order/renew/index'
  1146. })
  1147. });
  1148. $('.helps').bind('click', function(e) {
  1149. stopPropagation(e);
  1150. });
  1151. $(".boximg").on("click", function() {
  1152. $(".mainbox").css({
  1153. "display": "none"
  1154. })
  1155. $(".maxs").css({
  1156. "display": "none"
  1157. })
  1158. })
  1159. $(".maxs").on("click", function() {
  1160. $(".mainbox").css({
  1161. "display": "none"
  1162. })
  1163. $(".maxs").css({
  1164. "display": "none"
  1165. })
  1166. })
  1167. $(".addto").on("click", function() {
  1168. $(".mainbox").css({
  1169. "display": "block"
  1170. })
  1171. $(".maxs").css({
  1172. "display": "block"
  1173. })
  1174. })
  1175. $(".notLoggedin-bt").on("click", function() {
  1176. // $(".mainbox").css({
  1177. // "display": "block"
  1178. // })
  1179. // $(".maxs").css({
  1180. // "display": "block"
  1181. // })
  1182. })
  1183. function selectText(x) {
  1184. if (document.selection) {
  1185. var range = document.body.createTextRange();
  1186. range.moveToElementText(x);
  1187. range.select();
  1188. } else if (window.getSelection) {
  1189. var selection = window.getSelection();
  1190. var range = document.createRange();
  1191. selection.removeAllRanges();
  1192. range.selectNodeContents(x);
  1193. selection.addRange(range);
  1194. }
  1195. }
  1196. function cp(x) {
  1197. $(".mainbox").css({
  1198. "display": "none"
  1199. })
  1200. $(".sbox").css({
  1201. "display": "block"
  1202. })
  1203. selectText(x);
  1204. document.execCommand("copy");
  1205. alert("复制成功")
  1206. }
  1207. </script>
  1208. <script>
  1209. //隐藏控件 controls
  1210. // var fpsCount = 0;
  1211. // var requestCount = 0;
  1212. // var timeCount = 0;
  1213. // var isVisuable = true;
  1214. // var isFeed = true;
  1215. // var isDrag = false;
  1216. // var shoudDrop = false;
  1217. // var isEnough = true;
  1218. // var ifCanPlay = false;
  1219. // var isFinish = false;
  1220. // var delayTime = new Date().getTime();
  1221. // var feedTime = new Date().getTime();
  1222. // var readyTime = new Date().getTime();
  1223. // var requestTime = new Date().getTime();
  1224. // var curTime = new Date().getTime();
  1225. // var requestTime = new Date().getTime(); //记录离开时间
  1226. // var myVideo = document.getElementById("player");
  1227. // var myAudio = document.getElementById("audioPlayer");
  1228. // var audioBuffer = [];
  1229. // var audioBack = [];
  1230. // Module = {};
  1231. // Module.onRuntimeInitialized = function() {
  1232. // console.log("Wasm 加载成功!")
  1233. // isFinish = true;
  1234. // }
  1235. // document.addEventListener("visibilitychange", () => {
  1236. // if (document.visibilityState == "visible") {
  1237. // console.log("页面可见,继续喂视频");
  1238. // //requestTime = new Date().getTime();
  1239. // isVisuable = true;
  1240. // } else {
  1241. // isVisuable = false;
  1242. // isFeed = false;
  1243. // myVideo.pause();
  1244. // }
  1245. // });
  1246. // myVideo.play();
  1247. // myVideo.addEventListener('pause', function() {
  1248. // //console.log("视频播放暂停");
  1249. // isFeed = false;
  1250. // });
  1251. // myAudio.addEventListener('canplay', function() {
  1252. // console.log("缓冲区大小 %f", myAudio.buffered.end(0) - myAudio.buffered.start(0));
  1253. // });
  1254. // //解协议
  1255. // function ParseProto(data) {
  1256. // var temp = "";
  1257. // var input = new Uint8Array(data),
  1258. // duration,
  1259. // video,
  1260. // audio;
  1261. // if (input[0] == 0 && input[1] == 0 && input[2] == 0 && input[3] == 1) {
  1262. // // debugger
  1263. // video = input;
  1264. // duration = 24;
  1265. // var nalType = input[4] & 0x1f; //nalType == 0x07|| nalType == 0x08 || nalType == 0x05
  1266. // if (!isFeed) {
  1267. // if (nalType == 0x05) {
  1268. // console.log("发现I帧");
  1269. // }
  1270. // if (nalType == 0x05 && isVisuable) {
  1271. // console.log("检测到I帧 %d,重新渲染, 耗时 %d ms", nalType, new Date().getTime() - requestTime);
  1272. // isFeed = true;
  1273. // }
  1274. // }
  1275. // } else if (input[0] == 0xff) {
  1276. // if (!isEnough) {
  1277. // requestCount++;
  1278. // //audioBuffer.push(input);
  1279. // }
  1280. // audio = input;
  1281. // if (new Date().getTime() - curTime > 100) {
  1282. // delayTime = new Date().getTime();
  1283. // console.log("接收时间 %d ms", new Date().getTime() - curTime);
  1284. // }
  1285. // curTime = new Date().getTime();
  1286. // duration = 24;
  1287. // //console.log("duration %d", duration);
  1288. // } else if (input[0] == 0x68) {
  1289. // if (input[23] == 0x05) //横竖屏标识
  1290. // {
  1291. // var state = CheckScreenDirection(input.slice(24, 24 + 8));
  1292. // if (state == 1) {
  1293. // console.log("安卓卡此时竖屏");
  1294. // //竖屏处理
  1295. // } else {
  1296. // console.log("安卓卡此时横屏");
  1297. // //横屏处理
  1298. // }
  1299. // }
  1300. // if (input[23] == 0x0b) {
  1301. // console.log("多端登陆");
  1302. // }
  1303. // //console.log("屏幕旋转 %s", PrintArry(input));
  1304. // }
  1305. // return {
  1306. // audio: audio,
  1307. // video: video,
  1308. // duration: duration
  1309. // };
  1310. // }
  1311. // window.onload = function() {
  1312. // // var socketURL = 'wss://jmuxer-demo-server.herokuapp.com';
  1313. // //socketURL = "ws://127.0.0.1:8080"
  1314. // // socketURL = "ws://192.168.11.233:8080"
  1315. // //socketURL = "ws://14.215.128.98:14112";
  1316. // var socketURL = "ws://192.168.11.66:9101";
  1317. // // socketURL = "ws://14.215.128.98:14077";
  1318. // //socketURL = "wss://192.168.11.242:9104";
  1319. // var jmuxer = new JMuxer({
  1320. // node: 'player',
  1321. // flushingTime: 15,
  1322. // fps: 30,
  1323. // mode: 'video',
  1324. // debug: false
  1325. // });
  1326. // var audioMuxer = new JMuxer({
  1327. // node: 'audioPlayer',
  1328. // flushingTime: 15,
  1329. // clearBuffer: true,
  1330. // fps: 60, //可以不选,原先43
  1331. // mode: 'audio',
  1332. // debug: false
  1333. // });
  1334. // curTime = new Date().getTime();
  1335. // var ws = new WebSocket(socketURL);
  1336. // ws.binaryType = 'arraybuffer';
  1337. // //断开检测
  1338. // ws.onclose = function(e) {
  1339. // alert("websocket连接断开");
  1340. // console.log('websocket 断开: ' + e.code + ' ' + e.reason + ' ' + e.wasClean);
  1341. // console.log(e);
  1342. // }
  1343. // ws.addEventListener('open', function(event) {
  1344. // console.log("发送配置帧");
  1345. // ws.send(ConfigChannel("RK3923C1201900139"));
  1346. // });
  1347. // ws.addEventListener('error', function(event) {
  1348. // console.log("连接失败");
  1349. // });
  1350. // ws.addEventListener('message', function(event) {
  1351. // var data = ParseProto(event.data); //JAVA服务器转发
  1352. // //console.log("收到数据");
  1353. // var audioData = {
  1354. // audio: data.audio,
  1355. // video: null,
  1356. // duration: data.duration
  1357. // };
  1358. // var videoData = {
  1359. // audio: null,
  1360. // video: data.video,
  1361. // duration: data.duration
  1362. // };
  1363. // if (myAudio.readyState == 2) {
  1364. // requestTime = new Date().getTime();
  1365. // isEnough = false;
  1366. // console.log("数据存储不够,出现声音停止,时间差 %f", myAudio.buffered.end(0));
  1367. // myAudio.pause();
  1368. // //myAudio.playbackRate = 2;
  1369. // } else if (myAudio.readyState == 4 && isEnough == false) {
  1370. // myAudio.play();
  1371. // var time = new Date().getTime();
  1372. // isEnough = true;
  1373. // console.log("填满耗时 %d ms, 填充帧数 %d, 填充延迟 %d ms", time - requestTime, requestCount, requestCount * 23);
  1374. // console.log("----接收到启动 %d ms, 缓冲区 %f---", time - delayTime, myAudio.buffered.end(0) - myAudio.played.end(0));
  1375. // }
  1376. // if (data.audio != null) //喂音频
  1377. // {
  1378. // if (myAudio.buffered.length > 0 && myAudio.played.length > 0) {
  1379. // var bufferTime = myAudio.buffered.end(0) - myAudio.played.end(0);
  1380. // //console.log(" bufferTime %d", bufferTime);
  1381. // if (bufferTime > 1) {
  1382. // //console.log("丢掉一些包");
  1383. // //return;
  1384. // }
  1385. // }
  1386. // audioMuxer.feed(audioData);
  1387. // }
  1388. // if (data.video != null) //喂视频
  1389. // {
  1390. // if (isFeed) {
  1391. // jmuxer.feed(data);
  1392. // }
  1393. // //jmuxer.feed(videoData);
  1394. // }
  1395. // });
  1396. // myVideo.onmousedown = function(event) {
  1397. // //放在此处只是为了方便演示,实际使用中查找横竖屏只要刚连接上时调用一次就好。
  1398. // //var checkBuffer = GetScreenState();
  1399. // //ws.send(checkBuffer);
  1400. // if (!isFeed) {
  1401. // console.log("重新申请I帧");
  1402. // requestTime = new Date().getTime();
  1403. // var buffer = RequestIFrame();
  1404. // //var buffer = new Uint8Array([0x01]);
  1405. // ws.send(buffer);
  1406. // }
  1407. // //console.log("报文 %s", PrintArry(buffer));
  1408. // if (event.button == 0) {
  1409. // var posX = event.offsetX * 1080 * 1.0 / myVideo.clientWidth;
  1410. // var posY = event.offsetY * 1920 * 1.0 / myVideo.clientHeight;
  1411. // var buffer = ExexuteMouseDown(posX.toString(), posY.toString());
  1412. // ws.send(buffer);
  1413. // isDrag = true;
  1414. // }
  1415. // }
  1416. // myVideo.onmousemove = function(event) {
  1417. // if (isDrag && event.button == 0) {
  1418. // var posX = event.offsetX * 1080 * 1.0 / myVideo.clientWidth;
  1419. // var posY = event.offsetY * 1920 * 1.0 / myVideo.clientHeight;
  1420. // var buffer = ExexuteMouseMove(posX.toString(), posY.toString());
  1421. // ws.send(buffer);
  1422. // //console.log("移动位置 %d, %d", posX, posY);
  1423. // }
  1424. // }
  1425. // myVideo.onmouseup = function(event) {
  1426. // isDrag = false;
  1427. // var posX = event.offsetX * 1080 * 1.0 / myVideo.clientWidth;
  1428. // var posY = event.offsetY * 1920 * 1.0 / myVideo.clientHeight;
  1429. // var buffer = ExexuteMouseUp(posX.toString(), posY.toString());
  1430. // ws.send(buffer);
  1431. // }
  1432. // myVideo.onkeydown = function(event) {
  1433. // ExexuteKeyDown(e.keyCode);
  1434. // }
  1435. // }
  1436. // function Back() {
  1437. // if (event.button == 2) {
  1438. // //ExexuteKeyDown(4);
  1439. // }
  1440. // ExexuteKeyDown(4);
  1441. // window.event.returnValue = false;
  1442. // return false;
  1443. // }
  1444. </script>
  1445. </body>
  1446. </html>