Merge pull request #12 from zhw2590582/dev-flv

Dev flv

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

@@ -0,0 +1,58 @@
+export default {
+    mediaSource: {
+        propertys: [
+            'activeSourceBuffers',
+            'duration',
+            'readyState',
+            'sourceBuffers',
+        ],
+        methods: [
+            'addSourceBuffer',
+            'endOfStream',
+            'removeSourceBuffer',
+            'clearLiveSeekableRange',
+            'setLiveSeekableRange',
+        ],
+        events: [
+            'sourceclose',
+            'sourceended',
+            'sourceopen',
+        ],
+    },
+    sourceBuffer: {
+        propertys: [
+            'mode',
+            'updating',
+            'buffered',
+            'timestampOffset',
+            'audioTracks',
+            'videoTracks',
+            'textTracks',
+            'appendWindowStart',
+            'appendWindowEnd',
+            'trackDefaults',
+        ],
+        methods: [
+            'appendBuffer',
+            'appendStream',
+            'abort',
+            'remove',
+        ],
+        events: [
+            'abort',
+            'error',
+            'update',
+            'updateend',
+            'updatestart',
+        ],
+    },
+    sourceBufferList: {
+        propertys: [
+            'length',
+        ],
+        events: [
+            'addsourcebuffer',
+            'removesourcebuffer',
+        ],
+    },
+};

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

@@ -0,0 +1,43 @@
+import config from './config';
+
+export default class CreatMediaSource {
+    constructor(flv) {
+        this.flv = flv;
+        this.creatUrl();
+        this.eventBind();
+    }
+
+    creatUrl() {
+        const {
+            options: { mediaElement },
+            events: { destroyEvents },
+        } = this.flv;
+        this.mediaSource = new MediaSource();
+        const url = URL.createObjectURL(this.mediaSource);
+        destroyEvents.push(() => {
+            URL.revokeObjectURL(url);
+        });
+        mediaElement.src = url;
+    }
+
+    eventBind() {
+        const {
+            events: { proxy },
+        } = this.flv;
+
+        config.mediaSource.events.forEach(eventName => {
+            proxy(this.mediaSource, eventName, event => {
+                this.flv.emit(`mediaSource:${event.type}`, event);
+            });
+        });
+
+        config.sourceBufferList.events.forEach(eventName => {
+            proxy(this.mediaSource.sourceBuffers, eventName, event => {
+                this.flv.emit(`sourceBuffers:${event.type}`, event);
+            });
+            proxy(this.mediaSource.activeSourceBuffers, eventName, event => {
+                this.flv.emit(`activeSourceBuffers:${event.type}`, event);
+            });
+        });
+    }
+}

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/eventProxy.js

@@ -0,0 +1,17 @@
+export default class EventProxy {
+    constructor() {
+        this.destroyEvents = [];
+        this.proxy = this.proxy.bind(this);
+    }
+
+    proxy(target, name, callback, option = {}) {
+        target.addEventListener(name, callback, option);
+        this.destroyEvents.push(() => {
+            target.removeEventListener(name, callback, option);
+        });
+    }
+
+    destroy() {
+        this.destroyEvents.forEach(event => event());
+    }
+}

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

@@ -1,17 +0,0 @@
-import { errorHandle } from './utils';
-
-export default class CheckSupport {
-    constructor() {
-        const MP4H264MimeCodec = 'video/mp4; codecs="avc1.42001E, mp4a.40.2"';
-        const videoElement = window.document.createElement('video');
-        const canPlay = videoElement.canPlayType(MP4H264MimeCodec);
-        errorHandle(
-            window.MediaSource &&
-                window.MediaSource.isTypeSupported(MP4H264MimeCodec) &&
-                (canPlay === 'probably' || canPlay === 'maybe'),
-            `Unsupported MIME type or codec: ${MP4H264MimeCodec}`,
-        );
-        errorHandle(typeof window.Promise === 'function', "Unsupported 'Promise' method");
-        errorHandle(typeof window.fetch === 'function', "Unsupported 'fetch' method");
-    }
-}

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

@@ -1,7 +0,0 @@
-export default class CreatMediaSource {
-    constructor(flv) {
-        this.mediaSource = new MediaSource();
-        this.url = URL.createObjectURL(this.mediaSource);
-        flv.mediaElement.src = this.url;
-    }
-}

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

