index.html 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <title>Document</title>
  8. <!-- <link rel="stylesheet" href="./index.css" /> -->
  9. <link rel="stylesheet" href="./css/toastify.min.css" />
  10. </head>
  11. <body>
  12. <!-- Babylon.js -->
  13. <script src="./libs/jquery-1.10.2.min.js"></script>
  14. <script src="./libs/dat.gui.min.js"></script>
  15. <script src="./libs/ammo.js"></script>
  16. <script src="./libs/cannon.js"></script>
  17. <script src="./libs/Oimo.js"></script>
  18. <script src="./libs/earcut.min.js"></script>
  19. <script src="./libs/recast.js"></script>
  20. <script src="./libs/babylon.js"></script>
  21. <script src="./libs/babylonjs.materials.min.js"></script>
  22. <script src="./libs/babylonjs.proceduralTextures.min.js"></script>
  23. <script src="./libs/babylonjs.postProcess.min.js"></script>
  24. <script src="./libs/babylonjs.loaders.js"></script>
  25. <script src="./libs/babylonjs.serializers.min.js"></script>
  26. <script src="./libs/babylon.gui.min.js"></script>
  27. <script src="./libs/babylon.inspector.bundle.js"></script>
  28. <script src="./libs/socket.2.3.js"></script>
  29. <script src="./libs/events.js"></script>
  30. <script src="./libs/axios.min.js"></script>
  31. <script src="./libs/VisibilityChangeHandler.js"></script>
  32. <script src="./libs/decoder.js"></script>
  33. <script src="./libs/decoder.js"></script>
  34. <script src="./shader.js"></script>
  35. <!-- <script src="./webrtc//adapter-7.4.0.min.js"></script>
  36. <script src="./webrtc/srs.sdk.js"></script> -->
  37. <link rel="stylesheet" href="./css/index.cb1a6e05.css" />
  38. <script>
  39. const SERVER_URLS = {
  40. DEV: "wss://sit-eks.xverse.cn/ws",
  41. PROD: "wss://eks.xverse.cn/ws"
  42. }
  43. , REPORT_URL = {
  44. DEV: "https://xa.xverse.cn:6680/collect",
  45. PROD: "https://xa.xverse.cn/collect"
  46. }
  47. , MAX_RECONNECT_COUNT = 3
  48. , DEFAULT_JOINROOM_TIMEOUT = 15e3
  49. , DEFAULT_MAIN_CAMERA_FOV = 50
  50. , DEFAULT_AVATAR_SCALE = 1
  51. , REPORT_NUM_PER_REQUEST = 20
  52. , DEFAULT_OPEN_TIMEOUT_MS = 6e3
  53. , WS_CLOSE_NORMAL = 1e3
  54. , WS_CLOSE_RECONNECT = 3008
  55. , PING_INTERVAL_MS = 1e3
  56. , TEXTURE_URL = "https://static.xverse.cn/qqktv/texture.png"
  57. , REPORT_MODULE_TYPE = "xverse-js"
  58. , authenticationErrorCodes = [3001, 3002, 3003, 3005]
  59. , RTT_MAX_VALUE = 200
  60. , HB_MAX_VALUE = 500
  61. , DURATION = 10
  62. , NET_INTERVAL = 1;
  63. const VERSION$1 = "1.0.75"
  64. , ENV = "production";
  65. const COMPONENT_LIST_PREFIX = "/component_list.json";
  66. const isFunction = i=>typeof i == "function";
  67. const blobToDataURI = async i=>new Promise((e,t)=>{
  68. const r = new FileReader;
  69. r.readAsDataURL(i),
  70. r.onload = function(n) {
  71. var o;
  72. e((o = n.target) == null ? void 0 : o.result)
  73. }
  74. ,
  75. r.onerror = function(n) {
  76. t(n)
  77. }
  78. });
  79. const avatarSetting = {
  80. fileType: ".glb",
  81. lodType: "_lod",
  82. lod: [{
  83. level: "lod0",
  84. fileName: ".glb",
  85. quota: 5,
  86. dist: 1e3
  87. }, {
  88. level: "lod1",
  89. fileName: "_lod2.glb",
  90. quota: 5,
  91. dist: 2e3
  92. }, {
  93. level: "lod2",
  94. fileName: "_lod4.glb",
  95. quota: 0,
  96. dist: 7500
  97. }],
  98. isRayCastEnable: !0,
  99. maxAvatarNum: 40,
  100. maxBillBoardDist: 7500,
  101. body: "body",
  102. head: "head",
  103. hair: "hair",
  104. suit: "suit",
  105. pants: "pants",
  106. shoes: "shoes",
  107. clothes: "clothes",
  108. animations: "animations",
  109. defaultIdle: "Idle",
  110. cullingDistance: 200,
  111. defaultMove: "Walking"
  112. }
  113. , avatarResources = {
  114. ygb: {
  115. name: "ygb",
  116. mat: "NM_ygb",
  117. mesh: "ygb"
  118. }
  119. }
  120. , action = {
  121. GiftClap: {
  122. animName: "GiftClap",
  123. keyTime: 1760
  124. },
  125. Cheering: {
  126. animName: "Cheering",
  127. attachPair: [{
  128. bone: "mixamorig_MiddleFinger2_R",
  129. obj: "ygb",
  130. offset: {
  131. x: 0,
  132. y: 0,
  133. z: 0
  134. },
  135. rotate: {
  136. x: 0,
  137. y: 3.84,
  138. z: 0
  139. },
  140. scale: {
  141. x: 1,
  142. y: 1,
  143. z: 1
  144. }
  145. }, {
  146. bone: "mixamorig_MiddleFinger2_L",
  147. obj: "ygb",
  148. offset: {
  149. x: 0,
  150. y: 0,
  151. z: 0
  152. },
  153. rotate: {
  154. x: 0,
  155. y: 3.49,
  156. z: 0
  157. },
  158. scale: {
  159. x: 1,
  160. y: 1,
  161. z: 1
  162. }
  163. }]
  164. }
  165. }
  166. const checkOS = ()=>{
  167. const i = navigator.userAgent
  168. , e = /(?:Windows Phone)/.test(i)
  169. , t = /(?:SymbianOS)/.test(i) || e
  170. , r = /(?:Android)/.test(i)
  171. , n = /(?:Firefox)/.test(i);
  172. /(?:Chrome|CriOS)/.test(i);
  173. const o = /(?:iPad|PlayBook)/.test(i) || r && !/(?:Mobile)/.test(i) || n && /(?:Tablet)/.test(i)
  174. , a = /(?:iPhone|ipad|ipod)/.test(i) && !o
  175. , s = !a && !r && !t;
  176. return {
  177. isTablet: o,
  178. isPhone: a,
  179. isIOS: /iPhone|iPod|iPad/.test(navigator.userAgent),
  180. isAndroid: r,
  181. isPc: s
  182. }
  183. }
  184. , ue4Rotation2Xverse = i=>isRotationCorrect() ? (i.pitch >= 89.5 ? i.pitch = 89.5 : i.pitch <= -89.5 && (i.pitch = -89.5),
  185. new BABYLON.Vector3(-1 * Math.PI * i.pitch / 180,Math.PI * i.yaw / 180 - Math.PI * 27 / 18,Math.PI * i.roll / 180 < .001 ? 0 : Math.PI * i.roll / 180)) : null
  186. , ue4Rotation2Xverse_mesh = i=>isRotationCorrect() ? new BABYLON.Vector3(Math.PI * i.pitch / 180,Math.PI * i.yaw / 180,Math.abs(Math.PI * i.roll) / 180 < .001 ? 0 : -1 * (Math.PI * i.roll) / 180) : null
  187. , scaleFromUE4toXverse = 100
  188. , ue4Scaling2Xverse = i=>isScalingCorrect() ? new BABYLON.Vector3(i.x,i.z,-1 * i.y) : null
  189. , ue4Position2Xverse = i=>isPositionCorrect() ? new BABYLON.Vector3(i.x * .01,i.z * .01,-1 * i.y * .01) : null
  190. , xversePosition2Ue4 = i=>isPositionCorrect() ? {
  191. x: i.x * 100,
  192. y: -1 * i.z * 100,
  193. z: i.y * 100
  194. } : null
  195. , xverseRotation2Ue4 = i=>{
  196. if (isPositionCorrect()) {
  197. let e = 0;
  198. return i.z == 0 ? e = 0 : e = 180 * i.z / Math.PI,
  199. {
  200. pitch: 180 * i.x * -1 / Math.PI,
  201. yaw: (i.y + Math.PI * 27 / 18) * 180 / Math.PI,
  202. roll: e
  203. }
  204. } else
  205. return null
  206. }
  207. , calcDistance3D = (i,e)=>Math.sqrt((i.x - e.x) * (i.x - e.x) + (i.y - e.y) * (i.y - e.y) + (i.z - e.z) * (i.z - e.z))
  208. , calcDistance3DVector = (i,e)=>Math.sqrt((i.x - e.x) * (i.x - e.x) + (i.y - e.y) * (i.y - e.y) + (i.z - e.z) * (i.z - e.z))
  209. , isPositionCorrect = i=>!0
  210. , isScalingCorrect = i=>!0
  211. , calcDistance3DAngle = (i,e)=>Math.sqrt((i.roll - e.roll) * (i.roll - e.roll) + (i.pitch - e.pitch) * (i.pitch - e.pitch) + (i.yaw - e.yaw) * (i.yaw - e.yaw))
  212. , isRotationCorrect = i=>!0
  213. , getStringBoundaries = (i,e,t=new Map)=>{
  214. let r = 0
  215. , n = ""
  216. , o = -1
  217. , a = 0;
  218. const s = [0];
  219. for (let l = 0; l < i.length; l++) {
  220. const u = i.codePointAt(l);
  221. let c = t.get(u);
  222. if (c)
  223. r += c,
  224. n += i[l],
  225. u > 64 && u < 91 || u > 96 && u < 123 ? (o == -1 && (o = l),
  226. a += c) : (o = -1,
  227. a = 0);
  228. else if (u < 975 || u > 1024 && u < 1920)
  229. c = 1,
  230. r++,
  231. n += i[l],
  232. u > 64 && u < 91 || u > 96 && u < 123 ? (o == -1 && (o = l),
  233. a += c) : (o = -1,
  234. a = 0);
  235. else if (u > 4499 && u < 4600 || u > 8207 && u < 8232 || u > 8238 && u < 8287 || u > 8238 && u < 8287 || u > 8304 && u < 8384 || u > 8447 && u < 9211 || u > 11263 && u < 11624 || u > 11646 && u < 11671 || u > 11679 && u < 11845 || u > 11903 && u < 12020 || u > 12031 && u < 12246 || u > 12287 && u < 12544 || u > 12548 && u < 12728 || u > 12735 && u < 12772 || u > 12783 && u < 19894 || u > 19967 && u < 40918 || u > 42191 && u < 42240 || u > 44031 && u < 55204 || u > 59276 && u < 59287 || u > 59412 && u < 59493 || u > 63743 && u < 64207 || u > 65039 && u < 65050 || u > 65071 && u < 65510)
  236. c = 2,
  237. r += 2,
  238. o = -1,
  239. a = 0,
  240. n += i[l];
  241. else if (u > 9311 && u < 11158) {
  242. c = 2,
  243. r += 2,
  244. o = -1,
  245. a = 0,
  246. n += i[l];
  247. const h = i.codePointAt(l + 1);
  248. h > 65023 && h < 65040 && (n += i[l + 1],
  249. l++)
  250. } else
  251. u > 126979 && u < 129783 && (c = 2,
  252. r += 2,
  253. o = -1,
  254. a = 0,
  255. l++,
  256. n += String.fromCodePoint(u));
  257. if (l == s[s.length - 1] + 1 && o > 0 ? (s[s.length - 1] = o,
  258. r = 0 + a) : r > e && (s.push(l),
  259. a >= r && (a = 0 + c,
  260. o = 0),
  261. r = 0 + c),
  262. l >= i.length - 1)
  263. break
  264. }
  265. return s[s.length - 1] != i.length && s.push(i.length),
  266. [n, s]
  267. }
  268. const WASM_Version = "h264"
  269. , DECODER_VERSION = "v0.9.3"
  270. , WASM_URLS = {
  271. h264: "https://static.xverse.cn/wasm/v15/lib_ff264dec_no_idb_with_wasm_tbundle.js?tbundle=tmeland_base",
  272. xv265: "https://static.xverse.cn/wasm/codec-release/h265-dec-sw-wasm/v-0-9-1/libxv265dec.js",
  273. h265: ""
  274. }
  275. , STUCK_STAGE_GOOD = 45
  276. , STUCK_STAGE_WELL = 85
  277. , STUCK_STAGE_FAIR = 125
  278. , STUCK_STAGE_BAD = 165
  279. , DECODER_PASSIVE_JITTER = 0;
  280. var De = Object.defineProperty
  281. , Ne = Object.defineProperties;
  282. var we = Object.getOwnPropertyDescriptors;
  283. var be = Object.getOwnPropertySymbols;
  284. var Me = Object.prototype.hasOwnProperty
  285. , Ie = Object.prototype.propertyIsEnumerable;
  286. var Se = (i,e,t)=>e in i ? De(i, e, {
  287. enumerable: !0,
  288. configurable: !0,
  289. writable: !0,
  290. value: t
  291. }) : i[e] = t
  292. , oe = (i,e)=>{
  293. for (var t in e || (e = {}))
  294. Me.call(e, t) && Se(i, t, e[t]);
  295. if (be)
  296. for (var t of be(e))
  297. Ie.call(e, t) && Se(i, t, e[t]);
  298. return i
  299. }
  300. , le = (i,e)=>Ne(i, we(e));
  301. var Oe = (i,e)=>{
  302. var t = {};
  303. for (var r in i)
  304. Me.call(i, r) && e.indexOf(r) < 0 && (t[r] = i[r]);
  305. if (i != null && be)
  306. for (var r of be(i))
  307. e.indexOf(r) < 0 && Ie.call(i, r) && (t[r] = i[r]);
  308. return t
  309. };
  310. var E = (i,e,t)=>(Se(i, typeof e != "symbol" ? e + "" : e, t),t);
  311. Promise.prototype._timeout = function(i, e) {
  312. let t;
  313. return new Promise((r,n)=>(t = window.setTimeout(()=>{
  314. n(e)
  315. }
  316. , i),
  317. this.then(o=>{
  318. clearTimeout(t),
  319. r(o)
  320. }
  321. , o=>{
  322. clearTimeout(t),
  323. n(o)
  324. }
  325. )))
  326. };
  327. objectParseFloat = (i) => {
  328. const e = {};
  329. return (
  330. i &&
  331. Object.keys(i).forEach((t) => {
  332. e[t] = parseFloat(i[t]);
  333. }),
  334. e
  335. );
  336. }
  337. getRandomItem = (i) =>
  338. i.length === 0 ? null : i[Math.floor(Math.random() * i.length)]
  339. function uuid$1() {
  340. return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, (i) => {
  341. const e = (Math.random() * 16) | 0;
  342. return (i === "x" ? e : (e & 3) | 8).toString(16);
  343. });
  344. }
  345. </script>
  346. <div id="root">
  347. <div class = "App">
  348. <canvas id = "canvas" class = "stream unselect">
  349. </canvas>
  350. </div>
  351. <div class="debug_control_btns">
  352. <button class="debugger1">Toggle Stats</button>
  353. <button class="debugger2">取消低模着色</button>
  354. <button class="debugger3">画质:高</button>
  355. <button class="font-size-small debugger4" onclick="room.debug.toggleNearbyBreathPoint">Toggle周边呼吸点</button>
  356. <button class="font-size-small debugger5" onclick="room.debug.toggleTapBreathPoint">Toggle点击呼吸点</button>
  357. <button class="font-size-small debugger6" >录制码流(10s)</button>
  358. </div>
  359. </div>
  360. <script type="module">
  361. document.querySelector('.debugger1').onclick = ()=>{
  362. var y, b;
  363. (y = room.stats) != null && y.isShow
  364. ? room.stats.hide()
  365. : (b = room.stats) == null || b.show();
  366. }
  367. document.querySelector('.debugger2').onclick = ()=>{
  368. room.debug.toggleSceneshading(), r(room.debug.isSceneShading);
  369. }
  370. document.querySelector('.debugger3').onclick = ()=>{
  371. let y = "average";
  372. n === "high"
  373. ? (y = "average")
  374. : n === "average"
  375. ? (y = "low")
  376. : n === "low"
  377. ? (y = "high")
  378. : (y = "average"),
  379. o(y),
  380. room.setPictureQualityLevel(y);
  381. }
  382. document.querySelector('.debugger4').onclick = ()=>{
  383. room.debug.toggleNearbyBreathPoint();
  384. }
  385. document.querySelector('.debugger5').onclick = ()=>{
  386. room.debug.toggleTapBreathPoint();
  387. }
  388. document.querySelector('.debugger6').onclick = ()=>{
  389. room.debug.dumpStream(() => {
  390. // toast("\u5F55\u5236\u5B8C\u6210");
  391. });
  392. // toast("\u5F00\u59CB\u5F55\u5236");
  393. }
  394. </script>
  395. <script src="js/index.js"></script>
  396. </body>
  397. </html>