пре 3 година · 5dfd36867c
--- a/dist/js/video.js
+++ b/dist/js/video.js
--- a/dist/js/video.js.map
+++ b/dist/js/video.js.map
--- a/dist/libs/decoder
+++ b/dist/libs/decoder
--- a/dist/libs/toastify.js
+++ b/dist/libs/toastify.js
--- a/dist/texture.html
+++ b/dist/texture.html
@@ -0,0 +1,218 @@
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+    <head>
			
 
				+        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
			
 
				+
			
 
				+        <title>Babylon.js sample code</title>
			
 
				+
			
 
				+        <!-- Babylon.js -->
			
 
				+    <!-- Babylon.js -->
			
 
				+    <script src="./libs/jquery-1.10.2.min.js"></script>
			
 
				+    <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://cdn.socket.io/4.4.1/socket.io.min.js"></script>
			
 
				+        <script src="js/video.js"></script>
			
 
				+        <style>
			
 
				+            html, body {
			
 
				+                overflow: hidden;
			
 
				+                width: 100%;
			
 
				+                height: 100%;
			
 
				+                margin: 0;
			
 
				+                padding: 0;
			
 
				+            }
			
 
				+
			
 
				+            #renderCanvas {
			
 
				+                width: 100%;
			
 
				+                height: 100%;
			
 
				+                touch-action: none;
			
 
				+            }
			
 
				+        </style>
			
 
				+    </head>
			
 
				+<body>
			
 
				+    <canvas id="renderCanvas"></canvas>
			
 
				+    <script>
			
 
				+        var canvas = document.getElementById("renderCanvas");
			
 
				+
			
 
				+        var startRenderLoop = function (engine, canvas) {
			
 
				+            engine.runRenderLoop(function () {
			
 
				+                if (sceneToRender && sceneToRender.activeCamera) {
			
 
				+                    sceneToRender.render();
			
 
				+                }
			
 
				+            });
			
 
				+        }
			
 
				+
			
 
				+        var engine = null;
			
 
				+        var scene = null;
			
 
				+        var sceneToRender = null;
			
 
				+        var createDefaultEngine = function() { return new BABYLON.Engine(canvas, true, { preserveDrawingBuffer: true, stencil: true,  disableWebGL2Support: false}); };
			
 
				+        var createScene = function () {
			
 
				+    // This creates a basic Babylon Scene object (non-mesh)
			
 
				+    var scene = new BABYLON.Scene(engine);
			
 
				+
			
 
				+    scene.debugLayer.show({embedMode: true})
			
 
				+
			
 
				+    // This creates and positions a free camera (non-mesh)
			
 
				+    var camera = new BABYLON.FreeCamera("camera1", new BABYLON.Vector3(0, 5, -10), scene);
			
 
				+
			
 
				+    // This targets the camera to scene origin
			
 
				+    camera.setTarget(BABYLON.Vector3.Zero());
			
 
				+
			
 
				+    // This attaches the camera to the canvas
			
 
				+    camera.attachControl(canvas, true);
			
 
				+
			
 
				+    // This creates a light, aiming 0,1,0 - to the sky (non-mesh)
			
 
				+    var light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(0, 1, 0), scene);
			
 
				+
			
 
				+    // Default intensity is 1. Let's dim the light a small amount
			
 
				+    light.intensity = 0.7;
			
 
				+
			
 
				+    // Our built-in 'ground' shape.
			
 
				+    var ground = BABYLON.MeshBuilder.CreateGround("ground", {width: 6, height: 6}, scene);
			
 
				+
			
 
				+
			
 
				+
			
 
				+
			
 
				+BABYLON.Effect.ShadersStore['customVertexShader'] = `
			
 
				+precision highp float; 
			
 
				+attribute vec2 uv;
			
 
				+attribute vec3 position;
			
 
				+
			
 
				+varying vec2 vUV;
			
 
				+ 
			
 
				+uniform mat4 view;
			
 
				+uniform mat4 projection; 
			
 
				+uniform mat4 world;
			
 
				+uniform mat4 worldViewProjection;
			
 
				+void main()
			
 
				+{ 
			
 
				+    vUV = uv;
			
 
				+    gl_Position = projection * view * world * vec4(position , 1.0); 
			
 
				+}
			
 
				+`;
			
 
				+
			
 
				+
			
 
				+BABYLON.Effect.ShadersStore["customFragmentShader"]=`
			
 
				+    precision highp float;
			
 
				+ 
			
 
				+varying vec2 vUV;
			
 
				+uniform sampler2D chrominanceYTexture;
			
 
				+
			
 
				+void main()
			
 
				+{    
			
 
				+    vec2 uv = vUV;
			
 
				+    vec3 color = vec3(0,0,0);
			
 
				+
			
 
				+    color = texture2D(chrominanceYTexture, uv).rgb;     
			
 
				+
			
 
				+    gl_FragColor = vec4( color, 1.0); 
			
 
				+}
			
 
				+
			
 
				+
			
 
				+`;
			
 
				+
			
 
				+
			
 
				+    var width=512;
			
 
				+    var height=1024;
			
 
				+    window._videoRawYTexture = BABYLON.RawTexture.CreateLuminanceTexture(
			
 
				+          null,
			
 
				+          width,
			
 
				+          height,
			
 
				+          scene,
			
 
				+          true,
			
 
				+          true,
			
 
				+        )
			
 
				+
			
 
				+    /*
			
 
				+    var selfShader = new BABYLON.ShaderMaterial(
			
 
				+      'customShader',
			
 
				+      scene,
			
 
				+      { 
			
 
				+        vertex: "custom",
			
 
				+        fragment: "custom",
			
 
				+      },
			
 
				+      {
			
 
				+        attributes: ['uv', 'position'],
			
 
				+        uniforms: ['view', 'projection', 'worldViewProjection', 'world'],
			
 
				+      },
			
 
				+    )
			
 
				+    
			
 
				+    selfShader.setTexture('chrominanceYTexture', _videoRawYTexture)
			
 
				+*/
			
 
				+
			
 
				+    var selfShader = new BABYLON.StandardMaterial("xsttest",this.scene);
			
 
				+    selfShader.diffuseTexture = window._videoRawYTexture
			
 
				+    ground.material = selfShader
			
 
				+    return scene;
			
 
				+};
			
 
				+
			
 
				+
			
 
				+window.generateRandomArray = ()=>{
			
 
				+      var rnd=[];
			
 
				+        for(let i=0;i< 512*1024;i++)
			
 
				+        {
			
 
				+            rnd[i] = Math.floor(Math.random()*255);
			
 
				+        }
			
 
				+        return rnd;
			
 
				+}
			
 
				+
			
 
				+window.updateTexture = (yuv)=>
			
 
				+{
			
 
				+        let Y = yuv.subarray(0, 512*1024);
			
 
				+        window._videoRawYTexture.update(Y)
			
 
				+        window._videoRawYTexture.updateSamplingMode(BABYLON.Texture.BILINEAR_SAMPLINGMODE)
			
 
				+        Y = undefined;
			
 
				+}
			
 
				+
			
 
				+window.changeTexture = (data)=>{ 
			
 
				+        for(let i=0;i< 512*1024;i++)
			
 
				+        {
			
 
				+            data[i] = Math.floor(Math.random()*255);
			
 
				+        }
			
 
				+        return data;
			
 
				+}
			
 
				+
			
 
				+window.data = new Uint8Array(window.generateRandomArray());
			
 
				+// start 
			
 
				+// window.setInterval( ()=>{ 
			
 
				+//     data = window.changeTexture(data);
			
 
				+//     window.updateTexture( data );
			
 
				+// }, 60);
			
 
				+                window.initFunction = async function() {
			
 
				+                    
			
 
				+                    
			
 
				+                    var asyncEngineCreation = async function() {
			
 
				+                        try {
			
 
				+                        return createDefaultEngine();
			
 
				+                        } catch(e) {
			
 
				+                        console.log("the available createEngine function failed. Creating the default engine instead");
			
 
				+                        return createDefaultEngine();
			
 
				+                        }
			
 
				+                    }
			
 
				+
			
 
				+                    window.engine = await asyncEngineCreation();
			
 
				+        if (!engine) throw 'engine should not be null.';
			
 
				+        startRenderLoop(engine, canvas);
			
 
				+        window.scene = createScene();};
			
 
				+        initFunction().then(() => {sceneToRender = scene                    
			
 
				+        });
			
 
				+
			
 
				+        // Resize
			
 
				+        window.addEventListener("resize", function () {
			
 
				+            engine.resize();
			
 
				+        });
			
 
				+    </script>
			
 
				+</body>
			
 
				+</html>
			
