WXtrialInterface.html 31 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title></title>
  6. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7. <meta name="viewport" content="initial-scale=1,maximum-scale=1, minimum-scale=1,user-scalable=no">
  8. <meta name="x5-orientation" content="portrait" />
  9. <meta name="screen-orientation" content="portrait" />
  10. <meta name="viewport" content="width=device-width, minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
  11. <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
  12. <meta name="apple-mobile-web-app-capable" content="yes">
  13. <meta name="apple-mobile-web-app-status-bar-style" content="black">
  14. <meta name="format-detection" content="telephone=no, email=no">
  15. <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
  16. <meta name="apple-mobile-web-app-capable" content="yes">
  17. <!-- 删除苹果默认的工具栏和菜单栏 -->
  18. <meta name="apple-mobile-web-app-status-bar-style" content="black">
  19. <!-- 设置苹果工具栏颜��? -->
  20. <meta name="format-detection" content="telphone=no, email=no">
  21. <!-- 忽略页面中的数字识别为电话,忽略email识别 -->
  22. <!-- 启用360浏览器的极速模��?(webkit) -->
  23. <meta name="renderer" content="webkit">
  24. <!-- 避免IE使用兼容模式 -->
  25. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  26. <!-- 针对手持设备优化,主要是针对一些老的不识别viewport的浏览器,比如黑��? -->
  27. <meta name="HandheldFriendly" content="true">
  28. <!-- 微软的老式浏览��? -->
  29. <meta name="MobileOptimized" content="320">
  30. <!-- uc强制竖屏 -->
  31. <!-- <meta name="screen-orientation" content="portrait"> -->
  32. <!-- QQ强制竖屏 -->
  33. <!-- <meta name="x5-orientation" content="portrait"> -->
  34. <!-- 不能旋转,问题出在这 -->
  35. <!-- UC强制全屏 -->
  36. <meta name="full-screen" content="yes">
  37. <!-- QQ强制全屏 -->
  38. <meta name="x5-fullscreen" content="true">
  39. <!-- UC应用模式 -->
  40. <meta name="browsermode" content="application">
  41. <!-- QQ应用模式 -->
  42. <meta name="x5-page-mode" content="app">
  43. <!-- windows phone 点击无高��? -->
  44. <meta name="msapplication-tap-highlight" content="no">
  45. <title></title>
  46. <link rel="stylesheet" type="text/css" href="css/WXtrialInterface.css" />
  47. <script async defer src="https://buttons.github.io/buttons.js"></script>
  48. </head>
  49. <body class="scroll h-player" style="overscroll-behavior: contain;">
  50. <div class="container" id="player">
  51. <div class="muted" id="btnMuted">
  52. <div class="control-right-img" data-id="1">
  53. <img src="../static/img/xuanfu_icon.png">
  54. </div>
  55. </div>
  56. <div id="wine">
  57. <!-- <video id="video1" muted="muted" x5-video-orientation="landscape" playsinline="true" autoplay="true"
  58. webkit-playsinline="true" x5-playsinline="true" x5-video-player-type="h5" x5-video-player-fullscreen="false" style="pointer-events: none;"></video> -->
  59. <!-- <div id="box"> -->
  60. <!-- <video muted="muted" x5-video-orientation="landscape" playsinline="true" autoplay="true"
  61. webkit-playsinline="true" x5-playsinline="true" x5-video-player-type="h5"
  62. x5-video-player-fullscreen="false" style="pointer-events: none;object-fit: fill;width: 100%;height:100%"
  63. disablePictureInPicture="true" poster="images/loader-thumb.jpg" id="playerVideo"></video> -->
  64. <video id="playerVideo" muted="muted" x5-video-orientation="landscape" playsinline="true" autoplay="true"
  65. webkit-playsinline="true" x5-playsinline="true" x5-video-player-type="h5" x5-video-player-fullscreen="false"
  66. style="pointer-events: none;object-fit: fill;width: 100%;height:100%"></video>
  67. <div id="box"></div>
  68. <audio preload="auto" autoplay controls poster="images/loader-thumb.jpg" id="audioPlayer"
  69. style="position: absolute;top: 0;width: 0;height: 0;"></audio>
  70. </div>
  71. <div class="leftmains">
  72. <div class="PictureQualityMain">
  73. <div class="PictureQuality " data-id="3072000">高清</div>
  74. <div class="PictureQuality avit" data-id="2243000">标清</div>
  75. <div class="PictureQuality" data-id="400000">极速</div>
  76. <div class="PictureQuality" data-id="400000">自动</div>
  77. </div>
  78. <div class="operation">
  79. <div class="upload" id="showsuss" data-text="uploads">
  80. <img src="../static/img/wx/shangchuan_icon.png">
  81. <div>上传</div>
  82. </div>
  83. <div class="upload" onclick="cp(document.getElementById('user_ref_id'));" data-text="Shearplate">
  84. <img src="../static/img/wx/jianqieban_icon.png">
  85. <div>剪切板</div>
  86. </div>
  87. <div class="upload" id="upload" data-text="Signout">
  88. <img src="../static/img/wx/tuichu_icon.png">
  89. <div>退出</div>
  90. </div>
  91. </div>
  92. </div>
  93. <div class="bottommains">
  94. <div class="botmat1">
  95. <div class="botmat1img" data-text="gengduo">
  96. <img src="../static/img/wx/gengduo_icon.png">
  97. </div>
  98. </div>
  99. <div class="botmat1">
  100. <div class="botmat1img" data-text="home">
  101. <img src="../static/img/wx/home_icon.png">
  102. </div>
  103. </div>
  104. <div class="botmat1">
  105. <div class="botmat1img" data-text="return">
  106. <img src="../static/img/wx/fanhui_icon.png">
  107. </div>
  108. </div>
  109. </div>
  110. <div class="mainbox" style="display: none;">
  111. <div class="boxTitle">提示</div>
  112. <div class="boxText">
  113. <div>由于小程序的功能限制,此功能暂时</div>
  114. <div>无法使用,请下载APP使用更多功能</div>
  115. </div>
  116. <div class="boxbt" onclick="cp(document.getElementById('user_ref_id'));">立即前往下载</div>
  117. <div class="boximg"><img src="../static/img/wx/guanbi_icon.png"></div>
  118. </div>
  119. <div class="sbox" style="display: none;">
  120. <div class="sboxText">下载地址已复制到剪切板</div>
  121. <div class="sboxbu">确定</div>
  122. </div>
  123. </div>
  124. <body oncontextmenu="Back()">
  125. </body>
  126. <div id="copy-txt" style="position: absolute;opacity: 0;">
  127. <span id="user_ref_id">www.androidsCloud.com</span>
  128. </div>
  129. <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
  130. <script src="../static/js/jquery-1.11.0.min.js"></script>
  131. <script src="helper.js"></script>
  132. <script type="text/javascript" src="pcm-player.js"></script>
  133. <!-- 音频
  134. <!-- <script src="../static/js/classlist.js"></script>
  135. <script src="../static/js/players.js"></script>
  136. <script src="../static/js/auroraplayer.js"></script>
  137. <script src="../static/js/aurora.js"></script>
  138. <script src="../static/js/aac.js"></script>
  139. <script src="../static/js/web.js?id=101"></script> -->
  140. <!-- <script src="../static/js/webapk.js"></script> -->
  141. <!-- 视频-->
  142. <!-- <script type="text/javascript" src="../static/js/Decoder.js"></script>
  143. <script type="text/javascript" src="../static/js/YUVCanvas.js"></script>
  144. <script type="text/javascript" src="../static/js/Player.js"></script> -->
  145. <!-- <script type="text/javascript" src="jmuxer.js"></script> -->
  146. <script src="https://cdn.bootcss.com/vConsole/3.2.0/vconsole.min.js"></script>
  147. <script src="WXdraw.js?v=110"></script>
  148. <script>
  149. document.addEventListener('touchstart', function () {
  150. var video = document.getElementById("playerVideo");
  151. var audio = document.getElementById("audioPlayer");
  152. video.play();
  153. }, false);
  154. var topwinHeight = window.screen.height - window.innerHeight + 30; //计算title top 头部
  155. $('#wine').css({
  156. "width": window.screen.width,
  157. "height": window.screen.height - topwinHeight - 20,
  158. "position": "absolute",
  159. })
  160. var winese = document.createElement("wine");
  161. wine.style.top = "-" + winese + 'px';
  162. //隐藏控件 controls
  163. var fpsCount = 0;
  164. var requestCount = 0;
  165. var timeCount = 0;
  166. var isVisuable = true;
  167. var isFeed = true;
  168. var isDrag = false;
  169. var shoudDrop = false;
  170. var isEnough = true;
  171. var ifCanPlay = false;
  172. var isFinish = false;
  173. var delayTime = new Date().getTime();
  174. var feedTime = new Date().getTime();
  175. var readyTime = new Date().getTime();
  176. var requestTime = new Date().getTime();
  177. var curTime = new Date().getTime();
  178. var requestTime = new Date().getTime(); //记录离开时间
  179. var myVideo = document.getElementById("playerVideo");
  180. $("#wine").click(function () {
  181. console.log("9999999999")
  182. });
  183. var myAudio = document.getElementById("audioPlayer");
  184. var audioBuffer = [];
  185. var audioBack = [];
  186. Module = {};
  187. Module.onRuntimeInitialized = function () {
  188. console.log("Wasm 加载成功!")
  189. isFinish = true;
  190. }
  191. document.addEventListener("visibilitychange", () => {
  192. if (document.visibilityState == "visible") {
  193. console.log("页面可见,继续喂视频");
  194. //requestTime = new Date().getTime();
  195. isVisuable = true;
  196. } else {
  197. isVisuable = false;
  198. isFeed = false;
  199. myVideo.pause();
  200. }
  201. });
  202. myVideo.play();
  203. myVideo.addEventListener('pause', function () {
  204. //console.log("视频播放暂停");
  205. isFeed = false;
  206. });
  207. myAudio.addEventListener('canplay', function () {
  208. console.log("缓冲区大小 %f", myAudio.buffered.end(0) - myAudio.buffered.start(0));
  209. });
  210. var decodeCount = 1;
  211. var isFinish = false;
  212. var player = new PCMPlayer({
  213. encoding: '16bitInt',
  214. channels: 2,
  215. sampleRate: 44100,
  216. flushingTime: 22,
  217. debug: false
  218. });
  219. Module = {};
  220. Module.onRuntimeInitialized = function () {
  221. console.log("Wasm 加载成功!")
  222. isFinish = true;
  223. }
  224. function decodeAAC(data) {
  225. var retPtr = Module._malloc(4 * 5 * 1024); //接收的数据
  226. var inputPtr = Module._malloc(4 * data.length); //输入数据
  227. for (i = 0; i < data.length; i++) {
  228. Module.HEAPU8[(inputPtr) + i] = data[i]; //转换为堆数据
  229. }
  230. var pcmLen = Module._feedData(retPtr, inputPtr, data.length);
  231. if (pcmLen >= 0) {
  232. //console.log("%d帧 aac 解码成功, %d", decodeCount, pcmLen);
  233. var pcmData = new Uint8Array(pcmLen);
  234. for (i = 0; i < pcmLen; i++) {
  235. pcmData[i] = Module.HEAPU8[(retPtr) + i]
  236. }
  237. player.feed(pcmData);
  238. } else {
  239. console.log("%d帧 aac 解码失败, %d", decodeCount, pcmLen);
  240. }
  241. decodeCount++;
  242. Module._free(inputPtr);
  243. Module._free(retPtr);
  244. }
  245. //解协议
  246. function ParseProto(data) {
  247. var temp = "";
  248. var input = new Uint8Array(data),
  249. duration,
  250. video,
  251. audio;
  252. if (input[0] == 0 && input[1] == 0 && input[2] == 0 && input[3] == 1) {
  253. // debugger
  254. video = input;
  255. duration = 24;
  256. var nalType = input[4] & 0x1f; //nalType == 0x07|| nalType == 0x08 || nalType == 0x05
  257. if (!isFeed) {
  258. if (nalType == 0x05) {
  259. console.log("发现I帧");
  260. }
  261. if (nalType == 0x05 && isVisuable) {
  262. console.log("检测到I帧 %d,重新渲染, 耗时 %d ms", nalType, new Date().getTime() - requestTime);
  263. isFeed = true;
  264. }
  265. }
  266. } else if (input[0] == 0xff) {
  267. if (!isEnough) {
  268. requestCount++;
  269. //audioBuffer.push(input);
  270. }
  271. audio = input;
  272. if (new Date().getTime() - curTime > 100) {
  273. delayTime = new Date().getTime();
  274. console.log("接收时间 %d ms", new Date().getTime() - curTime);
  275. }
  276. curTime = new Date().getTime();
  277. duration = 24;
  278. //console.log("duration %d", duration);
  279. } else if (input[0] == 0x68) {
  280. if (input[23] == 0x05) //横竖屏标识
  281. {
  282. var state = CheckScreenDirection(input.slice(24, 24 + 8));
  283. if (state == 1) {
  284. console.log("安卓卡此时竖屏");
  285. //竖屏处理
  286. } else {
  287. console.log("安卓卡此时横屏");
  288. //横屏处理
  289. }
  290. }
  291. if (input[23] == 0x0b) {
  292. console.log("多端登陆");
  293. }
  294. //console.log("屏幕旋转 %s", PrintArry(input));
  295. }
  296. return {
  297. audio: audio,
  298. video: video,
  299. duration: duration
  300. };
  301. }
  302. function GetRequest() {
  303. var url = location.search; // 获取url中"?"符后的字串
  304. var obj = new Object();
  305. if (url.indexOf("?") != -1) {
  306. var str = url.substr(1);
  307. strs = str.split("&");
  308. for (var i = 0; i < strs.length; i++) {
  309. obj[strs[i].split("=")[0]] = (strs[i].split("=")[1]);
  310. }
  311. }
  312. return obj;
  313. }
  314. window.onload = function () {
  315. var parameters = GetRequest();
  316. var ip = parameters["ip"];
  317. // var socketURL = 'wss://jmuxer-demo-server.herokuapp.com';
  318. //socketURL = "ws://127.0.0.1:8080"
  319. // socketURL = "ws://192.168.11.233:8080"
  320. //socketURL = "ws://14.215.128.98:14112";
  321. // var socketURL = "ws://192.168.11.66:9101";
  322. // var socketURL = "ws://192.168.198.21:9101"
  323. // var socketURL = "ws://14.215.128.97:15508"
  324. var socketURL = "ws://192.168.198.82:9100/card?cardIp=" + ip;
  325. // socketURL = "ws://14.215.128.98:14077";
  326. //socketURL = "wss://192.168.11.242:9104";
  327. var jmuxer = new JMuxer({
  328. node: 'playerVideo',
  329. flushingTime: 15,
  330. fps: 30,
  331. mode: 'video',
  332. debug: false
  333. });
  334. var audioMuxer = new JMuxer({
  335. node: 'audioPlayer',
  336. flushingTime: 15,
  337. clearBuffer: true,
  338. fps: 60, //可以不选,原先43
  339. mode: 'audio',
  340. debug: false
  341. });
  342. curTime = new Date().getTime();
  343. // var ws = new WebSocket(socketURL);
  344. // ws.binaryType = 'arraybuffer';
  345. // //断开检测
  346. // ws.onclose = function (e) {
  347. // alert("websocket连接断开");
  348. // console.log('websocket 断开: ' + e.code + ' ' + e.reason + ' ' + e.wasClean);
  349. // console.log(e);
  350. // getMessage()
  351. // }
  352. // ws.addEventListener('open', function (event) {
  353. // console.log("发送配置帧");
  354. // ws.send(ConfigChannel("RK3923C1201900139"));
  355. // });
  356. // ws.addEventListener('error', function (event) {
  357. // console.log("连接失败");
  358. // });
  359. function doConnect() {
  360. console.log("执行doconnect");
  361. ws = new WebSocket(socketURL);
  362. ws.binaryType = 'arraybuffer';
  363. ws.onclose = function (e) {
  364. console.log('websocket 断开: ' + e.code + ' ' + e.reason + ' ' + e.wasClean);
  365. console.log("时间: " + new Date() + e);
  366. alert("websocket连接断开,准备重连");
  367. doConnect();
  368. }
  369. ws.addEventListener('open', function (event) {
  370. console.log("发送配置帧");
  371. ws.send(ConfigChannel("RK3923C1201900139"));
  372. });
  373. ws.addEventListener('error', function (event) {
  374. console.log("连接失败");
  375. });
  376. ws.addEventListener('message', function (event) {
  377. var data = ParseProto(event.data);//JAVA服务器转发
  378. if (data.audio != null) { } //喂音频
  379. if (data.video != null) { //喂视频
  380. if (isFeed) {
  381. jmuxer.feed(data);
  382. }
  383. }
  384. });
  385. }
  386. function getMessage() {
  387. ws.addEventListener('message', function (event) {
  388. var data = ParseProto(event.data); //JAVA服务器转发
  389. //console.log("收到数据");
  390. var audioData = {
  391. audio: data.audio,
  392. video: null,
  393. duration: data.duration
  394. };
  395. var videoData = {
  396. audio: null,
  397. video: data.video,
  398. duration: data.duration
  399. };
  400. var input = new Uint8Array(event.data);
  401. // console.log("音频数据", input, input[0] == 0xff);
  402. if (input[0] == 0xff) {
  403. if (isFinish) {
  404. var time = new Date().getTime();
  405. decodeAAC(input);
  406. }
  407. } else { }
  408. if (myAudio.readyState == 2) {
  409. requestTime = new Date().getTime();
  410. isEnough = false;
  411. console.log("数据存储不够,出现声音停止,时间差 %f", myAudio.buffered.end(0));
  412. myAudio.pause();
  413. //myAudio.playbackRate = 2;
  414. } else if (myAudio.readyState == 4 && isEnough == false) {
  415. myAudio.play();
  416. var time = new Date().getTime();
  417. isEnough = true;
  418. console.log("填满耗时 %d ms, 填充帧数 %d, 填充延迟 %d ms", time - requestTime, requestCount,
  419. requestCount * 23);
  420. console.log("----接收到启动 %d ms, 缓冲区 %f---", time - delayTime, myAudio.buffered.end(0) - myAudio
  421. .played.end(0));
  422. }
  423. if (data.audio != null) //喂音频
  424. {
  425. if (myAudio.buffered.length > 0 && myAudio.played.length > 0) {
  426. var bufferTime = myAudio.buffered.end(0) - myAudio.played.end(0);
  427. //console.log(" bufferTime %d", bufferTime);
  428. if (bufferTime > 1) {
  429. //console.log("丢掉一些包");
  430. //return;
  431. }
  432. }
  433. audioMuxer.feed(audioData);
  434. }
  435. if (data.video != null) //喂视频
  436. {
  437. if (isFeed) {
  438. // console.log("渲染视频");
  439. jmuxer.feed(data);
  440. }
  441. //jmuxer.feed(videoData);
  442. }
  443. });
  444. }
  445. ws.addEventListener('message', function (event) {
  446. var data = ParseProto(event.data); //JAVA服务器转发
  447. //console.log("收到数据");
  448. var audioData = {
  449. audio: data.audio,
  450. video: null,
  451. duration: data.duration
  452. };
  453. var videoData = {
  454. audio: null,
  455. video: data.video,
  456. duration: data.duration
  457. };
  458. var input = new Uint8Array(event.data);
  459. // console.log("音频数据", input, input[0] == 0xff);
  460. if (input[0] == 0xff) {
  461. if (isFinish) {
  462. var time = new Date().getTime();
  463. decodeAAC(input);
  464. }
  465. } else { }
  466. if (myAudio.readyState == 2) {
  467. requestTime = new Date().getTime();
  468. isEnough = false;
  469. console.log("数据存储不够,出现声音停止,时间差 %f", myAudio.buffered.end(0));
  470. myAudio.pause();
  471. //myAudio.playbackRate = 2;
  472. } else if (myAudio.readyState == 4 && isEnough == false) {
  473. myAudio.play();
  474. var time = new Date().getTime();
  475. isEnough = true;
  476. console.log("填满耗时 %d ms, 填充帧数 %d, 填充延迟 %d ms", time - requestTime, requestCount,
  477. requestCount * 23);
  478. console.log("----接收到启动 %d ms, 缓冲区 %f---", time - delayTime, myAudio.buffered.end(0) - myAudio
  479. .played.end(0));
  480. }
  481. if (data.audio != null) //喂音频
  482. {
  483. if (myAudio.buffered.length > 0 && myAudio.played.length > 0) {
  484. var bufferTime = myAudio.buffered.end(0) - myAudio.played.end(0);
  485. //console.log(" bufferTime %d", bufferTime);
  486. if (bufferTime > 1) {
  487. //console.log("丢掉一些包");
  488. //return;
  489. }
  490. }
  491. audioMuxer.feed(audioData);
  492. }
  493. if (data.video != null) //喂视频
  494. {
  495. if (isFeed) {
  496. // console.log("渲染视频");
  497. jmuxer.feed(data);
  498. }
  499. //jmuxer.feed(videoData);
  500. }
  501. });
  502. var myPlay = document.getElementById("wine");
  503. myPlay.onmousedown = function (event) {
  504. console.log('5555555555')
  505. if (event.button == 0) {
  506. var posX = event.offsetX * 720 * 1.0 / myVideo.clientWidth;
  507. var posY = event.offsetY * 1280 * 1.0 / myVideo.clientHeight;
  508. var buffer = ExexuteMouseDown(posX.toString(), posY.toString());
  509. // console.log('posX=======posY', posX, posY)
  510. // console.log('buffer=======', buffer)
  511. ws.send(buffer);
  512. console.log('ws', ws)
  513. isDrag = true;
  514. }
  515. }
  516. myPlay.onmousemove = function (event) {
  517. console.log('5555555555', isDrag, event.button)
  518. if (isDrag && event.button == 0) {
  519. var posX = event.offsetX * 720 * 1.0 / myVideo.clientWidth;
  520. var posY = event.offsetY * 1280 * 1.0 / myVideo.clientHeight;
  521. var buffer = ExexuteMouseMove(posX.toString(), posY.toString());
  522. ws.send(buffer);
  523. console.log("移动位置 %d, %d", posX, posY);
  524. }
  525. }
  526. myPlay.onmouseup = function (event) {
  527. console.log('5555555555')
  528. isDrag = false;
  529. var posX = event.offsetX * 720 * 1.0 / myVideo.clientWidth;
  530. var posY = event.offsetY * 1280 * 1.0 / myVideo.clientHeight;
  531. var buffer = ExexuteMouseUp(posX.toString(), posY.toString());
  532. ws.send(buffer);
  533. }
  534. myPlay.onkeydown = function (event) {
  535. console.log('5555555555')
  536. ExexuteKeyDown(e.keyCode);
  537. }
  538. }
  539. function Back() {
  540. if (event.button == 2) {
  541. //ExexuteKeyDown(4);
  542. }
  543. ExexuteKeyDown(4);
  544. window.event.returnValue = false;
  545. return false;
  546. }
  547. var url = window.location.href;
  548. url = url.split('/')
  549. // var baseUrl = window.location.href; //"http://192.168.31.20"
  550. // var baseUrl = 'https://'+url[2] //url[2] //'http://192.168.31.159'//'http://' + url[2]
  551. var query = window.location.search.substring(1);
  552. // query = "clientType=1&cardIp=14.215.128.96&port=2012&sn=RK3930C2301900012&demoTime=3600&id=377&diskName=SC93mBww"
  553. var vars = query.split("&");
  554. console.log(vars)
  555. // var baseUrl = 'http://192.168.31.20'
  556. // var baseUrl = 'test.androidscloud.com'
  557. var baseUrl = "http://192.168.199.243";
  558. var data = {}
  559. // 审核
  560. $.ajax({
  561. url: baseUrl + "/api/user/v1/config/download/isShow",
  562. data: {},
  563. type: 'get',
  564. dataType: 'json',
  565. success: function (data) {
  566. if (data.data) {
  567. $("#showsuss").show()
  568. } else {
  569. $("#showsuss").hide()
  570. }
  571. //
  572. }
  573. })
  574. var clientType = vars.find(e => {
  575. return e.startsWith('clientType')
  576. }) || ''
  577. // console.log(clientType)
  578. data.clientType = clientType.substring(11, clientType.length)
  579. // 小程序直接进入
  580. var diskName = vars.find(e => {
  581. return e.startsWith('diskName')
  582. }) || ''
  583. data.diskName = diskName.substring(9, diskName.length)
  584. // document.title = decodeURI(data.diskName)
  585. if (data.clientType == 1) {
  586. var cardIp = vars.find(e => {
  587. return e.startsWith('cardIp')
  588. }) || ''
  589. var port = vars.find(e => {
  590. return e.startsWith('port')
  591. }) || ''
  592. var sn = vars.find(e => {
  593. return e.startsWith('sn')
  594. }) || ''
  595. var demoTime = vars.find(e => {
  596. return e.startsWith('demoTime')
  597. }) || ''
  598. var id = vars.find(e => {
  599. return e.startsWith('id')
  600. }) || ''
  601. data.clientType = clientType.substring(11, clientType.length)
  602. data.cardIp = cardIp.substring(7, cardIp.length)
  603. data.port = port.substring(5, port.length)
  604. data.sn = sn.substring(3, sn.length)
  605. data.demoTime = demoTime.substring(9, demoTime.length)
  606. data.id = id.substring(3, id.length)
  607. } else if (data.clientType == 2) { //分享屏幕
  608. console.log("走到分享屏幕里面啦==========", data.clientTypes);
  609. $(".leftmains").css({
  610. "right": "-4rem"
  611. })
  612. $('.leftmains').hide()
  613. $('.bottommains').hide()
  614. $('#btnMuted').hide()
  615. let ip = vars.find(e => {
  616. return e.startsWith('ip')
  617. }) || ''
  618. var username = vars.find(e => {
  619. return e.startsWith('username')
  620. }) || ''
  621. var id = vars.find(e => {
  622. return e.startsWith('id')
  623. }) || ''
  624. var userCardId = vars.find(e => {
  625. return e.startsWith('userCardId')
  626. }) || ''
  627. data.id = id.substring(3, id.length)
  628. data.username = username.substring(9, username.length)
  629. data.ip = ip.substring(3, ip.length)
  630. data.userCardId = userCardId.substring(11, userCardId.length)
  631. } else {
  632. // $(".leftmains").css({
  633. // "right":"-4rem"
  634. // })
  635. // $('.leftmains').hide()
  636. // $('.bottommains').hide()
  637. // $('#btnMuted').hide()
  638. var username = vars.find(e => {
  639. return e.startsWith('username')
  640. }) || ''
  641. var userCardId = vars.find(e => {
  642. return e.startsWith('userCardId')
  643. }) || ''
  644. data.username = username.substring(9, username.length)
  645. data.userCardId = userCardId.substring(11, userCardId.length)
  646. console.log(data.ip)
  647. }
  648. // 心跳
  649. // var time = 1000 * 30;
  650. // var interval;
  651. // fun()
  652. //
  653. // function run() {
  654. //
  655. // interval = setInterval(fun, time);
  656. // }
  657. //
  658. // function fun() {
  659. // $.ajax({
  660. // url: baseUrl + "/api/game/v1/cloudGame/dev/get/cardSn",
  661. // data: {
  662. // sn: data.sn
  663. // },
  664. // type: 'get',
  665. // dataType: 'json',
  666. // success: function(data) {
  667. //
  668. // }
  669. // })
  670. //
  671. // };
  672. // run();
  673. // data.clientType=1
  674. // data.sn="RK3930C2301900044"
  675. // data.cardIp="14.215.128.96"
  676. // data.port=2044
  677. var orientation = 0 //0 竖屏,1横屏
  678. var winHeight = window.screen.height - window.innerHeight
  679. // var urlss = url[2]
  680. // var urlss='192.168.31.20'
  681. // var urlss = "14.215.128.96"
  682. var urlss = 'test.androidscloud.com'
  683. document.body.addEventListener('touchmove', function (e) {
  684. e.preventDefault()
  685. }, {
  686. passive: false
  687. })
  688. //
  689. // urlss = "14.215.128.96"
  690. // console.log()
  691. // data.clientType = 1
  692. // data.sn="RK3930C2301900044"
  693. // data.cardIp="14.215.128.96"
  694. // data.port=2044
  695. // if (data.clientType == 3) {
  696. // var players = AV.Player.fromWebSocket("wss://" + urlss + '/authVideoWebSocket?' + "clientType=" + data.clientType +
  697. // "&username=" + data.username + "&userCardId=" + data.userCardId);
  698. // } else if (data.clientType == 2) {
  699. // // var players = AV.Player.fromWebSocket("wss://" + urlss + '/shareWebSocket?' + "clientType=" + data.clientType +
  700. // // "&username=" + data.username + "&userCardId=" + data.userCardId + "&ip=" + data.ip);
  701. // var players = AV.Player.fromWebSocket(
  702. // "wss://test.androidscloud.com/videoWebSocket?clientType=1&cardIp=14.215.128.96&port=2005&sn=RK3930C2301900005");
  703. // } else {
  704. // var players = AV.Player.fromWebSocket("wss://" + urlss + '/videoWebSocket?' + "clientType=" + data.clientType +
  705. // "&cardIp=" + data.cardIp + "&port=" + data.port + "&sn=" + data.sn);
  706. // }
  707. // // debugger
  708. // var players = AV.Player.fromWebSocket('ws://14.215.128.96/authVideoWebSocket?clientType=3&username=WqXTc1593762177&userCardId=377');
  709. // players.play();
  710. // players.volume = 100
  711. //var players = AV.Player.fromWebSocket('ws://14.215.128.96/videoWebSocket?clientType=0&cardIp=30.30.30.58&port=9100&sn=RK3930C2301900060');
  712. var warid = {
  713. id: data.id,
  714. type: 1,
  715. sn: data.sn
  716. }
  717. //结束时间 type=2
  718. var warids = {
  719. id: data.id,
  720. type: 2,
  721. sn: data.sn
  722. }
  723. // $.ajax({})
  724. // 关闭浏览器
  725. // window.onbeforeunload = function() {}
  726. //撤销的array
  727. var cancelList = new Array();
  728. //撤销的次数
  729. var cancelIndex = 0;
  730. var inputType = 0 //输入类型 0:手写,1:键盘输入
  731. //判断是否ie
  732. var IE_HACK = (/msie/i.test(navigator.userAgent) &&
  733. !/opera/i.test(navigator.userAgent));
  734. // 云手机相关逻辑
  735. // var player = new Player({
  736. // size: {
  737. // width: 1280,
  738. // height: 720
  739. // }
  740. // });
  741. // var secanv = document.getElementById("wine");
  742. // secanv.appendChild(player.canvas);
  743. // console.log("player=========>>>>", player);
  744. // console.log("secanv>>>>", secanv);
  745. // &cardIp="+data.data.extranetIp+"&port="+data.data.extranetPort+"&sn="+data.data.sn
  746. $(function () {
  747. initCanvas();
  748. });
  749. //初始化
  750. var initCanvas = function () {
  751. }
  752. $("#voew").on("click", function () { })
  753. $("#box").on("click", function () {
  754. // draw_graph('pencil', this)
  755. })
  756. console.log(player)
  757. $('#mocan').on('click', function () {
  758. draw_graph('pencil', this)
  759. })
  760. // //初始化一下就可以了,
  761. let vConsole = new VConsole();
  762. // //你打印的数据 比如
  763. console.log('test');
  764. //就可像小程序一样的看了和调试了。
  765. $('.no-ne-an').on('click', function () {
  766. //结束时间 type=2
  767. let warids = {
  768. id: data.id,
  769. type: 2,
  770. sn: data.sn
  771. }
  772. $.ajax({
  773. url: baseUrl + "/api/game/v1/cloudGame/dev/getSn",
  774. data: warid,
  775. type: 'get',
  776. dataType: 'json',
  777. success: function (data) {
  778. history.go(-1)
  779. if (data.status == 0) {
  780. } else {
  781. alert(data.msg)
  782. }
  783. //
  784. }
  785. })
  786. })
  787. var btnMuted = document.querySelector("#btnMuted");
  788. btnMuted && (function () {
  789. var setHistory = function (left, top) {
  790. try {
  791. localStorage.setItem("muted-btn-loc", JSON.stringify({
  792. left: left,
  793. top: top
  794. }));
  795. } catch (ex) { }
  796. };
  797. var getHistory = function () {
  798. try {
  799. var value = localStorage.getItem("muted-btn-loc");
  800. if (!value) return null;
  801. value = JSON.parse(value);
  802. if (!value) return null;
  803. return value;
  804. } catch (ex) {
  805. return null
  806. }
  807. };
  808. var fixLoc = function (loc) {
  809. var rect = btnMuted.getBoundingClientRect();
  810. rect = {
  811. top: rect.top,
  812. left: rect.left,
  813. width: rect.width,
  814. height: rect.height
  815. }; //部分低版本浏览器,该属性为只读
  816. if (loc) {
  817. rect.left = loc.left;
  818. rect.top = loc.top;
  819. }
  820. var minX = 0;
  821. var minY = 0;
  822. var docRect = document.documentElement.getBoundingClientRect();
  823. var maxY = docRect.height - rect.height;
  824. var maxX = docRect.width - rect.width;
  825. var left = rect.left;
  826. var top = rect.top;
  827. left = Math.min(left, maxX);
  828. left = Math.max(left, minX);
  829. top = Math.min(top, maxY);
  830. top = Math.max(top, minY);
  831. console.log(rect.top, top, loc);
  832. if (loc || top !== rect.top || left !== rect.left) {
  833. btnMuted.style.cssText += "left:" + left + "px;top:" + top + "px;";
  834. }
  835. }
  836. window.addEventListener("resize", function () {
  837. fixLoc();
  838. });
  839. var touchPoint = {
  840. pageY: 0,
  841. pageX: 0
  842. };
  843. var currentLoc = {
  844. top: 0,
  845. left: 0,
  846. curTop: 0,
  847. curLeft: 0
  848. };
  849. var toMove = false;
  850. var touchmove = function (e) {
  851. e.preventDefault();
  852. var point = e.changedTouches[0];
  853. var top = -touchPoint.pageY + point.pageY;
  854. var left = -touchPoint.pageX + point.pageX;
  855. if (toMove) {
  856. top += currentLoc.top;
  857. left += currentLoc.left;
  858. currentLoc.curLeft = left;
  859. currentLoc.curTop = top;
  860. btnMuted.style.cssText += "left:" + left + "px;top:" + top + "px;";
  861. } else {
  862. if (Math.abs(top) >= 5 || Math.abs(left) >= 5) {
  863. toMove = true;
  864. }
  865. }
  866. };
  867. var touchend = function () {
  868. window.removeEventListener("touchmove", touchmove, {
  869. passive: false
  870. });
  871. window.removeEventListener("touchend", touchend, {
  872. passive: false
  873. });
  874. if (toMove) {
  875. setHistory(currentLoc.curLeft, currentLoc.curTop);
  876. fixLoc();
  877. } else {
  878. //按点击处理
  879. var set = $('.control-right-img').attr("data-id")
  880. if (set == '1') {
  881. $('.control-right-img').attr({
  882. "data-id": "2"
  883. })
  884. // $('.control-right-img').find('img').attr({
  885. // "src": "../static/img/musicturn.png"
  886. // })
  887. // players.volume = 100
  888. $(".leftmains").css({
  889. "right": "-4rem"
  890. })
  891. // console.log(players)
  892. // players.play();
  893. } else {
  894. $('.control-right-img').attr({
  895. "data-id": "1"
  896. })
  897. $(".leftmains").css({
  898. "right": "0rem"
  899. })
  900. // $('.control-right-img').find('img').attr({
  901. // "src": "../static/img/musicfalse.png"
  902. // })
  903. // players.volume = 0
  904. // players.off('pause');
  905. // players.pause();
  906. // var embed = document.embedPlay;
  907. // console.log(players, "fdsfdsf")
  908. }
  909. }
  910. }
  911. btnMuted.addEventListener("touchstart", function (e) {
  912. e.preventDefault();
  913. toMove = false;
  914. var point = e.changedTouches[0];
  915. touchPoint.pageX = point.pageX;
  916. touchPoint.pageY = point.pageY;
  917. var rect = e.target.getBoundingClientRect();
  918. currentLoc.top = rect.top;
  919. currentLoc.left = rect.left;
  920. window.addEventListener("touchmove", touchmove, {
  921. passive: false
  922. });
  923. window.addEventListener("touchend", touchend, {
  924. passive: false
  925. });
  926. }, {
  927. passive: false
  928. });
  929. var history = getHistory();
  930. if (history) {
  931. fixLoc(history);
  932. }
  933. btnMuted.classList.remove("hide");
  934. })();
  935. $(".boximg").on("click", function () {
  936. $(".mainbox").css({
  937. "display": "none"
  938. })
  939. })
  940. // 剪切板
  941. $(".sboxbu").on("click", function () {
  942. $(".sbox").css({
  943. "display": "none"
  944. })
  945. })
  946. // 剪切板
  947. $(".uploadss").on("click", function () {
  948. $(".sbox").css({
  949. "display": "none"
  950. })
  951. })
  952. $("#upload").on("click", function () {
  953. console.log(wx);
  954. wx.miniProgram.switchTab({
  955. url: '/pages/home/home'
  956. })
  957. })
  958. function selectText(x) {
  959. if (document.selection) {
  960. var range = document.body.createTextRange();
  961. range.moveToElementText(x);
  962. range.select();
  963. } else if (window.getSelection) {
  964. var selection = window.getSelection();
  965. var range = document.createRange();
  966. selection.removeAllRanges();
  967. range.selectNodeContents(x);
  968. selection.addRange(range);
  969. }
  970. }
  971. function cp(x) {
  972. $(".mainbox").css({
  973. "display": "none"
  974. })
  975. $(".sbox").css({
  976. "display": "block"
  977. })
  978. selectText(x);
  979. document.execCommand("copy");
  980. }
  981. </script>
  982. <script type="text/javascript" src="jmuxer.js"></script>
  983. <script type="text/text/javascript" src="aac.js"></script>
  984. </body>
  985. </html>