@@ -1,24 +0,0 @@
-import Emitter from 'tiny-emitter';
-import CheckSupport from './checkSupport';
-import CreatMediaSource from './creatMediaSource';
-
-class Flv extends Emitter {
-    constructor(mediaElement, url) {
-        super();
-        this.mediaElement = mediaElement;
-        this.url = url;
-        this.support = new CheckSupport(this);
-        this.mediaSource = new CreatMediaSource(this);
-    }
-
-    load() {
-        console.log(this);
-    }
-
-    destroy() {
-        console.log(this);
-    }
-}
-
-window.Flv = Flv;
-export default Flv;

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

@@ -0,0 +1,49 @@
+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 contentType = response.headers.get('content-type');
+        errorHandle(contentType.includes('x-flv'), 'The resource does not seem to be a flv file');
+        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()
+                            .then(({ done, value }) => {
+                                if (done) {
+                                    flv.emit('flvFetchEnd');
+                                    controller.close();
+                                    return;
+                                }
+                                flv.emit('flvFetching', new Uint8Array(value));
+                                controller.enqueue(value);
+                                read();
+                            })
+                            .catch(error => {
+                                throw error;
+                            });
+                    })();
+                },
+                cancel() {
+                    flv.emit('flvFetchCancel');
+                },
+            }),
+        );
+    });
+}

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

@@ -0,0 +1,110 @@
+import fetchStream from './fetchStream';
+import readFile from './readFile';
+import parseScripTag from './parseScripTag';
+import { mergeTypedArrays, getUint8Sum, bin2String } from '../utils';
+
+export default class FlvParse {
+    constructor(flv) {
+        this.flv = flv;
+        const { url, debug } = flv.options;
+        this.uint8 = new Uint8Array(0);
+        this.index = 0;
+        this.header = null;
+        this.scripTag = null;
+        this.tags = [];
+        this.done = false;
+
+        flv.on('flvFetchStart', () => {
+            if (debug) {
+                console.log('[flv-fetch-start]', url);
+            }
+        });
+
+        flv.on('flvFetchCancel', () => {
+            if (debug) {
+                console.log('[flv-fetch-cancel]');
+            }
+        });
+
+        flv.on('flvFetching', uint8 => {
+            this.uint8 = mergeTypedArrays(this.uint8, uint8);
+            this.parse();
+        });
+
+        flv.on('flvFetchEnd', uint8 => {
+            if (debug) {
+                console.log('[flv-fetch-end]');
+            }
+            this.done = true;
+            if (uint8) {
+                this.uint8 = uint8;
+                this.index = 0;
+                this.header = null;
+                this.scripTag = null;
+                this.tags = [];
+                this.parse();
+            }
+            flv.emit('flvParseDone');
+            if (debug) {
+                console.log('[flv-parse-done]');
+            }
+        });
+
+        if (typeof url === 'string') {
+            fetchStream(flv, url);
+        } else {
+            readFile(flv, url);
+        }
+    }
+
+    parse() {
+        const { debug } = this.flv.options;
+        if (this.uint8.length >= 13 && !this.header) {
+            const header = Object.create(null);
+            header.signature = bin2String(this.read(3));
+            [header.version] = this.read(1);
+            [header.flags] = this.read(1);
+            header.headersize = getUint8Sum(this.read(4));
+            this.header = header;
+            this.read(4);
+            this.flv.emit('flvParseHeader', this.header);
+            if (debug) {
+                console.log('[flv-parse-header]', this.header);
+            }
+        }
+
+        while (this.index < this.uint8.length) {
+            const tag = Object.create(null);
+            [tag.tagType] = this.read(1);
+            tag.dataSize = getUint8Sum(this.read(3));
+            tag.timestamp = this.read(4);
+            tag.streamID = this.read(3);
+            tag.body = this.read(tag.dataSize);
+            this.tags.push(tag);
+            this.read(4);
+
+            switch (tag.tagType) {
+                case 18:
+                    this.scripTag = parseScripTag(tag.body);
+                    this.flv.emit('parseScripTag', this.scripTag);
+                    if (debug) {
+                        console.log('[flv-parse-scrip-tag]', this.scripTag);
+                    }
+                    break;
+                default:
+                    break;
+            }
+
+            this.flv.emit('flvParseTag', tag);
+        }
+    }
+
+    read(length) {
+        const tempUint8 = new Uint8Array(length);
+        for (let i = 0; i < length; i += 1) {
+            tempUint8[i] = this.uint8[this.index];
+            this.index += 1;
+        }
+        return tempUint8;
+    }
+}

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