--- a/dist/video/0
+++ b/dist/video/0
--- a/dist/video/0_1_0.mp4
+++ b/dist/video/0_1_0.mp4
--- a/dist/video/264/0
+++ b/dist/video/264/0
--- a/dist/video/264/1
+++ b/dist/video/264/1
--- a/dist/video/264/1.jpg
+++ b/dist/video/264/1.jpg
--- a/dist/video/264/10
+++ b/dist/video/264/10
--- a/dist/video/264/10.jpg
+++ b/dist/video/264/10.jpg
--- a/dist/video/264/11
+++ b/dist/video/264/11
--- a/dist/video/264/11.jpg
+++ b/dist/video/264/11.jpg
--- a/dist/video/264/12
+++ b/dist/video/264/12
--- a/dist/video/264/12.jpg
+++ b/dist/video/264/12.jpg
--- a/dist/video/264/13
+++ b/dist/video/264/13
--- a/dist/video/264/13.jpg
+++ b/dist/video/264/13.jpg
--- a/dist/video/264/14
+++ b/dist/video/264/14
--- a/dist/video/264/14.jpg
+++ b/dist/video/264/14.jpg
--- a/dist/video/264/15
+++ b/dist/video/264/15
--- a/dist/video/264/15.jpg
+++ b/dist/video/264/15.jpg
--- a/dist/video/264/16
+++ b/dist/video/264/16
--- a/dist/video/264/16.jpg
+++ b/dist/video/264/16.jpg
--- a/dist/video/264/17
+++ b/dist/video/264/17
--- a/dist/video/264/17.jpg
+++ b/dist/video/264/17.jpg
--- a/dist/video/264/18
+++ b/dist/video/264/18
--- a/dist/video/264/18.jpg
+++ b/dist/video/264/18.jpg
--- a/dist/video/264/19
+++ b/dist/video/264/19
--- a/dist/video/264/19.jpg
+++ b/dist/video/264/19.jpg
--- a/dist/video/264/2
+++ b/dist/video/264/2
--- a/dist/video/264/2.jpg
+++ b/dist/video/264/2.jpg
--- a/dist/video/264/20
+++ b/dist/video/264/20
--- a/dist/video/264/20.jpg
+++ b/dist/video/264/20.jpg
--- a/dist/video/264/21
+++ b/dist/video/264/21
--- a/dist/video/264/21.jpg
+++ b/dist/video/264/21.jpg
--- a/dist/video/264/22
+++ b/dist/video/264/22
--- a/dist/video/264/22.jpg
+++ b/dist/video/264/22.jpg
--- a/dist/video/264/23
+++ b/dist/video/264/23
--- a/dist/video/264/23.jpg
+++ b/dist/video/264/23.jpg
--- a/dist/video/264/24
+++ b/dist/video/264/24
--- a/dist/video/264/24.jpg
+++ b/dist/video/264/24.jpg
--- a/dist/video/264/25
+++ b/dist/video/264/25
--- a/dist/video/264/25.jpg
+++ b/dist/video/264/25.jpg
--- a/dist/video/264/26
+++ b/dist/video/264/26
--- a/dist/video/264/26.jpg
+++ b/dist/video/264/26.jpg
--- a/dist/video/264/27
+++ b/dist/video/264/27
--- a/dist/video/264/27.jpg
+++ b/dist/video/264/27.jpg
--- a/dist/video/264/28
+++ b/dist/video/264/28
--- a/dist/video/264/28.jpg
+++ b/dist/video/264/28.jpg
--- a/dist/video/264/29
+++ b/dist/video/264/29
--- a/dist/video/264/29.jpg
+++ b/dist/video/264/29.jpg
--- a/dist/video/264/3
+++ b/dist/video/264/3
--- a/dist/video/264/3.jpg
+++ b/dist/video/264/3.jpg
--- a/dist/video/264/30
+++ b/dist/video/264/30
--- a/dist/video/264/30.jpg
+++ b/dist/video/264/30.jpg
--- a/dist/video/264/31
+++ b/dist/video/264/31
--- a/dist/video/264/31.jpg
+++ b/dist/video/264/31.jpg
--- a/dist/video/264/32
+++ b/dist/video/264/32
--- a/dist/video/264/32.jpg
+++ b/dist/video/264/32.jpg
--- a/dist/video/264/33
+++ b/dist/video/264/33
--- a/dist/video/264/33.jpg
+++ b/dist/video/264/33.jpg
--- a/dist/video/264/34
+++ b/dist/video/264/34
--- a/dist/video/264/34.jpg
+++ b/dist/video/264/34.jpg
--- a/dist/video/264/35
+++ b/dist/video/264/35
--- a/dist/video/264/35.jpg
+++ b/dist/video/264/35.jpg
--- a/dist/video/264/36
+++ b/dist/video/264/36
--- a/dist/video/264/36.jpg
+++ b/dist/video/264/36.jpg
--- a/dist/video/264/37
+++ b/dist/video/264/37
--- a/dist/video/264/37.jpg
+++ b/dist/video/264/37.jpg
--- a/dist/video/264/38
+++ b/dist/video/264/38
--- a/dist/video/264/38.jpg
+++ b/dist/video/264/38.jpg
--- a/dist/video/264/39
+++ b/dist/video/264/39
--- a/dist/video/264/39.jpg
+++ b/dist/video/264/39.jpg
--- a/dist/video/264/4
+++ b/dist/video/264/4
--- a/dist/video/264/4.jpg
+++ b/dist/video/264/4.jpg
--- a/dist/video/264/40
+++ b/dist/video/264/40
--- a/dist/video/264/40.jpg
+++ b/dist/video/264/40.jpg
--- a/dist/video/264/41
+++ b/dist/video/264/41
--- a/dist/video/264/41.jpg
+++ b/dist/video/264/41.jpg
--- a/dist/video/264/42
+++ b/dist/video/264/42
--- a/dist/video/264/42.jpg
+++ b/dist/video/264/42.jpg
--- a/dist/video/264/5
+++ b/dist/video/264/5
--- a/dist/video/264/5.jpg
+++ b/dist/video/264/5.jpg
--- a/dist/video/264/6
+++ b/dist/video/264/6
--- a/dist/video/264/6.jpg
+++ b/dist/video/264/6.jpg
--- a/dist/video/264/7
+++ b/dist/video/264/7
--- a/dist/video/264/7.jpg
+++ b/dist/video/264/7.jpg
--- a/dist/video/264/8
+++ b/dist/video/264/8
--- a/dist/video/264/8.jpg
+++ b/dist/video/264/8.jpg
--- a/dist/video/264/9
+++ b/dist/video/264/9
--- a/dist/video/264/9.jpg
+++ b/dist/video/264/9.jpg
--- a/dist/video/out.yuv
+++ b/dist/video/out.yuv
--- a/dist/video/test.h264
+++ b/dist/video/test.h264
--- a/dist/video/tt.mp4
+++ b/dist/video/tt.mp4
--- a/rollup.config.ba.js
+++ b/rollup.config.ba.js
@@ -0,0 +1,70 @@
 
				+import path from 'path'
			
 
				+import replace from '@rollup/plugin-replace'
			
 
				+import resolveNode from '@rollup/plugin-node-resolve'
			
 
				+import commonjs from '@rollup/plugin-commonjs'
			
 
				+import babel from '@rollup/plugin-babel'
			
 
				+import babelEnvConfig from './babel.env.config'
			
 
				+import { terser } from 'rollup-plugin-terser'
			
 
				+import webWorkerLoader from 'rollup-plugin-web-worker-loader';
			
 
				+
			
 
				+
			
 
				+const pkg = require(`./package.json`)
			
 
				+const version = pkg.version
			
 
				+
			
 
				+const isProd = process.env.NODE_ENV === 'production'
			
 
				+const dist = file => path.resolve('dist/js/' + file)
			
 
				+
			
 
				+function createReplacePlugin() {
			
 
				+    const replacements = {
			
 
				+        __COMMIT__: `"${process.env.COMMIT}"`,
			
 
				+        __VERSION__: `"${version}"`,
			
 
				+        __ENV__: `"${process.env.NODE_ENV}"`,
			
 
				+        __PROD__: isProd,
			
 
				+        __DEV__: !isProd,
			
 
				+    }
			
 
				+    Object.keys(replacements).forEach(key => {
			
 
				+        if (key in process.env) {
			
 
				+            replacements[key] = process.env[key]
			
 
				+        }
			
 
				+    })
			
 
				+    return replace({
			
 
				+        values: replacements,
			
 
				+        preventAssignment: true,
			
 
				+    })
			
 
				+}
			
 
				+
			
 
				+const sdk_plugins = [
			
 
				+    resolveNode({
			
 
				+        mainFields: ['jsnext', 'main'],
			
 
				+        preferBuiltins: true,
			
 
				+        browser: true,
			
 
				+    }),
			
 
				+    babel(babelEnvConfig()),
			
 
				+    commonjs(),
			
 
				+    createReplacePlugin(),
			
 
				+    webWorkerLoader(/* configuration */),
			
 
				+]
			
 
				+
			
 
				+if (isProd) {
			
 
				+    sdk_plugins.push(terser())
			
 
				+}
			
 
				+
			
 
				+export default [
			
 
				+    {
			
 
				+        input: 'src/h264Decoder/index.js',
			
 
				+        //external: ['three'],
			
 
				+        output: [
			
 
				+            {
			
 
				+                globals: {
			
 
				+                   // three: 'THREE',
			
 
				+                },
			
 
				+                file: dist('video.js'),
			
 
				+                format: 'umd',
			
 
				+                name: 'Metaverse',
			
 
				+                sourcemap: !isProd,
			
 
				+                banner: pkg.banner.replace('${date}', new Date().toLocaleDateString()).replace('${author}', pkg.author).replace('${year}', new Date().getFullYear()),
			
 
				+            },
			
 
				+        ],
			
 
				+        plugins: sdk_plugins,
			
 
				+    },
			
 
				+]
			
