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

@@ -0,0 +1,77 @@
+import fetchStream from './fetchStream';
+import readFile from './readFile';
+
+export default class FlvParse {
+    constructor(flv) {
+        this.flv = flv;
+        this.uint8 = [];
+        this.index = 0;
+        this.header = {};
+        this.tags = [];
+
+        flv.on('flvFetchStart', () => {
+            console.log('flvFetchStart');
+        });
+
+        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() {
+        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);
+        while (this.index < this.uint8.length) {
+            const tag = {};
+            tag.tagType = this.read(1);
+            tag.dataSize = this.read(3);
+            tag.Timestamp = this.read(4);
+            tag.StreamID = this.read(3);
+            tag.body = this.read(FlvParse.getBodySum(tag.dataSize));
+            this.tags.push(tag);
+            this.read(4);
+        }
+    }
+
+    read(length) {
+        const tempUint8 = [];
+        for (let i = 0; i < length; i += 1) {
+            tempUint8.push(this.uint8[this.index]);
+            this.index += 1;
+        }
+        return tempUint8;
+    }
+
+    static getBodySum(arr) {
+        return arr[0] * 256 ** 2 + arr[1] * 256 + arr[2];
+    }
+}

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);
+}