gemercheung 3 years ago
parent
commit
69f84bc272
3 changed files with 82 additions and 8 deletions
  1. 48 2
      src/h264Decoder/VDecoder.js
  2. 33 5
      src/h264Decoder/index.js
  3. 1 1
      src/main.js

+ 48 - 2
src/h264Decoder/VDecoder.js

@@ -71,6 +71,52 @@ export class VDecoder extends EventEmitter {
 
   /**
    *
+   * @param {*} array array [2,100]
+   */
+  mutiFetch(data) {
+    if (!(isArray(data) && data.length > 0)) {
+      throw new Error("range must is an array and has value");
+      return;
+    }
+    if (!(data[0] && "path" in data[0] && "frame" in data[0])) {
+      throw new Error("props path,frame,vid must have");
+      return;
+    }
+    if (!this.ready) {
+      throw new Error("decoder is not ready");
+      return;
+    }
+    const allFetch = data.map((item) => {
+      return fetch(`${item.path}/${item.frame}`).then((response) => {
+        return response.arrayBuffer().then(function (buffer) {
+          return new Uint8Array(buffer);
+        });
+      });
+    });
+    console.log("allFetch", allFetch);
+    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);
+          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.error("error", error);
+      });
+  }
+
+  /**
+   *
    * @param {*} rangeArray array [2,100]
    */
   fetch({ path, range: rangeArray, decode = true }) {
@@ -113,7 +159,7 @@ export class VDecoder extends EventEmitter {
       }
     } else {
       // 单例 [i]
-      rangeFetch = rangeArray
+      rangeFetch = rangeArray;
       console.log("[VDecoder]:single", rangeFetch);
     }
 
@@ -144,7 +190,7 @@ export class VDecoder extends EventEmitter {
         }
       })
       .catch((error) => {
-        console.log("error", error);
+        console.error("error", error);
       });
   }
   /**

+ 33 - 5
src/h264Decoder/index.js

@@ -21,10 +21,38 @@ vDecoder.on("ready", () => {
   // 测试canvas
   initWebGLCanvas();
 
-  vDecoder.fetch({
-    path: "https://laser-data.oss-cn-shenzhen.aliyuncs.com/test-video/1011",
-    range: [],
-  });
+  vDecoder.mutiFetch([
+    {
+      path: "https://laser-data.oss-cn-shenzhen.aliyuncs.com/test-video/1011",
+      frame: 1,
+    },
+    {
+      path: "https://laser-data.oss-cn-shenzhen.aliyuncs.com/test-video/1011",
+      frame: 1,
+    },  {
+      path: "https://laser-data.oss-cn-shenzhen.aliyuncs.com/test-video/1011",
+      frame: 1,
+    },  {
+      path: "https://laser-data.oss-cn-shenzhen.aliyuncs.com/test-video/1011",
+      frame: 1,
+    },  {
+      path: "https://laser-data.oss-cn-shenzhen.aliyuncs.com/test-video/1011",
+      frame: 1,
+    },  {
+      path: "https://laser-data.oss-cn-shenzhen.aliyuncs.com/test-video/1011",
+      frame: 1,
+    },  {
+      path: "https://laser-data.oss-cn-shenzhen.aliyuncs.com/test-video/1011",
+      frame: 1,
+    },  {
+      path: "https://laser-data.oss-cn-shenzhen.aliyuncs.com/test-video/1011",
+      frame: 1,
+    },
+    {
+      path: "https://laser-data.oss-cn-shenzhen.aliyuncs.com/test-video/2",
+      frame: 2,
+    },
+  ]);
 
   vDecoder.on("fetchDone", (clip) => {
     console.log("fetchDone", clip);
@@ -33,7 +61,7 @@ vDecoder.on("ready", () => {
   vDecoder.on("decodeData", (data) => {
     // console.log("decodeData", data);
     const { width, height, data: buffer } = data;
-    // draw(new Uint8Array(buffer), width, height);
+    draw(new Uint8Array(buffer), width, height);
     // window.updateTexture( new Uint8Array(buffer) );
     // window.up
   });

+ 1 - 1
src/main.js

@@ -1,6 +1,6 @@
 import Xverse from "./Xverse.js";
 import Codes from "./enum/Codes.js";
-// import './video/index.js'
+// import './h264Decoder/index'
 
 const xverse = new Xverse({
   env: "DEV",