--- a/src/Response.js
+++ b/src/Response.js
@@ -0,0 +1,83 @@
 
				+var Response = {
			
 
				+	"signal": {
			
 
				+		"traceIds": [],
			
 
				+		"vehicle": null,
			
 
				+		"newUserStates": [{
			
 
				+			"userId": null,    //要补充
			
 
				+			"playerState": {
			
 
				+				"roomTypeId": "",
			
 
				+				"person": 0,
			
 
				+				"avatarId": "",
			
 
				+				"skinId": "",
			
 
				+				"roomId": "",
			
 
				+				"isHost": false,
			
 
				+				"isFollowHost": false,
			
 
				+				"skinDataVersion": "",
			
 
				+				"avatarComponents": "",
			
 
				+				"nickName": "",
			
 
				+				"movingMode": 0,
			
 
				+				"attitude": "",
			
 
				+				"areaName": "",
			
 
				+				"pathName": "",
			
 
				+				"pathId": "",
			
 
				+				"avatarSize": 1,
			
 
				+				"extra": "",
			
 
				+				"prioritySync": false,
			
 
				+                //人物
			
 
				+				"player": {
			
 
				+					"position": {              //要补充
			
 
				+						"x": null,
			
 
				+						"y": null,
			
 
				+						"z": null
			
 
				+					},
			
 
				+					"angle": {                 //要补充
			
 
				+						"pitch": 0,
			
 
				+						"yaw": 0,
			
 
				+						"roll": 0
			
 
				+					}
			
 
				+				},
			
 
				+				"camera": {
			
 
				+					"position": {              //要补充
			
 
				+						"x": null,
			
 
				+						"y": null,
			
 
				+						"z": null
			
 
				+					},
			
 
				+					"angle": {                 //要补充
			
 
				+						"pitch": 0,          
			
 
				+                        "yaw": 0,
			
 
				+						"roll": 0
			
 
				+					}
			
 
				+				},
			
 
				+				"cameraCenter": {               //要补充
			
 
				+                    "x": null,
			
 
				+                    "y": null,
			
 
				+                    "z": null
			
 
				+				}
			
 
				+			},
			
 
				+			"renderInfo": {
			
 
				+				"renderType": 0,
			
 
				+				"videoFrame": null,
			
 
				+				"cameraStateType": 0,
			
 
				+				"isMoving": 0,
			
 
				+				"needIfr": 0,
			
 
				+				"isVideo": 0,
			
 
				+				"stillFrame": 0,
			
 
				+				"isRotating": 0,
			
 
				+				"isFollowing": 0,
			
 
				+				"clientPanoTitlesBitmap": [],
			
 
				+				"clientPanoTreceId": "",
			
 
				+				"prefetchVideoId": "",
			
 
				+				"noMedia": false
			
 
				+			},
			
 
				+			"event": null,
			
 
				+			"relation": 1
			
 
				+		}],
			
 
				+		"actionResponses": [],
			
 
				+		"getStateType": 0,
			
 
				+		"code": 0,
			
 
				+		"msg": "OK"
			
 
				+	},
			
 
				+	"pts": null,
			
 
				+	"alreadyUpdateYUV": true
			
 
				+}
			
 
				+export default Response
			
