add fetchStream

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

@@ -0,0 +1,46 @@
+import { errorHandle } from '../utils';
+
+export default function fetchStream(flv, url) {
+    flv.emit('flvFetchStart');
+    fetch(url).then(response => {
+        errorHandle(
+            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();
+                    (function read() {
+                        reader
+                            .read()
+                            .then(({ done, value }) => {
+                                if (done) {
+                                    flv.emit('flvFetchEnd');
+                                    controller.close();
+                                    return;
+                                }
+                                flv.emit('flvFetching', value);
+                                controller.enqueue(value);
+                                read();
+                            })
+                            .catch(error => {
+                                flv.emit('flvFetchError', error);
+                            });
+                    })();
+                },
+                cancel() {
+                    flv.emit('flvFetchCancel');
+                },
+            }),
+        );
+    });
+}

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

@@ -1,3 +1,6 @@
+import fetchStream from './fetchStream';
+import readFile from './readFile';
+
 export default class FlvParse {
     constructor(flv) {
         this.flv = flv;
@@ -5,28 +8,40 @@ export default class FlvParse {
         this.index = 0;
         this.header = {};
         this.tags = [];
-        if (typeof flv.options.url === 'string') {
-            this.fromNetwork(flv.url);
-        } else {
-            this.fromLocal(flv.url);
-        }
-    }
 
-    fromNetwork(url) {
-        console.log(this.flv.options.url);
-    }
-
-    fromLocal(file) {
-        const {
-            events: { proxy },
-        } = this.flv;
-        const reader = new FileReader();
-        proxy(reader, 'load', e => {
-            const buffer = e.target.result;
-            this.uint8 = new Uint8Array(buffer);
-            this.parse();
+        flv.on('flvFetchStart', () => {
+            console.log('flvFetchStart');
         });
-        reader.readAsArrayBuffer(file);
+
+        flv.on('flvFetchInfo', info => {
+            console.log('flvFetchInfo', info);
+        });
+
+        flv.on('flvFetchCancel', () => {
+            console.log('flvFetchCancel');
+        });
+
+        flv.on('flvFetchError', error => {
+            console.log('flvFetchError', error);
+        });
+
+        flv.on('flvFetching', value => {
+            console.log(value);
+        });
+
+        flv.on('flvFetchEnd', value => {
+            console.log('flvFetchEnd', value);
+            if (value) {
+                this.uint8 = value;
+            }
+        });
+
+        const { url } = flv.options;
+        if (typeof url === 'string') {
+            fetchStream(flv, url);
+        } else {
+            readFile(flv, url);
+        }
     }
 
     parse() {

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

@@ -0,0 +1,15 @@
+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 => {
+        const buffer = e.target.result;
+        const uint8 = new Uint8Array(buffer);
+        flv.emit('flvFetchEnd', uint8);
+    });
+    reader.readAsArrayBuffer(file);
+}

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

@@ -11,6 +11,7 @@ class Flv extends Emitter {
     constructor(options) {
         super();
         this.options = Object.assign({}, Flv.DEFAULTS, options);
+        console.log(this.options);
         checkSupport(this.options);
         id += 1;
         this.id = id;

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

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

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

@@ -12,4 +12,8 @@ export function errorHandle(condition, msg) {
     if (!condition) {
         throw new FlvError(msg);
     }
-}
+}
+
+export function getTagBodySize(dataSize) {
+    return dataSize[0] * 256 ** 2 + dataSize[1] * 256 + dataSize[2];
+}