index.html 4.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <html>
  4. <head>
  5. <meta charset="UTF-8" />
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7. <title>demo</title>
  8. <style>
  9. html,
  10. body {
  11. overflow: hidden;
  12. width: 100%;
  13. height: 100%;
  14. margin: 0;
  15. padding: 0;
  16. }
  17. #renderCanvas {
  18. width: 100%;
  19. height: 100%;
  20. touch-action: none;
  21. }
  22. #videoTextureBox video {
  23. display: none;
  24. }
  25. </style>
  26. </head>
  27. <body>
  28. <video id="testVideoFeed" crossorigin="anonymous" playsinline autoplay muted style="
  29. position: fixed;
  30. width: 600px;
  31. height: 600px;
  32. z-index: 10000;
  33. top: 0;
  34. left: 0;
  35. "></video>
  36. <canvas id="renderCanvas"></canvas>
  37. <div id="videoTextureBox">
  38. <video
  39. id="houseTexture0"
  40. src="./textures/outputmp4/0/0.mp4"
  41. crossorigin="anonymous"
  42. playsinline
  43. autoplay
  44. muted
  45. loop
  46. ></video>
  47. </div>
  48. <!-- Babylon.js -->
  49. <script src="./libs/jquery-1.10.2.min.js"></script>
  50. <script src="./libs/dat.gui.min.js"></script>
  51. <script src="./libs/ammo.js"></script>
  52. <script src="./libs/cannon.js"></script>
  53. <script src="./libs/Oimo.js"></script>
  54. <script src="./libs/earcut.min.js"></script>
  55. <script src="./libs/recast.js"></script>
  56. <script src="./libs/babylon.js"></script>
  57. <script src="./libs/babylonjs.materials.min.js"></script>
  58. <script src="./libs/babylonjs.proceduralTextures.min.js"></script>
  59. <script src="./libs/babylonjs.postProcess.min.js"></script>
  60. <script src="./libs/babylonjs.loaders.js"></script>
  61. <script src="./libs/babylonjs.serializers.min.js"></script>
  62. <script src="./libs/babylon.gui.min.js"></script>
  63. <script src="./libs/babylon.inspector.bundle.js"></script>
  64. <script src="./libs/socket.2.3.js"></script>
  65. <script src="./webrtc//adapter-7.4.0.min.js"></script>
  66. <script src="./webrtc/srs.sdk.js"></script>
  67. <script type="module">
  68. import App from "./modules/index.js";
  69. var canvas = document.getElementById("renderCanvas");
  70. var engine = null;
  71. var scene = null;
  72. var sceneToRender = null;
  73. var startRenderLoop = function (engine, canvas) {
  74. engine.runRenderLoop(function () {
  75. if (sceneToRender && sceneToRender.activeCamera) {
  76. sceneToRender.render();
  77. }
  78. });
  79. };
  80. var createDefaultEngine = function () {
  81. return new BABYLON.Engine(canvas, true, {
  82. preserveDrawingBuffer: true,
  83. stencil: true,
  84. disableWebGL2Support: false,
  85. });
  86. };
  87. var asyncEngineCreation = async function () {
  88. try {
  89. return createDefaultEngine();
  90. } catch (e) {
  91. console.log(
  92. "the available createEngine function failed. Creating the default engine instead"
  93. );
  94. return createDefaultEngine();
  95. }
  96. };
  97. window.initFunction = async function () {
  98. engine = await asyncEngineCreation();
  99. if (!engine) throw "engine should not be null.";
  100. startRenderLoop(engine, canvas);
  101. engine.enableOfflineSupport = false;
  102. // Scene and Camera
  103. window.app = new App(engine);
  104. scene = window.app.scene;
  105. };
  106. initFunction().then(() => {
  107. sceneToRender = scene;
  108. });
  109. window.scene = scene;
  110. window.engine = engine;
  111. // Resize
  112. window.addEventListener("resize", function () {
  113. engine.resize();
  114. });
  115. </script>
  116. <!-- worker -->
  117. <!-- <script src="./worker/decoderWorker.js"></script> -->
  118. <script src="./worker/index.js" type="module"></script>
  119. <script type="module" src="./webrtc/srs.js"></script>
  120. </body>
  121. <script src="https://web.sdk.qcloud.com/trtc/webrtc/demo/latest/dist/trtc.js"></script>
  122. </html>
  123. </html>