--- a/src/h264Decoder/VDecoder.js
+++ b/src/h264Decoder/VDecoder.js
@@ -0,0 +1,184 @@
 
				+import EventEmitter from "eventemitter3";
			
 
				+import H264Worker from "web-worker:./h264.worker.js";
			
 
				+import { range, isArray } from "lodash-es";
			
 
				+import { v4 as uuidv4 } from "uuid";
			
 
				+
			
 
				+export class VDecoder extends EventEmitter {
			
 
				+  constructor({ chunkSize = 256 * 1024, maxChip = 100 }) {
			
 
				+    super();
			
 
				+    // this.cacheSegmentCount = cacheSegmentCount;
			
 
				+    // this.chunkSize = chunkSize;
			
 
				+    this.cacheBuffer = [];
			
 
				+    this.cacheBufferTotal = null;
			
 
				+    this.worker = new H264Worker();
			
 
				+    this.initWorker();
			
 
				+    this.tempVideos = [];
			
 
				+    this.ready = false;
			
 
				+    this.decoding = false;
			
 
				+    this.decodingId = null;
			
 
				+    this.start = null;
			
 
				+    this.maxChip = maxChip;
			
 
				+  }
			
 
				+
			
 
				+  static isSupport() {
			
 
				+    return !!(
			
 
				+      // UC and Quark browser (iOS/Android) support wasm/asm limited,
			
 
				+      // its iOS version make wasm/asm performance very slow （maybe hook something）
			
 
				+      // its Android version removed support for wasm/asm, it just run pure javascript codes,
			
 
				+      // so it is very easy to cause memory leaks
			
 
				+      (
			
 
				+        !/UCBrowser|Quark/.test(window.navigator.userAgent) &&
			
 
				+        window.fetch &&
			
 
				+        window.ReadableStream &&
			
 
				+        window.Promise &&
			
 
				+        window.URL &&
			
 
				+        window.URL.createObjectURL &&
			
 
				+        window.Blob &&
			
 
				+        window.Worker &&
			
 
				+        !!new Audio().canPlayType("audio/aac;").replace(/^no$/, "") &&
			
 
				+        (window.AudioContext || window.webkitAudioContext)
			
 
				+      )
			
 
				+    );
			
 
				+  }
			
 
				+  initWorker() {
			
 
				+    this.worker.addEventListener("message", (e) => {
			
 
				+      const message =
			
 
				+        /** @type {{type:string, width:number, height:number, data:ArrayBuffer, renderStateId:number}} */ e.data;
			
 
				+
			
 
				+      switch (message.type) {
			
 
				+        case "pictureReady":
			
 
				+          //   onPictureReady(message);
			
 
				+          // console.log(
			
 
				+          //   "[VDecoder]::decodeData",
			
 
				+          //   Object.assign(message, { clipId: this.decodingId })
			
 
				+          // );
			
 
				+          this.emit(
			
 
				+            "decodeData",
			
 
				+            Object.assign(message, { clipId: this.decodingId })
			
 
				+          );
			
 
				+
			
 
				+          if (this.decoding && this.decodingId) {
			
 
				+            this.decodeNext(this.decodingId);
			
 
				+          }
			
 
				+          break;
			
 
				+        case "decoderReady":
			
 
				+          this.ready = true;
			
 
				+          this.emit("ready");
			
 
				+          break;
			
 
				+      }
			
 
				+    });
			
 
				+  }
			
 
				+
			
 
				+  /**
			
 
				+   *
			
 
				+   * @param {*} rangeArray array [2,100]
			
 
				+   */
			
 
				+  fetch({ path, range: rangeArray, decode = true }) {
			
 
				+    if (!this.ready) {
			
 
				+      throw new Error("decoder is not ready");
			
 
				+    }
			
 
				+    const url = path;
			
 
				+    if (!(isArray(rangeArray) && rangeArray.length === 2)) {
			
 
				+      throw new Error("range must is an array!");
			
 
				+    }
			
 
				+
			
 
				+    if (this.tempVideos.length > this.maxChip) {
			
 
				+      this.flush();
			
 
				+      console.log("flush");
			
 
				+    }
			
 
				+
			
 
				+    let rangeFetch = [];
			
 
				+
			
 
				+    if (rangeArray[0] < 0 || rangeArray[1] < 0) {
			
 
				+      console.error("[VDecoder]:range: 非法", `${[rangeArray[0], rangeArray[1]]}`);
			
 
				+      return
			
 
				+    }
			
 
				+
			
 
				+    if (rangeArray[0] < rangeArray[1]) {
			
 
				+      rangeFetch = range(rangeArray[0], rangeArray[1] + 1);
			
 
				+      console.log("[VDecoder]:顺时 +", rangeFetch);
			
 
				+    } else {
			
 
				+      rangeFetch = range(rangeArray[1], rangeArray[0] + 1).reverse();
			
 
				+      console.log("[VDecoder]:逆时 -", rangeFetch);
			
 
				+    }
			
 
				+
			
 
				+    const allFetch = rangeFetch.map((i) => {
			
 
				+      return fetch(`${url}/${i}`).then((response) => {
			
 
				+        return response.arrayBuffer().then(function (buffer) {
			
 
				+          return new Uint8Array(buffer);
			
 
				+        });
			
 
				+      });
			
 
				+    });
			
 
				+
			
 
				+    return Promise.all(allFetch)
			
 
				+      .then((data) => {
			
 
				+        const clip = { id: uuidv4(), data: data };
			
 
				+        if (data.length > 0) {
			
 
				+          this.emit("fetchDone", clip);
			
 
				+          this.cacheBuffer = data.slice();
			
 
				+          this.tempVideos.push(clip);
			
 
				+          console.log("[VDecoder]:获取clip,", clip);
			
 
				+          if (decode) {
			
 
				+            this.start = Date.now();
			
 
				+            this.cacheBufferTotal = clip.data.length;
			
 
				+            this.decodeNext(clip.id);
			
 
				+          }
			
 
				+          return Promise.resolve(clip);
			
 
				+        } else {
			
 
				+          console.warn("[VDecoder]:fetch取帧为空", rangeFetch);
			
 
				+        }
			
 
				+      })
			
 
				+      .catch((error) => {
			
 
				+        console.log("error", error);
			
 
				+      });
			
 
				+  }
			
 
				+  /**
			
 
				+   * @param {Uint8Array} h264Nal
			
 
				+   */
			
 
				+  decode(h264Nal, id) {
			
 
				+    this.worker.postMessage(
			
 
				+      {
			
 
				+        type: "decode",
			
 
				+        data: h264Nal.buffer,
			
 
				+        offset: h264Nal.byteOffset,
			
 
				+        length: h264Nal.byteLength,
			
 
				+        renderStateId: id,
			
 
				+      },
			
 
				+      [h264Nal.buffer]
			
 
				+    );
			
 
				+  }
			
 
				+
			
 
				+  decodeNext(clipId) {
			
 
				+    const nextFrame = this.cacheBuffer.shift();
			
 
				+    this.decodingId = clipId;
			
 
				+    this.decoding = true;
			
 
				+    let tempId = this.cacheBufferTotal - this.cacheBuffer.length - 1;
			
 
				+
			
 
				+    if (nextFrame) {
			
 
				+      this.decode(nextFrame, tempId);
			
 
				+    } else {
			
 
				+      console.log("tempVideos", this.tempVideos.length);
			
 
				+      const clip = this.tempVideos.find(({ id }) => id === this.decodingId);
			
 
				+      if (clip) {
			
 
				+        const fps = (1000 / (Date.now() - this.start)) * clip.data.length;
			
 
				+        console.log(
			
 
				+          `Decoded ${clip.data.length} frames in ${
			
 
				+            Date.now() - this.start
			
 
				+          }ms @ ${fps >> 0}FPS`
			
 
				+        );
			
 
				+      } else {
			
 
				+        console.warn("不存在clip");
			
 
				+      }
			
 
				+
			
 
				+      this.decoding = false;
			
 
				+      // this.decodingId = null;
			
 
				+      tempId = 0;
			
 
				+      clip && clip.id && this.emit("decodeDone", clip.id);
			
 
				+    }
			
 
				+  }
			
 
				+  flush() {
			
 
				+    this.tempVideos = [];
			
 
				+  }
			
 
				+
			
 
				+  preloader(preload) {}
			
 
				+}
			
--- a/src/h264Decoder/h264.worker.js
+++ b/src/h264Decoder/h264.worker.js
@@ -0,0 +1,3 @@
 
				+import { init } from 'tinyh264'
			
 
				+
			
 
				+init()
			
--- a/src/h264Decoder/index.js
+++ b/src/h264Decoder/index.js