@@ -0,0 +1,104 @@
+import { getUint8Sum, readUint8, bin2String, bin2Boolean, bin2Float, errorHandle } from '../utils';
+
+export default function parseScripTag(scripTagBody) {
+    const readScripTag = readUint8(scripTagBody);
+    const metadata = Object.create(null);
+    const amf1 = Object.create(null);
+    const amf2 = Object.create(null);
+
+    [amf1.type] = readScripTag(1);
+    errorHandle(amf1.type === 2, `AMF: [amf1] type expect 2, but got ${amf1.type}`);
+    amf1.size = getUint8Sum(readScripTag(2));
+    amf1.string = bin2String(readScripTag(amf1.size));
+
+    [amf2.type] = readScripTag(1);
+    errorHandle(amf2.type === 8, `AMF: [amf1] type expect 8, but got ${amf2.type}`);
+    amf2.size = getUint8Sum(readScripTag(4));
+    amf2.metaData = Object.create(null);
+
+    function getValue(type) {
+        let value = null;
+        if (type !== undefined) {
+            switch (type) {
+                case 0:
+                    value = bin2Float(readScripTag(8));
+                    break;
+                case 1:
+                    value = bin2Boolean(readScripTag(1)[0]);
+                    break;
+                case 2: {
+                    const valueLength = getUint8Sum(readScripTag(2));
+                    value = bin2String(readScripTag(valueLength));
+                    break;
+                }
+                case 3: {
+                    value = Object.create(null);
+                    let endObject = false;
+                    while (!endObject && readScripTag.index < scripTagBody.length) {
+                        const nameLength = getUint8Sum(readScripTag(2));
+                        const name = bin2String(readScripTag(nameLength));
+                        const type = readScripTag(1)[0];
+                        if (name) {
+                            value[name] = getValue(type);
+                        }
+                        if (type === 9) {
+                            endObject = true;
+                        }
+                    }
+                    break;
+                }
+                case 8: {
+                    value = Object.create(null);
+                    let endArray = false;
+                    while (!endArray && readScripTag.index < scripTagBody.length) {
+                        const nameLength = getUint8Sum(readScripTag(2));
+                        const name = bin2String(readScripTag(nameLength));
+                        const type = readScripTag(1)[0];
+                        if (name) {
+                            value[name] = getValue(type);
+                        }
+                        if (type === 9) {
+                            endArray = true;
+                        }
+                    }
+                    break;
+                }
+                case 10: {
+                    const valueLength = getUint8Sum(readScripTag(4));
+                    value = [];
+                    for (let index = 0; index < valueLength; index += 1) {
+                        const itemType = readScripTag(1)[0];
+                        value.push(getValue(itemType));
+                    }
+                    break;
+                }
+                case 12: {
+                    const valueLength = getUint8Sum(readScripTag(4));
+                    value = bin2String(readScripTag(valueLength));
+                    break;
+                }
+                default:
+                    console.log(readScripTag(scripTagBody.length - readScripTag.index - 1));
+                    errorHandle(false, `AMF: Unknown metaData type: ${type}`);
+                    break;
+            }
+        }
+        return value;
+    }
+
+    while (readScripTag.index < scripTagBody.length) {
+        const nameLength = getUint8Sum(readScripTag(2));
+        const name = bin2String(readScripTag(nameLength));
+        const type = readScripTag(1)[0];
+        if (name) {
+            amf2.metaData[name] = getValue(type);
+        }
+    }
+
+    errorHandle(readScripTag.index === scripTagBody.length, 'AMF: Seems to be incompletely parsed');
+    errorHandle(amf2.size === Object.keys(amf2.metaData).length, 'AMF: [amf2] length does not match');
+
+    metadata.amf1 = amf1;
+    metadata.amf2 = amf2;
+    return metadata;
+}

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

