zhouenguang
/
PrimordialUniverse


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210
							<!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="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="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.0.3/socket.io.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;
          connection.init(async()=>{
          if(connection.client){
            await connection.client.join({ roomId: 8889 })
            console.log('userSig',connection.userSig)
            connection.socket.emit('getPush',{
                userId:123,
                roomId: 8889,
                sceneCode:"2111",
                userSig:connection.userSig
            })
            connection.socket.on('getPush',(data)=>{
                console.log('getPush',
                `ffmpeg -loglevel info -re -stream_loop -1 -i   output.mp4  -c:v libx264 -preset fast -profile:v baseline -g 30 -sc_threshold 0 -b:v 1500k -c:a libfdk_aac -ac 2 -b:a 128k -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.log('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’
                // 播放该远端流
               remoteStream.play('remote-video-view');
            });

             connection.client.on('error', event => {
              console.log('error',event)
        
            });
         
            // await connection.client.on('connection-state-changed', event => {
            //   console.log('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.log('remoteStream ID: ' + remoteStream.getId() + ' was updated hasAudio: '
            //                 + remoteStream.hasAudio() + ' hasVideo: ' + remoteStream.hasVideo());
            // });
                // 监听‘stream-subscribed’事件
        
            }
          });
        
        });
      </script>
      <video id="remote-video-view" style="position: fixed;width:300px;height:300px;z-index: 10000;top:0;left:0"></video>
    </body>
    <script src="https://web.sdk.qcloud.com/trtc/webrtc/demo/latest/dist/trtc.js"></script>
  </html>
</html>