WXtrialInterface.html 31 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121
  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. var ws;
  360. doConnect();
  361. function doConnect() {
  362. console.log("执行doconnect");
  363. ws = new WebSocket(socketURL);
  364. ws.binaryType = 'arraybuffer';
  365. ws.onclose = function (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. //console.log("收到数据");
  379. var audioData = {
  380. audio: data.audio,
  381. video: null,
  382. duration: data.duration
  383. };
  384. var videoData = {
  385. audio: null,
  386. video: data.video,
  387. duration: data.duration
  388. };
  389. var input = new Uint8Array(event.data);
  390. // console.log("音频数据", input, input[0] == 0xff);
  391. if (input[0] == 0xff) {
  392. if (isFinish) {
  393. var time = new Date().getTime();
  394. decodeAAC(input);
  395. }
  396. } else { }
  397. if (myAudio.readyState == 2) {
  398. requestTime = new Date().getTime();
  399. isEnough = false;
  400. console.log("数据存储不够,出现声音停止,时间差 %f", myAudio.buffered.end(0));
  401. myAudio.pause();
  402. //myAudio.playbackRate = 2;
  403. } else if (myAudio.readyState == 4 && isEnough == false) {
  404. myAudio.play();
  405. var time = new Date().getTime();
  406. isEnough = true;
  407. console.log("填满耗时 %d ms, 填充帧数 %d, 填充延迟 %d ms", time - requestTime, requestCount,
  408. requestCount * 23);
  409. console.log("----接收到启动 %d ms, 缓冲区 %f---", time - delayTime, myAudio.buffered.end(0) - myAudio
  410. .played.end(0));
  411. }
  412. if (data.audio != null) //喂音频
  413. {
  414. if (myAudio.buffered.length > 0 && myAudio.played.length > 0) {
  415. var bufferTime = myAudio.buffered.end(0) - myAudio.played.end(0);
  416. //console.log(" bufferTime %d", bufferTime);
  417. if (bufferTime > 1) {
  418. //console.log("丢掉一些包");
  419. //return;
  420. }
  421. }
  422. audioMuxer.feed(audioData);
  423. }
  424. if (data.video != null) //喂视频
  425. {
  426. if (isFeed) {
  427. // console.log("渲染视频");
  428. jmuxer.feed(data);
  429. }
  430. //jmuxer.feed(videoData);
  431. }
  432. });
  433. }
  434. function getMessage() {
  435. ws.addEventListener('message', function (event) {
  436. var data = ParseProto(event.data); //JAVA服务器转发
  437. //console.log("收到数据");
  438. var audioData = {
  439. audio: data.audio,
  440. video: null,
  441. duration: data.duration
  442. };
  443. var videoData = {
  444. audio: null,
  445. video: data.video,
  446. duration: data.duration
  447. };
  448. var input = new Uint8Array(event.data);
  449. // console.log("音频数据", input, input[0] == 0xff);
  450. if (input[0] == 0xff) {
  451. if (isFinish) {
  452. var time = new Date().getTime();
  453. decodeAAC(input);
  454. }
  455. } else { }
  456. if (myAudio.readyState == 2) {
  457. requestTime = new Date().getTime();
  458. isEnough = false;
  459. console.log("数据存储不够,出现声音停止,时间差 %f", myAudio.buffered.end(0));
  460. myAudio.pause();
  461. //myAudio.playbackRate = 2;
  462. } else if (myAudio.readyState == 4 && isEnough == false) {
  463. myAudio.play();
  464. var time = new Date().getTime();
  465. isEnough = true;
  466. console.log("填满耗时 %d ms, 填充帧数 %d, 填充延迟 %d ms", time - requestTime, requestCount,
  467. requestCount * 23);
  468. console.log("----接收到启动 %d ms, 缓冲区 %f---", time - delayTime, myAudio.buffered.end(0) - myAudio
  469. .played.end(0));
  470. }
  471. if (data.audio != null) //喂音频
  472. {
  473. if (myAudio.buffered.length > 0 && myAudio.played.length > 0) {
  474. var bufferTime = myAudio.buffered.end(0) - myAudio.played.end(0);
  475. //console.log(" bufferTime %d", bufferTime);
  476. if (bufferTime > 1) {
  477. //console.log("丢掉一些包");
  478. //return;
  479. }
  480. }
  481. audioMuxer.feed(audioData);
  482. }
  483. if (data.video != null) //喂视频
  484. {
  485. if (isFeed) {
  486. // console.log("渲染视频");
  487. jmuxer.feed(data);
  488. }
  489. //jmuxer.feed(videoData);
  490. }
  491. });
  492. }
  493. var myPlay = document.getElementById("wine");
  494. myPlay.onmousedown = function (event) {
  495. console.log('5555555555')
  496. if (event.button == 0) {
  497. var posX = event.offsetX * 720 * 1.0 / myVideo.clientWidth;
  498. var posY = event.offsetY * 1280 * 1.0 / myVideo.clientHeight;
  499. var buffer = ExexuteMouseDown(posX.toString(), posY.toString());
  500. // console.log('posX=======posY', posX, posY)
  501. // console.log('buffer=======', buffer)
  502. ws.send(buffer);
  503. console.log('ws', ws)
  504. isDrag = true;
  505. }
  506. }
  507. myPlay.onmousemove = function (event) {
  508. console.log('5555555555', isDrag, event.button)
  509. if (isDrag && event.button == 0) {
  510. var posX = event.offsetX * 720 * 1.0 / myVideo.clientWidth;
  511. var posY = event.offsetY * 1280 * 1.0 / myVideo.clientHeight;
  512. var buffer = ExexuteMouseMove(posX.toString(), posY.toString());
  513. ws.send(buffer);
  514. console.log("移动位置 %d, %d", posX, posY);
  515. }
  516. }
  517. myPlay.onmouseup = function (event) {
  518. console.log('5555555555')
  519. isDrag = false;
  520. var posX = event.offsetX * 720 * 1.0 / myVideo.clientWidth;
  521. var posY = event.offsetY * 1280 * 1.0 / myVideo.clientHeight;
  522. var buffer = ExexuteMouseUp(posX.toString(), posY.toString());
  523. ws.send(buffer);
  524. }
  525. myPlay.onkeydown = function (event) {
  526. console.log('5555555555')
  527. ExexuteKeyDown(e.keyCode);
  528. }
  529. }
  530. function Back() {
  531. if (event.button == 2) {
  532. //ExexuteKeyDown(4);
  533. }
  534. ExexuteKeyDown(4);
  535. window.event.returnValue = false;
  536. return false;
  537. }
  538. var url = window.location.href;
  539. url = url.split('/')
  540. // var baseUrl = window.location.href; //"http://192.168.31.20"
  541. // var baseUrl = 'https://'+url[2] //url[2] //'http://192.168.31.159'//'http://' + url[2]
  542. var query = window.location.search.substring(1);
  543. // query = "clientType=1&cardIp=14.215.128.96&port=2012&sn=RK3930C2301900012&demoTime=3600&id=377&diskName=SC93mBww"
  544. var vars = query.split("&");
  545. console.log(vars)
  546. // var baseUrl = 'http://192.168.31.20'
  547. // var baseUrl = 'test.androidscloud.com'
  548. var baseUrl = "http://192.168.199.243";
  549. var data = {}
  550. // 审核
  551. $.ajax({
  552. url: baseUrl + "/api/user/v1/config/download/isShow",
  553. data: {},
  554. type: 'get',
  555. dataType: 'json',
  556. success: function (data) {
  557. if (data.data) {
  558. $("#showsuss").show()
  559. } else {
  560. $("#showsuss").hide()
  561. }
  562. //
  563. }
  564. })
  565. var clientType = vars.find(e => {
  566. return e.startsWith('clientType')
  567. }) || ''
  568. // console.log(clientType)
  569. data.clientType = clientType.substring(11, clientType.length)
  570. // 小程序直接进入
  571. var diskName = vars.find(e => {
  572. return e.startsWith('diskName')
  573. }) || ''
  574. data.diskName = diskName.substring(9, diskName.length)
  575. // document.title = decodeURI(data.diskName)
  576. if (data.clientType == 1) {
  577. var cardIp = vars.find(e => {
  578. return e.startsWith('cardIp')
  579. }) || ''
  580. var port = vars.find(e => {
  581. return e.startsWith('port')
  582. }) || ''
  583. var sn = vars.find(e => {
  584. return e.startsWith('sn')
  585. }) || ''
  586. var demoTime = vars.find(e => {
  587. return e.startsWith('demoTime')
  588. }) || ''
  589. var id = vars.find(e => {
  590. return e.startsWith('id')
  591. }) || ''
  592. data.clientType = clientType.substring(11, clientType.length)
  593. data.cardIp = cardIp.substring(7, cardIp.length)
  594. data.port = port.substring(5, port.length)
  595. data.sn = sn.substring(3, sn.length)
  596. data.demoTime = demoTime.substring(9, demoTime.length)
  597. data.id = id.substring(3, id.length)
  598. } else if (data.clientType == 2) { //分享屏幕
  599. console.log("走到分享屏幕里面啦==========", data.clientTypes);
  600. $(".leftmains").css({
  601. "right": "-4rem"
  602. })
  603. $('.leftmains').hide()
  604. $('.bottommains').hide()
  605. $('#btnMuted').hide()
  606. let ip = vars.find(e => {
  607. return e.startsWith('ip')
  608. }) || ''
  609. var username = vars.find(e => {
  610. return e.startsWith('username')
  611. }) || ''
  612. var id = vars.find(e => {
  613. return e.startsWith('id')
  614. }) || ''
  615. var userCardId = vars.find(e => {
  616. return e.startsWith('userCardId')
  617. }) || ''
  618. data.id = id.substring(3, id.length)
  619. data.username = username.substring(9, username.length)
  620. data.ip = ip.substring(3, ip.length)
  621. data.userCardId = userCardId.substring(11, userCardId.length)
  622. } else {
  623. // $(".leftmains").css({
  624. // "right":"-4rem"
  625. // })
  626. // $('.leftmains').hide()
  627. // $('.bottommains').hide()
  628. // $('#btnMuted').hide()
  629. var username = vars.find(e => {
  630. return e.startsWith('username')
  631. }) || ''
  632. var userCardId = vars.find(e => {
  633. return e.startsWith('userCardId')
  634. }) || ''
  635. data.username = username.substring(9, username.length)
  636. data.userCardId = userCardId.substring(11, userCardId.length)
  637. console.log(data.ip)
  638. }
  639. // 心跳
  640. // var time = 1000 * 30;
  641. // var interval;
  642. // fun()
  643. //
  644. // function run() {
  645. //
  646. // interval = setInterval(fun, time);
  647. // }
  648. //
  649. // function fun() {
  650. // $.ajax({
  651. // url: baseUrl + "/api/game/v1/cloudGame/dev/get/cardSn",
  652. // data: {
  653. // sn: data.sn
  654. // },
  655. // type: 'get',
  656. // dataType: 'json',
  657. // success: function(data) {
  658. //
  659. // }
  660. // })
  661. //
  662. // };
  663. // run();
  664. // data.clientType=1
  665. // data.sn="RK3930C2301900044"
  666. // data.cardIp="14.215.128.96"
  667. // data.port=2044
  668. var orientation = 0 //0 竖屏,1横屏
  669. var winHeight = window.screen.height - window.innerHeight
  670. // var urlss = url[2]
  671. // var urlss='192.168.31.20'
  672. // var urlss = "14.215.128.96"
  673. var urlss = 'test.androidscloud.com'
  674. document.body.addEventListener('touchmove', function (e) {
  675. e.preventDefault()
  676. }, {
  677. passive: false
  678. })
  679. //
  680. // urlss = "14.215.128.96"
  681. // console.log()
  682. // data.clientType = 1
  683. // data.sn="RK3930C2301900044"
  684. // data.cardIp="14.215.128.96"
  685. // data.port=2044
  686. // if (data.clientType == 3) {
  687. // var players = AV.Player.fromWebSocket("wss://" + urlss + '/authVideoWebSocket?' + "clientType=" + data.clientType +
  688. // "&username=" + data.username + "&userCardId=" + data.userCardId);
  689. // } else if (data.clientType == 2) {
  690. // // var players = AV.Player.fromWebSocket("wss://" + urlss + '/shareWebSocket?' + "clientType=" + data.clientType +
  691. // // "&username=" + data.username + "&userCardId=" + data.userCardId + "&ip=" + data.ip);
  692. // var players = AV.Player.fromWebSocket(
  693. // "wss://test.androidscloud.com/videoWebSocket?clientType=1&cardIp=14.215.128.96&port=2005&sn=RK3930C2301900005");
  694. // } else {
  695. // var players = AV.Player.fromWebSocket("wss://" + urlss + '/videoWebSocket?' + "clientType=" + data.clientType +
  696. // "&cardIp=" + data.cardIp + "&port=" + data.port + "&sn=" + data.sn);
  697. // }
  698. // // debugger
  699. // var players = AV.Player.fromWebSocket('ws://14.215.128.96/authVideoWebSocket?clientType=3&username=WqXTc1593762177&userCardId=377');
  700. // players.play();
  701. // players.volume = 100
  702. //var players = AV.Player.fromWebSocket('ws://14.215.128.96/videoWebSocket?clientType=0&cardIp=30.30.30.58&port=9100&sn=RK3930C2301900060');
  703. var warid = {
  704. id: data.id,
  705. type: 1,
  706. sn: data.sn
  707. }
  708. //结束时间 type=2
  709. var warids = {
  710. id: data.id,
  711. type: 2,
  712. sn: data.sn
  713. }
  714. // $.ajax({})
  715. // 关闭浏览器
  716. // window.onbeforeunload = function() {}
  717. //撤销的array
  718. var cancelList = new Array();
  719. //撤销的次数
  720. var cancelIndex = 0;
  721. var inputType = 0 //输入类型 0:手写,1:键盘输入
  722. //判断是否ie
  723. var IE_HACK = (/msie/i.test(navigator.userAgent) &&
  724. !/opera/i.test(navigator.userAgent));
  725. // 云手机相关逻辑
  726. // var player = new Player({
  727. // size: {
  728. // width: 1280,
  729. // height: 720
  730. // }
  731. // });
  732. // var secanv = document.getElementById("wine");
  733. // secanv.appendChild(player.canvas);
  734. // console.log("player=========>>>>", player);
  735. // console.log("secanv>>>>", secanv);
  736. // &cardIp="+data.data.extranetIp+"&port="+data.data.extranetPort+"&sn="+data.data.sn
  737. $(function () {
  738. initCanvas();
  739. });
  740. //初始化
  741. var initCanvas = function () {
  742. }
  743. $("#voew").on("click", function () { })
  744. $("#box").on("click", function () {
  745. // draw_graph('pencil', this)
  746. })
  747. console.log(player)
  748. $('#mocan').on('click', function () {
  749. draw_graph('pencil', this)
  750. })
  751. // //初始化一下就可以了,
  752. let vConsole = new VConsole();
  753. // //你打印的数据 比如
  754. console.log('test');
  755. //就可像小程序一样的看了和调试了。
  756. $('.no-ne-an').on('click', function () {
  757. //结束时间 type=2
  758. let warids = {
  759. id: data.id,
  760. type: 2,
  761. sn: data.sn
  762. }
  763. $.ajax({
  764. url: baseUrl + "/api/game/v1/cloudGame/dev/getSn",
  765. data: warid,
  766. type: 'get',
  767. dataType: 'json',
  768. success: function (data) {
  769. history.go(-1)
  770. if (data.status == 0) {
  771. } else {
  772. alert(data.msg)
  773. }
  774. //
  775. }
  776. })
  777. })
  778. var btnMuted = document.querySelector("#btnMuted");
  779. btnMuted && (function () {
  780. var setHistory = function (left, top) {
  781. try {
  782. localStorage.setItem("muted-btn-loc", JSON.stringify({
  783. left: left,
  784. top: top
  785. }));
  786. } catch (ex) { }
  787. };
  788. var getHistory = function () {
  789. try {
  790. var value = localStorage.getItem("muted-btn-loc");
  791. if (!value) return null;
  792. value = JSON.parse(value);
  793. if (!value) return null;
  794. return value;
  795. } catch (ex) {
  796. return null
  797. }
  798. };
  799. var fixLoc = function (loc) {
  800. var rect = btnMuted.getBoundingClientRect();
  801. rect = {
  802. top: rect.top,
  803. left: rect.left,
  804. width: rect.width,
  805. height: rect.height
  806. }; //部分低版本浏览器,该属性为只读
  807. if (loc) {
  808. rect.left = loc.left;
  809. rect.top = loc.top;
  810. }
  811. var minX = 0;
  812. var minY = 0;
  813. var docRect = document.documentElement.getBoundingClientRect();
  814. var maxY = docRect.height - rect.height;
  815. var maxX = docRect.width - rect.width;
  816. var left = rect.left;
  817. var top = rect.top;
  818. left = Math.min(left, maxX);
  819. left = Math.max(left, minX);
  820. top = Math.min(top, maxY);
  821. top = Math.max(top, minY);
  822. console.log(rect.top, top, loc);
  823. if (loc || top !== rect.top || left !== rect.left) {
  824. btnMuted.style.cssText += "left:" + left + "px;top:" + top + "px;";
  825. }
  826. }
  827. window.addEventListener("resize", function () {
  828. fixLoc();
  829. });
  830. var touchPoint = {
  831. pageY: 0,
  832. pageX: 0
  833. };
  834. var currentLoc = {
  835. top: 0,
  836. left: 0,
  837. curTop: 0,
  838. curLeft: 0
  839. };
  840. var toMove = false;
  841. var touchmove = function (e) {
  842. e.preventDefault();
  843. var point = e.changedTouches[0];
  844. var top = -touchPoint.pageY + point.pageY;
  845. var left = -touchPoint.pageX + point.pageX;
  846. if (toMove) {
  847. top += currentLoc.top;
  848. left += currentLoc.left;
  849. currentLoc.curLeft = left;
  850. currentLoc.curTop = top;
  851. btnMuted.style.cssText += "left:" + left + "px;top:" + top + "px;";
  852. } else {
  853. if (Math.abs(top) >= 5 || Math.abs(left) >= 5) {
  854. toMove = true;
  855. }
  856. }
  857. };
  858. var touchend = function () {
  859. window.removeEventListener("touchmove", touchmove, {
  860. passive: false
  861. });
  862. window.removeEventListener("touchend", touchend, {
  863. passive: false
  864. });
  865. if (toMove) {
  866. setHistory(currentLoc.curLeft, currentLoc.curTop);
  867. fixLoc();
  868. } else {
  869. //按点击处理
  870. var set = $('.control-right-img').attr("data-id")
  871. if (set == '1') {
  872. $('.control-right-img').attr({
  873. "data-id": "2"
  874. })
  875. // $('.control-right-img').find('img').attr({
  876. // "src": "../static/img/musicturn.png"
  877. // })
  878. // players.volume = 100
  879. $(".leftmains").css({
  880. "right": "-4rem"
  881. })
  882. // console.log(players)
  883. // players.play();
  884. } else {
  885. $('.control-right-img').attr({
  886. "data-id": "1"
  887. })
  888. $(".leftmains").css({
  889. "right": "0rem"
  890. })
  891. // $('.control-right-img').find('img').attr({
  892. // "src": "../static/img/musicfalse.png"
  893. // })
  894. // players.volume = 0
  895. // players.off('pause');
  896. // players.pause();
  897. // var embed = document.embedPlay;
  898. // console.log(players, "fdsfdsf")
  899. }
  900. }
  901. }
  902. btnMuted.addEventListener("touchstart", function (e) {
  903. e.preventDefault();
  904. toMove = false;
  905. var point = e.changedTouches[0];
  906. touchPoint.pageX = point.pageX;
  907. touchPoint.pageY = point.pageY;
  908. var rect = e.target.getBoundingClientRect();
  909. currentLoc.top = rect.top;
  910. currentLoc.left = rect.left;
  911. window.addEventListener("touchmove", touchmove, {
  912. passive: false
  913. });
  914. window.addEventListener("touchend", touchend, {
  915. passive: false
  916. });
  917. }, {
  918. passive: false
  919. });
  920. var history = getHistory();
  921. if (history) {
  922. fixLoc(history);
  923. }
  924. btnMuted.classList.remove("hide");
  925. })();
  926. $(".boximg").on("click", function () {
  927. $(".mainbox").css({
  928. "display": "none"
  929. })
  930. })
  931. // 剪切板
  932. $(".sboxbu").on("click", function () {
  933. $(".sbox").css({
  934. "display": "none"
  935. })
  936. })
  937. // 剪切板
  938. $(".uploadss").on("click", function () {
  939. $(".sbox").css({
  940. "display": "none"
  941. })
  942. })
  943. $("#upload").on("click", function () {
  944. console.log(wx);
  945. wx.miniProgram.switchTab({
  946. url: '/pages/home/home'
  947. })
  948. })
  949. function selectText(x) {
  950. if (document.selection) {
  951. var range = document.body.createTextRange();
  952. range.moveToElementText(x);
  953. range.select();
  954. } else if (window.getSelection) {
  955. var selection = window.getSelection();
  956. var range = document.createRange();
  957. selection.removeAllRanges();
  958. range.selectNodeContents(x);
  959. selection.addRange(range);
  960. }
  961. }
  962. function cp(x) {
  963. $(".mainbox").css({
  964. "display": "none"
  965. })
  966. $(".sbox").css({
  967. "display": "block"
  968. })
  969. selectText(x);
  970. document.execCommand("copy");
  971. }
  972. </script>
  973. <script type="text/javascript" src="jmuxer.js"></script>
  974. <script type="text/text/javascript" src="aac.js"></script>
  975. </body>
  976. </html>