homeNew.html 49 KB

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