WXtrialInterface.html 24 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836
  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. </head>
  48. <body class="scroll h-player" style="overscroll-behavior: contain;">
  49. <div class="container" id="player">
  50. <div class="muted" id="btnMuted">
  51. <div class="control-right-img" data-id="1">
  52. <img src="../static/img/xuanfu_icon.png">
  53. </div>
  54. </div>
  55. <div id="wine">
  56. <!-- <video id="video1" muted="muted" x5-video-orientation="landscape" playsinline="true" autoplay="true"
  57. webkit-playsinline="true" x5-playsinline="true" x5-video-player-type="h5" x5-video-player-fullscreen="false" style="pointer-events: none;"></video> -->
  58. <div id="box">
  59. <canvas id="playCanvas" width="450" height="800"></canvas>
  60. </div>
  61. </div>
  62. <div class="leftmains">
  63. <div class="PictureQualityMain">
  64. <div class="PictureQuality " data-id="3072000">高清</div>
  65. <div class="PictureQuality avit" data-id="2243000">标清</div>
  66. <div class="PictureQuality" data-id="400000">极速</div>
  67. <div class="PictureQuality" data-id="400000">自动</div>
  68. </div>
  69. <div class="operation">
  70. <div class="upload" id="showsuss" data-text="uploads">
  71. <img src="../static/img/wx/shangchuan_icon.png">
  72. <div>上传</div>
  73. </div>
  74. <div class="upload" onclick="cp(document.getElementById('user_ref_id'));" data-text="Shearplate">
  75. <img src="../static/img/wx/jianqieban_icon.png">
  76. <div>剪切板</div>
  77. </div>
  78. <div class="upload" id="upload" data-text="Signout">
  79. <img src="../static/img/wx/tuichu_icon.png">
  80. <div>退出</div>
  81. </div>
  82. </div>
  83. </div>
  84. <div class="bottommains">
  85. <div class="botmat1">
  86. <div class="botmat1img" data-text="gengduo">
  87. <img src="../static/img/wx/gengduo_icon.png">
  88. </div>
  89. </div>
  90. <div class="botmat1">
  91. <div class="botmat1img" data-text="home">
  92. <img src="../static/img/wx/home_icon.png">
  93. </div>
  94. </div>
  95. <div class="botmat1">
  96. <div class="botmat1img" data-text="return">
  97. <img src="../static/img/wx/fanhui_icon.png">
  98. </div>
  99. </div>
  100. </div>
  101. <div class="mainbox" style="display: none;">
  102. <div class="boxTitle">提示</div>
  103. <div class="boxText">
  104. <div>由于小程序的功能限制,此功能暂时</div>
  105. <div>无法使用,请下载APP使用更多功能</div>
  106. </div>
  107. <div class="boxbt" onclick="cp(document.getElementById('user_ref_id'));">立即前往下载</div>
  108. <div class="boximg"><img src="../static/img/wx/guanbi_icon.png"></div>
  109. </div>
  110. <div class="sbox" style="display: none;">
  111. <div class="sboxText">下载地址已复制到剪切板</div>
  112. <div class="sboxbu">确定</div>
  113. </div>
  114. </div>
  115. <div id="copy-txt" style="position: absolute;opacity: 0;">
  116. <span id="user_ref_id">www.androidsCloud.com</span>
  117. </div>
  118. <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
  119. <script src="../static/js/jquery-1.11.0.min.js"></script>
  120. <!-- ffm软解 -->
  121. <script type="text/javascript" src="helper.js"></script>
  122. <script type="text/javascript" src="pcm-player.js"></script>
  123. <script type="text/javascript" src="webgl.js"></script>
  124. <!-- 音频-->
  125. <!-- <script src="../static/js/classlist.js"></script>
  126. <script src="../static/js/players.js"></script>
  127. <script src="../static/js/auroraplayer.js"></script>
  128. <script src="../static/js/aurora.js"></script>
  129. <script src="../static/js/aac.js"></script>
  130. <script src="../static/js/web.js?id=101"></script> -->
  131. <!-- <script src="../static/js/webapk.js"></script> -->
  132. <!-- 视频-->
  133. <!-- <script type="text/javascript" src="../static/js/Decoder.js"></script>
  134. <script type="text/javascript" src="../static/js/YUVCanvas.js"></script>
  135. <script type="text/javascript" src="../static/js/Player.js"></script> -->
  136. <script src="https://cdn.bootcss.com/vConsole/3.2.0/vconsole.min.js"></script>
  137. <script src="WXdraw.js?id=105"></script>
  138. <script>
  139. var topwinHeight = window.screen.height - window.innerHeight + 30; //计算title top 头部
  140. $('#wine').css({
  141. "width": window.screen.width,
  142. "height": window.screen.height - topwinHeight - 20,
  143. "position": "absolute",
  144. })
  145. var winese = document.createElement("wine");
  146. wine.style.top = "-" + winese + 'px';
  147. var url = window.location.href;
  148. url = url.split('/')
  149. // var baseUrl = window.location.href; //"http://192.168.31.20"
  150. // var baseUrl = 'https://'+url[2] //url[2] //'http://192.168.31.159'//'http://' + url[2]
  151. var query = window.location.search.substring(1);
  152. // query = "clientType=1&cardIp=14.215.128.96&port=2012&sn=RK3930C2301900012&demoTime=3600&id=377&diskName=SC93mBww"
  153. var vars = query.split("&");
  154. console.log(vars)
  155. // var baseUrl = 'http://192.168.31.20'
  156. var baseUrl = 'test.androidscloud.com'
  157. var data = {}
  158. // 审核
  159. $.ajax({
  160. url: baseUrl + "/api/user/v1/config/download/isShow",
  161. data: {},
  162. type: 'get',
  163. dataType: 'json',
  164. success: function(data) {
  165. if (data.data) {
  166. $("#showsuss").show()
  167. } else {
  168. $("#showsuss").hide()
  169. }
  170. //
  171. }
  172. })
  173. var clientType = vars.find(e => {
  174. return e.startsWith('clientType')
  175. }) || ''
  176. // console.log(clientType)
  177. data.clientType = clientType.substring(11, clientType.length)
  178. // 小程序直接进入
  179. var diskName = vars.find(e => {
  180. return e.startsWith('diskName')
  181. }) || ''
  182. data.diskName = diskName.substring(9, diskName.length)
  183. // document.title = decodeURI(data.diskName)
  184. if (data.clientType == 1) {
  185. var cardIp = vars.find(e => {
  186. return e.startsWith('cardIp')
  187. }) || ''
  188. var port = vars.find(e => {
  189. return e.startsWith('port')
  190. }) || ''
  191. var sn = vars.find(e => {
  192. return e.startsWith('sn')
  193. }) || ''
  194. var demoTime = vars.find(e => {
  195. return e.startsWith('demoTime')
  196. }) || ''
  197. var id = vars.find(e => {
  198. return e.startsWith('id')
  199. }) || ''
  200. data.clientType = clientType.substring(11, clientType.length)
  201. data.cardIp = cardIp.substring(7, cardIp.length)
  202. data.port = port.substring(5, port.length)
  203. data.sn = sn.substring(3, sn.length)
  204. data.demoTime = demoTime.substring(9, demoTime.length)
  205. data.id = id.substring(3, id.length)
  206. console.log("打印sn卡", data.sn)
  207. } else if (data.clientType == 2) { //分享屏幕
  208. console.log("走到分享屏幕里面啦==========", data.clientTypes);
  209. $(".leftmains").css({
  210. "right": "-4rem"
  211. })
  212. $('.leftmains').hide()
  213. $('.bottommains').hide()
  214. $('#btnMuted').hide()
  215. let ip = vars.find(e => {
  216. return e.startsWith('ip')
  217. }) || ''
  218. var username = vars.find(e => {
  219. return e.startsWith('username')
  220. }) || ''
  221. var id = vars.find(e => {
  222. return e.startsWith('id')
  223. }) || ''
  224. var userCardId = vars.find(e => {
  225. return e.startsWith('userCardId')
  226. }) || ''
  227. data.id = id.substring(3, id.length)
  228. data.username = username.substring(9, username.length)
  229. data.ip = ip.substring(3, ip.length)
  230. data.userCardId = userCardId.substring(11, userCardId.length)
  231. } else {
  232. // $(".leftmains").css({
  233. // "right":"-4rem"
  234. // })
  235. // $('.leftmains').hide()
  236. // $('.bottommains').hide()
  237. // $('#btnMuted').hide()
  238. var username = vars.find(e => {
  239. return e.startsWith('username')
  240. }) || ''
  241. var userCardId = vars.find(e => {
  242. return e.startsWith('userCardId')
  243. }) || ''
  244. data.username = username.substring(9, username.length)
  245. data.userCardId = userCardId.substring(11, userCardId.length)
  246. console.log(data.ip)
  247. }
  248. // 心跳
  249. // var time = 1000 * 30;
  250. // var interval;
  251. // fun()
  252. //
  253. // function run() {
  254. //
  255. // interval = setInterval(fun, time);
  256. // }
  257. //
  258. // function fun() {
  259. // $.ajax({
  260. // url: baseUrl + "/api/game/v1/cloudGame/dev/get/cardSn",
  261. // data: {
  262. // sn: data.sn
  263. // },
  264. // type: 'get',
  265. // dataType: 'json',
  266. // success: function(data) {
  267. //
  268. // }
  269. // })
  270. //
  271. // };
  272. // run();
  273. // data.clientType=1
  274. // data.sn="RK3930C2301900044"
  275. // data.cardIp="14.215.128.96"
  276. // data.port=2044
  277. var orientation = 0 //0 竖屏,1横屏
  278. var winHeight = window.screen.height - window.innerHeight
  279. // var urlss = url[2]
  280. // var urlss='192.168.31.20'
  281. // var urlss = "14.215.128.96"
  282. var urlss = 'test.androidscloud.com'
  283. document.body.addEventListener('touchmove', function(e) {
  284. e.preventDefault()
  285. }, {
  286. passive: false
  287. })
  288. //
  289. // urlss = "14.215.128.96"
  290. // console.log()
  291. // data.clientType = 1
  292. // data.sn="RK3930C2301900044"
  293. // data.cardIp="14.215.128.96"
  294. // data.port=2044
  295. // if (data.clientType == 3) {
  296. // var players = AV.Player.fromWebSocket("wss://" + urlss + '/authVideoWebSocket?' + "clientType=" + data.clientType +
  297. // "&username=" + data.username + "&userCardId=" + data.userCardId);
  298. // } else if (data.clientType == 2) {
  299. // // var players = AV.Player.fromWebSocket("wss://" + urlss + '/shareWebSocket?' + "clientType=" + data.clientType +
  300. // // "&username=" + data.username + "&userCardId=" + data.userCardId + "&ip=" + data.ip);
  301. // var players = AV.Player.fromWebSocket(
  302. // "wss://test.androidscloud.com/videoWebSocket?clientType=1&cardIp=14.215.128.96&port=2005&sn=RK3930C2301900005");
  303. // } else {
  304. // var players = AV.Player.fromWebSocket("wss://" + urlss + '/videoWebSocket?' + "clientType=" + data.clientType +
  305. // "&cardIp=" + data.cardIp + "&port=" + data.port + "&sn=" + data.sn);
  306. // }
  307. // // debugger
  308. // var players = AV.Player.fromWebSocket('ws://14.215.128.96/authVideoWebSocket?clientType=3&username=WqXTc1593762177&userCardId=377');
  309. // players.play();
  310. // players.volume = 100
  311. //var players = AV.Player.fromWebSocket('ws://14.215.128.96/videoWebSocket?clientType=0&cardIp=30.30.30.58&port=9100&sn=RK3930C2301900060');
  312. var warid = {
  313. id: data.id,
  314. type: 1,
  315. sn: data.sn
  316. }
  317. //结束时间 type=2
  318. var warids = {
  319. id: data.id,
  320. type: 2,
  321. sn: data.sn
  322. }
  323. // $.ajax({})
  324. // 关闭浏览器
  325. // window.onbeforeunload = function() {}
  326. //撤销的array
  327. var cancelList = new Array();
  328. //撤销的次数
  329. var cancelIndex = 0;
  330. var inputType = 0 //输入类型 0:手写,1:键盘输入
  331. //判断是否ie
  332. var IE_HACK = (/msie/i.test(navigator.userAgent) &&
  333. !/opera/i.test(navigator.userAgent));
  334. // 云手机相关逻辑
  335. // var player = new Player({
  336. // size: {
  337. // width: 1280,
  338. // height: 720
  339. // }
  340. // });
  341. // var secanv = document.getElementById("wine");
  342. // secanv.appendChild(player.canvas);
  343. // console.log("player=========>>>>", player);
  344. // console.log("secanv>>>>", secanv);
  345. // &cardIp="+data.data.extranetIp+"&port="+data.data.extranetPort+"&sn="+data.data.sn
  346. $(function() {
  347. initCanvas();
  348. });
  349. //初始化
  350. var initCanvas = function() {
  351. }
  352. window.onload = function() {};
  353. $("#voew").on("click", function() {})
  354. $("#box").on("click", function() {
  355. // draw_graph('pencil', this)
  356. })
  357. // console.log(player)
  358. $('#mocan').on('click', function() {
  359. draw_graph('pencil', this)
  360. })
  361. // //初始化一下就可以了,
  362. let vConsole = new VConsole();
  363. // //你打印的数据 比如
  364. console.log('test');
  365. //就可像小程序一样的看了和调试了。
  366. $('.no-ne-an').on('click', function() {
  367. //结束时间 type=2
  368. let warids = {
  369. id: data.id,
  370. type: 2,
  371. sn: data.sn
  372. }
  373. $.ajax({
  374. url: baseUrl + "/api/game/v1/cloudGame/dev/getSn",
  375. data: warid,
  376. type: 'get',
  377. dataType: 'json',
  378. success: function(data) {
  379. history.go(-1)
  380. if (data.status == 0) {
  381. } else {
  382. alert(data.msg)
  383. }
  384. //
  385. }
  386. })
  387. })
  388. var btnMuted = document.querySelector("#btnMuted");
  389. btnMuted && (function() {
  390. var setHistory = function(left, top) {
  391. try {
  392. localStorage.setItem("muted-btn-loc", JSON.stringify({
  393. left: left,
  394. top: top
  395. }));
  396. } catch (ex) {}
  397. };
  398. var getHistory = function() {
  399. try {
  400. var value = localStorage.getItem("muted-btn-loc");
  401. if (!value) return null;
  402. value = JSON.parse(value);
  403. if (!value) return null;
  404. return value;
  405. } catch (ex) {
  406. return null
  407. }
  408. };
  409. var fixLoc = function(loc) {
  410. var rect = btnMuted.getBoundingClientRect();
  411. rect = {
  412. top: rect.top,
  413. left: rect.left,
  414. width: rect.width,
  415. height: rect.height
  416. }; //部分低版本浏览器,该属性为只读
  417. if (loc) {
  418. rect.left = loc.left;
  419. rect.top = loc.top;
  420. }
  421. var minX = 0;
  422. var minY = 0;
  423. var docRect = document.documentElement.getBoundingClientRect();
  424. var maxY = docRect.height - rect.height;
  425. var maxX = docRect.width - rect.width;
  426. var left = rect.left;
  427. var top = rect.top;
  428. left = Math.min(left, maxX);
  429. left = Math.max(left, minX);
  430. top = Math.min(top, maxY);
  431. top = Math.max(top, minY);
  432. console.log(rect.top, top, loc);
  433. if (loc || top !== rect.top || left !== rect.left) {
  434. btnMuted.style.cssText += "left:" + left + "px;top:" + top + "px;";
  435. }
  436. }
  437. window.addEventListener("resize", function() {
  438. fixLoc();
  439. });
  440. var touchPoint = {
  441. pageY: 0,
  442. pageX: 0
  443. };
  444. var currentLoc = {
  445. top: 0,
  446. left: 0,
  447. curTop: 0,
  448. curLeft: 0
  449. };
  450. var toMove = false;
  451. var touchmove = function(e) {
  452. e.preventDefault();
  453. var point = e.changedTouches[0];
  454. var top = -touchPoint.pageY + point.pageY;
  455. var left = -touchPoint.pageX + point.pageX;
  456. if (toMove) {
  457. top += currentLoc.top;
  458. left += currentLoc.left;
  459. currentLoc.curLeft = left;
  460. currentLoc.curTop = top;
  461. btnMuted.style.cssText += "left:" + left + "px;top:" + top + "px;";
  462. } else {
  463. if (Math.abs(top) >= 5 || Math.abs(left) >= 5) {
  464. toMove = true;
  465. }
  466. }
  467. };
  468. var touchend = function() {
  469. window.removeEventListener("touchmove", touchmove, {
  470. passive: false
  471. });
  472. window.removeEventListener("touchend", touchend, {
  473. passive: false
  474. });
  475. if (toMove) {
  476. setHistory(currentLoc.curLeft, currentLoc.curTop);
  477. fixLoc();
  478. } else {
  479. //按点击处理
  480. var set = $('.control-right-img').attr("data-id")
  481. if (set == '1') {
  482. $('.control-right-img').attr({
  483. "data-id": "2"
  484. })
  485. // $('.control-right-img').find('img').attr({
  486. // "src": "../static/img/musicturn.png"
  487. // })
  488. // players.volume = 100
  489. $(".leftmains").css({
  490. "right": "-4rem"
  491. })
  492. // console.log(players)
  493. // players.play();
  494. } else {
  495. $('.control-right-img').attr({
  496. "data-id": "1"
  497. })
  498. $(".leftmains").css({
  499. "right": "0rem"
  500. })
  501. // $('.control-right-img').find('img').attr({
  502. // "src": "../static/img/musicfalse.png"
  503. // })
  504. // players.volume = 0
  505. // players.off('pause');
  506. // players.pause();
  507. // var embed = document.embedPlay;
  508. // console.log(players, "fdsfdsf")
  509. }
  510. }
  511. }
  512. btnMuted.addEventListener("touchstart", function(e) {
  513. e.preventDefault();
  514. toMove = false;
  515. var point = e.changedTouches[0];
  516. touchPoint.pageX = point.pageX;
  517. touchPoint.pageY = point.pageY;
  518. var rect = e.target.getBoundingClientRect();
  519. currentLoc.top = rect.top;
  520. currentLoc.left = rect.left;
  521. window.addEventListener("touchmove", touchmove, {
  522. passive: false
  523. });
  524. window.addEventListener("touchend", touchend, {
  525. passive: false
  526. });
  527. }, {
  528. passive: false
  529. });
  530. var history = getHistory();
  531. if (history) {
  532. fixLoc(history);
  533. }
  534. btnMuted.classList.remove("hide");
  535. })();
  536. $(".boximg").on("click", function() {
  537. $(".mainbox").css({
  538. "display": "none"
  539. })
  540. })
  541. // 剪切板
  542. $(".sboxbu").on("click", function() {
  543. $(".sbox").css({
  544. "display": "none"
  545. })
  546. })
  547. // 剪切板
  548. $(".uploadss").on("click", function() {
  549. $(".sbox").css({
  550. "display": "none"
  551. })
  552. })
  553. $("#upload").on("click", function() {
  554. wx.miniProgram.switchTab({
  555. url: '/pages/home/home'
  556. })
  557. })
  558. function selectText(x) {
  559. if (document.selection) {
  560. var range = document.body.createTextRange();
  561. range.moveToElementText(x);
  562. range.select();
  563. } else if (window.getSelection) {
  564. var selection = window.getSelection();
  565. var range = document.createRange();
  566. selection.removeAllRanges();
  567. range.selectNodeContents(x);
  568. selection.addRange(range);
  569. }
  570. }
  571. function cp(x) {
  572. $(".mainbox").css({
  573. "display": "none"
  574. })
  575. $(".sbox").css({
  576. "display": "block"
  577. })
  578. selectText(x);
  579. document.execCommand("copy");
  580. }
  581. var decodeCount = 1;
  582. var isFinish = false;
  583. var player = new PCMPlayer({
  584. encoding: '16bitInt',
  585. channels: 2,
  586. sampleRate: 44100,
  587. flushingTime: 22,
  588. debug: false
  589. });
  590. Module = {};
  591. Module.onRuntimeInitialized = function() {
  592. console.log("Wasm 加载成功!")
  593. isFinish = true;
  594. }
  595. function decodeAAC(data) {
  596. var retPtr = Module._malloc(4 * 5 * 1024); //接收的数据
  597. var inputPtr = Module._malloc(4 * data.length); //输入数据
  598. for (i = 0; i < data.length; i++) {
  599. Module.HEAPU8[(inputPtr) + i] = data[i]; //转换为堆数据
  600. }
  601. var pcmLen = Module._feedData(retPtr, inputPtr, data.length);
  602. if (pcmLen >= 0) {
  603. //console.log("%d帧 aac 解码成功, %d", decodeCount, pcmLen);
  604. var pcmData = new Uint8Array(pcmLen);
  605. for (i = 0; i < pcmLen; i++) {
  606. pcmData[i] = Module.HEAPU8[(retPtr) + i]
  607. }
  608. player.feed(pcmData);
  609. } else {
  610. console.log("%d帧 aac 解码失败, %d", decodeCount, pcmLen);
  611. }
  612. decodeCount++;
  613. Module._free(inputPtr);
  614. Module._free(retPtr);
  615. }
  616. var decodeWoker = new Worker('decoder.js');
  617. var myVideo = document.getElementById("playCanvas");
  618. decodeWoker.onmessage = function(event) {
  619. // console.log("decodeWoker.onmessage")
  620. var objData = event.data;
  621. switch (objData.cmd) {
  622. case 0:
  623. // console.log(objData.data);
  624. break;
  625. case 1:
  626. var time = new Date().getTime();
  627. webglPlayer.renderFrame(objData.data, 720, 1280, 720 * 1280, (720 / 2) * (1280 / 2));
  628. //console.log("渲染耗时", new Date().getTime() - time + "ms");break;
  629. }
  630. }
  631. if (typeof(Worker) !== "undefined") {
  632. console.log("支持webworker");
  633. } else {
  634. alert("不支持webworker");
  635. }
  636. var isFinish = false;
  637. // this.canvas = document.getElementById("playCanvas");
  638. var webglPlayer = new WebGLPlayer(myVideo, {
  639. preserveDrawingBuffer: false
  640. });
  641. var webSocketWorker = new Worker('websocket.js');
  642. var startTime = new Date().getTime();
  643. webSocketWorker.onmessage = function(event) {
  644. decodeWoker.postMessage(event.data);
  645. // var input = new Uint8Array(decodeWoker.postMessage(event.data));
  646. var input = event.data
  647. // decodeAAC(event.data)
  648. // console.log("音频", event.data);
  649. if (input[0] == 0xff) {
  650. decodeAAC(input);
  651. } else {}
  652. }
  653. document.addEventListener("visibilitychange", () => {
  654. if (document.visibilityState == "visible") {
  655. } else {
  656. console.log("页面不可见");
  657. }
  658. });
  659. function Close() //webworker 关闭,清理
  660. {
  661. var cmd = {
  662. cmd: 0
  663. };
  664. decodeWoker.postMessage(cmd);
  665. decodeWoker.terminate();
  666. webSocketWorker.postMessage(cmd);
  667. webSocketWorker.terminate();
  668. }
  669. // myVideo.onmousedown = function(event) {
  670. // console.log("22222")
  671. // //放在此处只是为了方便演示,实际使用中查找横竖屏只要刚连接上时调用一次就好。
  672. // //var checkBuffer = GetScreenState();
  673. // //ws.send(checkBuffer);
  674. // /*if(!isFeed)
  675. // {
  676. // console.log("重新申请I帧");
  677. // requestTime = new Date().getTime();
  678. // var buffer = RequestIFrame();
  679. // ws.send(buffer);
  680. // }*/
  681. // //console.log("报文 %s", PrintArry(buffer));
  682. // if (event.button == 0) {
  683. // var posX = event.offsetX * 1080 * 1.0 / myVideo.clientWidth;
  684. // var posY = event.offsetY * 1920 * 1.0 / myVideo.clientHeight;
  685. // var buffer = ExexuteMouseDown(posX.toString(), posY.toString());
  686. // // ws.send(buffer);
  687. // // decodeWoker.postMessage(event.data);
  688. // console.log("打印buffer", PrintArry(buffer))
  689. // decodeWoker.postMessage(buffer);
  690. // isDrag = true;
  691. // }
  692. // }
  693. var isDrag = false;
  694. myVideo.onmousedown = function(event) {
  695. console.log('5555555555安卓卡',data.sn)
  696. if (event.button == 0) {
  697. var posX = event.offsetX * 720 * 1.0 / myVideo.clientWidth;
  698. var posY = event.offsetY * 1280 * 1.0 / myVideo.clientHeight;
  699. var buffer = ExexuteMouseDown(posX.toString(), posY.toString(),data.sn);
  700. // console.log('55555', buffer)
  701. webSocketWorker.postMessage(buffer);
  702. isDrag = true;
  703. }
  704. }
  705. myVideo.onmousemove = function(event) {
  706. if (isDrag && event.button == 0) {
  707. var posX = event.offsetX * 720 * 1.0 / myVideo.clientWidth;
  708. var posY = event.offsetY * 1280 * 1.0 / myVideo.clientHeight;
  709. var buffer = ExexuteMouseMove(posX.toString(), posY.toString(),data.sn);
  710. // ws.send(buffer);
  711. console.log('55555', buffer)
  712. webSocketWorker.postMessage(buffer);
  713. console.log("移动位置 %d, %d", posX, posY);
  714. }
  715. }
  716. myVideo.onmouseup = function(event) {
  717. console.log('5555555555')
  718. isDrag = false;
  719. var posX = event.offsetX * 720 * 1.0 / myVideo.clientWidth;
  720. var posY = event.offsetY * 1280 * 1.0 / myVideo.clientHeight;
  721. var buffer = ExexuteMouseUp(posX.toString(), posY.toString(),data.sn);
  722. // ws.send(buffer);
  723. webSocketWorker.postMessage(buffer);
  724. }
  725. myVideo.onkeydown = function(event) {
  726. console.log('5555555555')
  727. ExexuteKeyDown(e.keyCode,data.sn);
  728. }
  729. </script>
  730. <script type="text/javascript" src="aac.js"></script>
  731. </body>
  732. </html>