@@ -0,0 +1,11 @@
+export default function readFile(flv, file) {
+    flv.emit('flvFetchStart');
+    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

@@ -1,22 +1,58 @@
-import Flv from './flv';
+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';
+import config from './config';
 
-function artplayerPluginFlv(art) {
-    let flv = null;
+let id = 0;
+class Flv extends Emitter {
+    constructor(options) {
+        super();
+        this.options = Object.assign({}, Flv.DEFAULTS, options);
+        checkSupport(this.options);
+        this.events = new EventProxy(this);
+        this.workers = new CreatWorker(this);
+        this.mediaSource = new CreatMediaSource(this);
+        this.flvData = new FlvParse(this);
+        id += 1;
+        this.id = id;
+        Flv.instances.push(this);
+    }
 
-    art.on('destroy', () => {
-        if (flv) {
-            flv.destroy();
-        }
-    });
+    static get DEFAULTS() {
+        return {
+            mediaElement: '',
+            url: '',
+            debug: false,
+        };
+    }
 
-    return {
-        flv,
-        init: (mediaElement, url) => {
-            flv = new Flv(mediaElement, url);
-            flv.load();
-        },
-    };
+    static get version() {
+        return '__VERSION__';
+    }
+
+    static get config() {
+        return config;
+    }
+
+    static get utils() {
+        return utils;
+    }
+
+    destroy() {
+        this.events.destroy();
+        this.workers.killAll();
+        Flv.instances.splice(Flv.instances.indexOf(this), 1);
+        this.emit('destroy');
+    }
 }
 
-window.artplayerPluginFlv = artplayerPluginFlv;
-export default artplayerPluginFlv;
+Object.defineProperty(Flv, 'instances', {
+    value: [],
+});
+
+window.Flv = Flv;
+export default Flv;

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

@@ -0,0 +1,24 @@
+import { errorHandle } from '.';
+
+export default function checkSupport(options) {
+    const { mediaElement, url } = options;
+    errorHandle(mediaElement instanceof HTMLVideoElement, 'The first parameter is not a video tag element');
+    errorHandle(
+        typeof url === 'string' || (url instanceof File && url.type === 'video/x-flv'),
+        'The second parameter is not a string type or flv file',
+    );
+
+    const MP4H264MimeCodec = 'video/mp4; codecs="avc1.42001E, mp4a.40.2"';
+    const canPlay = mediaElement.canPlayType(MP4H264MimeCodec);
+    errorHandle(
+        window.MediaSource &&
+            window.MediaSource.isTypeSupported(MP4H264MimeCodec) &&
+            (canPlay === 'probably' || canPlay === 'maybe'),
+        `Unsupported MIME type or codec: ${MP4H264MimeCodec}`,
+    );
+
+    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/flvError.js

@@ -1,4 +1,4 @@
-export class FlvError extends Error {
+export default class FlvError extends Error {
     constructor(message, context) {
         super(message);
         if (typeof Error.captureStackTrace === 'function') {
@@ -6,10 +6,4 @@ export class FlvError extends Error {
         }
         this.name = 'FlvError';
     }
-}
-
-export function errorHandle(condition, msg) {
-    if (!condition) {
-        throw new FlvError(msg);
-    }
-}
+} 

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

@@ -0,0 +1,63 @@
+import FlvError from './flvError';
+
+export function errorHandle(condition, msg) {
+    if (!condition) {
+        throw new FlvError(msg);
+    }
+}
+
+export function mergeTypedArrays(a, b) {
+    const c = new a.constructor(a.length + b.length);
+    c.set(a);
+    c.set(b, a.length);
+    return c;
+}
+
+export function sleep(ms = 0) {
+    return new Promise(resolve => setTimeout(resolve, ms));
+}
+
+export function getUint8Sum(arr) {
+    return arr.reduce((totle, num, index) => totle + num * 256 ** (arr.length - index - 1), 0);
+}
+
+export function string2Bin(str) {
+    const result = [];
+    for (let i = 0; i < str.length; i += 1) {
+        result.push(Number(str.charCodeAt(i).toString(10)));
+    }
+    return result;
+}
+
+export function bin2String(array) {
+    return String.fromCharCode.call(String, ...array);
+}
+
+export function bin2Float(array) {
+    const view = new DataView(new ArrayBuffer(array.length));
+    array.forEach((b, i) => {
+        view.setUint8(i, b);
+    });
+    return view.getFloat64(0);
+}
+
+export function bin2Boolean(bin) {
+    return bin === 1;
+}
+
+export function log(name, msg = '') {
+    console.log(`[${name}] ${msg}`);
+}
+
+export function readUint8(uint8) {
+    let index = 0;
+    return function read(length) {
+        const tempUint8 = new Uint8Array(length);
+        for (let i = 0; i < length; i += 1) {
+            tempUint8[i] = uint8[index];
+            index += 1;
+        }
+        read.index = index;
+        return tempUint8;
+    };
+}