homeNew.html 48 KB

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