homeNew.html 49 KB

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