WXtrialInterface.html 31 KB

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