|
|
@@ -1,58 +1,65 @@
|
|
|
<!DOCTYPE html>
|
|
|
<html lang="en">
|
|
|
-<html>
|
|
|
+ <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;
|
|
|
- }
|
|
|
+ <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;
|
|
|
- }
|
|
|
+ #renderCanvas {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ touch-action: none;
|
|
|
+ }
|
|
|
|
|
|
- #videoTextureBox video {
|
|
|
- display: none;
|
|
|
- }
|
|
|
- </style>
|
|
|
+ #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 type="module">
|
|
|
-
|
|
|
- import App from "./modules/index.js"
|
|
|
+ <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");
|
|
|
|
|
|
@@ -61,57 +68,143 @@
|
|
|
var sceneToRender = null;
|
|
|
|
|
|
var startRenderLoop = function (engine, canvas) {
|
|
|
- engine.runRenderLoop(function () {
|
|
|
- if (sceneToRender && sceneToRender.activeCamera) {
|
|
|
- sceneToRender.render();
|
|
|
- }
|
|
|
- });
|
|
|
- }
|
|
|
+ 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 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();
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
+ 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() {
|
|
|
+ window.initFunction = async function () {
|
|
|
+ engine = await asyncEngineCreation();
|
|
|
|
|
|
- engine = await asyncEngineCreation();
|
|
|
+ if (!engine) throw "engine should not be null.";
|
|
|
+ startRenderLoop(engine, canvas);
|
|
|
|
|
|
- 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
|
|
|
+ engine.enableOfflineSupport = false;
|
|
|
|
|
|
+ // Scene and Camera
|
|
|
+ window.app = new App(engine);
|
|
|
+ scene = window.app.scene;
|
|
|
};
|
|
|
|
|
|
- initFunction().then(() => {sceneToRender = scene});
|
|
|
-
|
|
|
+ initFunction().then(() => {
|
|
|
+ sceneToRender = scene;
|
|
|
+ });
|
|
|
|
|
|
window.scene = scene;
|
|
|
- window.engine = engine
|
|
|
+ window.engine = engine;
|
|
|
// Resize
|
|
|
window.addEventListener("resize", function () {
|
|
|
- engine.resize();
|
|
|
+ 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);
|
|
|
|
|
|
|
|
|
- </script>
|
|
|
-</body>
|
|
|
+ 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>
|
gemercheung