zhouenguang
/
PrimordialUniverse


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244
							<!DOCTYPE html>
<html lang="en">
  <html>
    <head>
      <meta charset="UTF-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <title>demo</title>
      <style>
        html,
        body {
          overflow: hidden;
          width: 100%;
          height: 100%;
          margin: 0;
          padding: 0;
        }

        #renderCanvas {
          width: 100%;
          height: 100%;
          touch-action: none;
        }

        #videoTextureBox video {
          display: none;
        }
      </style>
    </head>
    <body>
      <canvas id="renderCanvas"></canvas>

      <div
        id="testVideoFeed"
        style="
          position: fixed;
          width: 300px;
          height: 300px;
          z-index: 10000;
          top: 0;
          left: 0;
        "
      >
        <video crossorigin="anonymous" playsinline autoplay muted></video>
      </div>
      <div id="videoTextureBox">
        <video
          id="houseTexture0"
          src="./textures/outputmp4/0/0.mp4"
          crossorigin="anonymous"
          playsinline
          autoplay
          muted
        ></video>
      </div>

      <!-- Babylon.js -->
      <script src="./libs/dat.gui.min.js"></script>
      <script src="./libs/ammo.js"></script>
      <script src="./libs/cannon.js"></script>
      <script src="./libs/Oimo.js"></script>
      <script src="./libs/earcut.min.js"></script>
      <script src="./libs/recast.js"></script>

      <script src="./libs/babylon.js"></script>
      <script src="./libs/babylonjs.materials.min.js"></script>
      <script src="./libs/babylonjs.proceduralTextures.min.js"></script>
      <script src="./libs/babylonjs.postProcess.min.js"></script>
      <script src="./libs/babylonjs.loaders.js"></script>
      <script src="./libs/babylonjs.serializers.min.js"></script>
      <script src="./libs/babylon.gui.min.js"></script>
      <script src="./libs/babylon.inspector.bundle.js"></script>
      <script src="./libs/socket.2.3.js"></script>

      <script type="module">
        import App from "./modules/index.js";

        var canvas = document.getElementById("renderCanvas");

        var engine = null;
        var scene = null;
        var sceneToRender = null;

        var startRenderLoop = function (engine, canvas) {
          engine.runRenderLoop(function () {
            if (sceneToRender && sceneToRender.activeCamera) {
              sceneToRender.render();
            }
          });
        };

        var createDefaultEngine = function () {
          return new BABYLON.Engine(canvas, true, {
            preserveDrawingBuffer: true,
            stencil: true,
            disableWebGL2Support: false,
          });
        };

        var asyncEngineCreation = async function () {
          try {
            return createDefaultEngine();
          } catch (e) {
            console.log(
              "the available createEngine function failed. Creating the default engine instead"
            );
            return createDefaultEngine();
          }
        };

        window.initFunction = async function () {
          engine = await asyncEngineCreation();

          if (!engine) throw "engine should not be null.";
          startRenderLoop(engine, canvas);

          engine.enableOfflineSupport = false;

          // Scene and Camera
          window.app = new App(engine);
          scene = window.app.scene;
        };

        initFunction().then(() => {
          sceneToRender = scene;
        });

        window.scene = scene;
        window.engine = engine;
        // Resize
        window.addEventListener("resize", function () {
          engine.resize();
        });
      </script>

      <!-- worker -->
      <!-- <script src="./worker/decoderWorker.js"></script> -->
      <script src="./worker/index.js" type="module"></script>
      <script type="module">
        import { Connection } from "./webrtc/connection.js";
        document.addEventListener("DOMContentLoaded", async () => {
          const connection = new Connection();
          window.connection = connection;
          const testConfig = {
            userId: "11use2221ttttt2553",
            roomId: "tk12291",
            sdkAppId: 1400653314,
            // role: "audience",
            role: "audience",
            sceneCode: "2111",
          };
          connection.init(testConfig, async () => {
            if (connection.client) {
              await connection.client.join({ roomId: testConfig.roomId });
              console.log("userSig", connection.userSig);
              connection.socket.emit("getPush", {
                userId: testConfig.userId,
                roomId: testConfig.roomId,
                sceneCode: testConfig.sceneCode,
                userSig: connection.userSig,
              });
              connection.socket.on("getPush", (data) => {
                console.log(
                  "getPush",
                  `ffmpeg -loglevel info -re -stream_loop -1 -i  test.mkv  -c:v libx264 -preset fast -profile:v baseline -g 30 -sc_threshold 0 -b:v 1500k -f flv "${data}"`
                );
              });
              console.log("connection.client", connection.client);

              connection.client.on("peer-join", (event) => {
                console.log("peer-join", event);
              });

              connection.client.on("stream-added", (event) => {
                const remoteStream = event.stream;
                const remoteUserId = remoteStream.getUserId();
                console.warn(
                  "received a remoteStream ID: " +
                    remoteStream.getId() +
                    " from user: " +
                    remoteUserId
                );
                // 若需要观看该远端流，则需要订阅它
                connection.client.subscribe(remoteStream);
              });
              // connection.client.on('network-quality', event => {
              //         console.log(`network-quality, uplinkNetworkQuality:${event.uplinkNetworkQuality}, downlinkNetworkQuality: ${event.downlinkNetworkQuality}`)
              //         // 自 v4.10.3 支持获取上、下行的 RTT 及丢包率
              //         console.log(`uplink rtt:${event.uplinkRTT} loss:${event.uplinkLoss}`)
              //         console.log(`downlink rtt:${event.downlinkRTT} loss:${event.downlinkLoss}`)
              // })

              connection.client.on("stream-subscribed", (event) => {
                const remoteStream = event.stream;

                // 远端流订阅成功，在HTML页面中创建一个<video>标签，假设该标签ID为‘remote-video-view’
                // 播放该远端流
                // console.log("remoteStream", remoteStream);
                // remoteStream.resume();
                remoteStream.play("testVideoFeed");
                const frame = remoteStream.getVideoFrame();
                const track = remoteStream.getVideoTrack();
                console.warn("frame", frame, track);
                console.warn("frame", remoteStream);
              });

              connection.client.on("error", (event) => {
                console.log("error", event);
              });

              connection.client.on("connection-state-changed", (event) => {
                console.warn("connection-state-changed", event);
              });

              // 监听‘stream-removed’事件
              connection.client.on("stream-removed", (event) => {
                const remoteStream = event.stream;
                console.log(
                  "remoteStream ID: " +
                    remoteStream.getId() +
                    " has been removed"
                );
                // 停止播放并删除相应<video>标签
              });
              // 监听‘stream-updated’事件
              connection.client.on("stream-updated", (event) => {
                const remoteStream = event.stream;
                console.warn(
                  "remoteStream ID: " +
                    remoteStream.getId() +
                    " was updated hasAudio: " +
                    remoteStream.hasAudio() +
                    " hasVideo: " +
                    remoteStream.hasVideo()
                );
              });
              // 监听‘stream-subscribed’事件
            }
          });
        });
      </script>
    </body>
    <script src="https://web.sdk.qcloud.com/trtc/webrtc/demo/latest/dist/trtc.js"></script>
  </html>
</html>