add creatWorker

packages/artplayer-plugin-flv/src/creatWorker.js

@@ -0,0 +1,58 @@
+export default class CreatWorker {
+    constructor() {
+        this.workers = new Map();
+    }
+
+    static fnToStr(fn) {
+        return `
+           self.onmessage = event => {
+               return self.postMessage((${fn}).apply(null, event.data));
+           }
+         `;
+    }
+
+    static create(fn) {
+        const blob = new Blob([CreatWorker.fnToStr(fn)], {
+            type: 'application/javascript',
+        });
+        const objectURL = window.URL.createObjectURL(blob);
+        const worker = new Worker(objectURL);
+        worker.kill = () => {
+            URL.revokeObjectURL(objectURL);
+            worker.terminate();
+        };
+        worker.post = args =>
+            new Promise((resolve, reject) => {
+                worker.onmessage = event => {
+                    resolve(event.data);
+                };
+                worker.onerror = error => {
+                    reject(error);
+                };
+                worker.postMessage(args);
+            });
+        return worker;
+    }
+
+    add(name, fn) {
+        if (!this.workers.has(name)) {
+            this.workers.set(name, CreatWorker.create(fn));
+        }
+    }
+
+    run(name, ...args) {
+        const worker = this.workers.get(name);
+        return worker.post(args);
+    }
+
+    kill(name) {
+        const worker = this.workers.get(name);
+        worker.kill();
+    }
+
+    killAll() {
+        this.workers.forEach(worker => {
+            worker.kill();
+        });
+    }
+}

packages/artplayer-plugin-flv/src/flvParse/fetchStream.js

@@ -7,18 +7,21 @@ export default function fetchStream(flv, url) {
             response.ok && response.status >= 200 && response.status <= 299,
             `${response.status} ${response.statusText}`,
         );
-        const contentLength = response.headers.get('content-length');
         const contentType = response.headers.get('content-type');
-        // errorHandle(contentLength, 'Content-Length response header unavailable');
         errorHandle(contentType.includes('x-flv'), 'The resource does not seem to be a flv file');
-        flv.emit('flvFetchInfo', {
-            type: contentType,
-            length: contentLength,
-        });
         return new Response(
             new ReadableStream({
                 start(controller) {
                     const reader = response.body.getReader();
+
+                    flv.on('destroy', () => {
+                        reader.cancel();
+                    });
+
+                    flv.on('readerCancel', () => {
+                        reader.cancel();
+                    });
+
                     (function read() {
                         reader
                             .read()

packages/artplayer-plugin-flv/src/flvParse/index.js

@@ -1,22 +1,19 @@
 import fetchStream from './fetchStream';
 import readFile from './readFile';
+import { mergeTypedArrays } from '../utils';
 
 export default class FlvParse {
     constructor(flv) {
         this.flv = flv;
-        this.uint8 = [];
+        this.uint8 = new Int8Array(0);
         this.index = 0;
-        this.header = {};
+        this.header = null;
         this.tags = [];
 
         flv.on('flvFetchStart', () => {
             console.log('flvFetchStart');
         });
 
-        flv.on('flvFetchInfo', info => {
-            console.log('flvFetchInfo', info);
-        });
-
         flv.on('flvFetchCancel', () => {
             console.log('flvFetchCancel');
         });
@@ -26,13 +23,17 @@ export default class FlvParse {
         });
 
         flv.on('flvFetching', value => {
-            console.log(value);
+            this.uint8 = mergeTypedArrays(this.uint8, value);
+            console.log(this.uint8.length);
+            this.parseHeader();
         });
 
         flv.on('flvFetchEnd', value => {
-            console.log('flvFetchEnd', value);
+            console.log('flvFetchEnd');
             if (value) {
                 this.uint8 = value;
+                this.parseHeader();
+                // this.parseTags();
             }
         });
 
@@ -44,12 +45,20 @@ export default class FlvParse {
         }
     }
 
-    parse() {
-        this.header.signature = this.read(3);
-        this.header.version = this.read(1);
-        this.header.flags = this.read(1);
-        this.header.headersize = this.read(4);
-        this.read(4);
+    parseHeader() {
+        if (this.uint8.length >= 13 && !this.header) {
+            const header = {};
+            header.signature = this.read(3);
+            header.version = this.read(1);
+            header.flags = this.read(1);
+            header.headersize = this.read(4);
+            this.header = header;
+            this.read(4);
+            console.log(this.header);
+        }
+    }
+
+    parseTags() {
         while (this.index < this.uint8.length) {
             const tag = {};
             tag.tagType = this.read(1);

packages/artplayer-plugin-flv/src/flvParse/readFile.js

@@ -1,9 +1,5 @@
 export default function readFile(flv, file) {
     flv.emit('flvFetchStart');
-    flv.emit('flvFetchInfo', {
-        type: file.type,
-        length: file.size,
-    });
     const { proxy } = flv.events;
     const reader = new FileReader();
     proxy(reader, 'load', e => {

packages/artplayer-plugin-flv/src/index.js

@@ -1,6 +1,7 @@
 import Emitter from 'tiny-emitter';
 import checkSupport from './utils/checkSupport';
 import EventProxy from './eventProxy';
+import CreatWorker from './creatWorker';
 import CreatMediaSource from './creatMediaSource';
 import FlvParse from './flvParse';
 import * as utils from './utils';
@@ -39,12 +40,14 @@ class Flv extends Emitter {
 
     load() {
         this.events = new EventProxy(this);
+        this.workers = new CreatWorker(this);
         this.mediaSource = new CreatMediaSource(this);
         this.flvData = new FlvParse(this);
     }
 
     destroy() {
         this.events.destroy();
+        this.workers.killAll();
         Flv.instances.splice(Flv.instances.indexOf(this), 1);
         this.emit('destroy');
     }

packages/artplayer-plugin-flv/src/utils/checkSupport.js

@@ -19,5 +19,6 @@ export default function checkSupport(options) {
 
     errorHandle(typeof window.Promise === 'function', "Unsupported 'Promise' method");
     errorHandle(typeof window.fetch === 'function', "Unsupported 'fetch' method");
+    errorHandle(typeof window.Worker === 'function', "Unsupported 'Worker' method");
     errorHandle(typeof window.ReadableStream === 'function', "Unsupported 'ReadableStream' method");
 }

packages/artplayer-plugin-flv/src/utils/index.js

@@ -14,6 +14,9 @@ export function errorHandle(condition, msg) {
     }
 }
 
-export function getTagBodySize(dataSize) {
-    return dataSize[0] * 256 ** 2 + dataSize[1] * 256 + dataSize[2];
+export function mergeTypedArrays(a, b) {
+    const c = new a.constructor(a.length + b.length);
+    c.set(a);
+    c.set(b, a.length);
+    return c;
 }