fix: fix hls.js live stream fetch when player destroyed

YANGFEI007 · Jul 25, 2018 · 6760f78 · 6760f78
1 parent e769b13
commit 6760f78
Show file tree

Hide file tree

Showing 18 changed files with 725 additions and 721 deletions.
diff --git a/README.md b/README.md
@@ -87,6 +87,10 @@ $ npm run dev
 
 please visit [http://localhost:9090/examples/index.html](http://localhost:9090/examples/index.html)
 
+### Note
+
+you can sparse checout the source code without examples that include large video files. [how to sparse checkout git project](https://gist.github.com/sumardi/5559896)
+
 ### License
 
 [MIT](http://opensource.org/licenses/MIT)
diff --git a/README.zh-CN.md b/README.zh-CN.md
@@ -89,6 +89,10 @@ $ npm run dev
 
 访问 [http://localhost:9090/examples/index.html](http://localhost:9090/examples/index.html)
 
+### Note
+
+如果你只对源码感兴趣可以使用 Git 的稀疏检出功能忽略 examples 目录，里面有比较大的视频文件。[如何使用 Git 的sparse checkout](https://gist.github.com/sumardi/5559896)
+
 ### License
 
 [MIT](http://opensource.org/licenses/MIT)
diff --git a/packages/xgplayer-flv.js/src/flv/utils/logger.js b/packages/xgplayer-flv.js/src/flv/utils/logger.js
@@ -16,125 +16,118 @@
  * limitations under the License.
  */
 
-import EventEmitter from 'events';
+import EventEmitter from 'events'
 
 class Log {
+  static e (tag, msg) {
+    if (!tag || Log.FORCE_GLOBAL_TAG) { tag = Log.GLOBAL_TAG }
 
-    static e(tag, msg) {
-        if (!tag || Log.FORCE_GLOBAL_TAG)
-            tag = Log.GLOBAL_TAG;
+    let str = `[${tag}] > ${msg}`
 
-        let str = `[${tag}] > ${msg}`;
-
-        if (Log.ENABLE_CALLBACK) {
-            Log.emitter.emit('log', 'error', str);
-        }
-
-        if (!Log.ENABLE_ERROR) {
-            return;
-        }
+    if (Log.ENABLE_CALLBACK) {
+      Log.emitter.emit('log', 'error', str)
+    }
 
-        if (console.error) {
-            console.error(str);
-        } else if (console.warn) {
-            console.warn(str);
-        } else {
-            console.log(str);
-        }
+    if (!Log.ENABLE_ERROR) {
+      return
     }
 
-    static i(tag, msg) {
-        if (!tag || Log.FORCE_GLOBAL_TAG)
-            tag = Log.GLOBAL_TAG;
+    if (console.error) {
+      console.error(str)
+    } else if (console.warn) {
+      console.warn(str)
+    } else {
+      console.log(str)
+    }
+  }
 
-        let str = `[${tag}] > ${msg}`;
+  static i (tag, msg) {
+    if (!tag || Log.FORCE_GLOBAL_TAG) { tag = Log.GLOBAL_TAG }
 
-        if (Log.ENABLE_CALLBACK) {
-            Log.emitter.emit('log', 'info', str);
-        }
+    let str = `[${tag}] > ${msg}`
 
-        if (!Log.ENABLE_INFO) {
-            return;
-        }
+    if (Log.ENABLE_CALLBACK) {
+      Log.emitter.emit('log', 'info', str)
+    }
 
-        if (console.info) {
-            console.info(str);
-        } else {
-            console.log(str);
-        }
+    if (!Log.ENABLE_INFO) {
+      return
     }
 
-    static w(tag, msg) {
-        if (!tag || Log.FORCE_GLOBAL_TAG)
-            tag = Log.GLOBAL_TAG;
+    if (console.info) {
+      console.info(str)
+    } else {
+      console.log(str)
+    }
+  }
 
-        let str = `[${tag}] > ${msg}`;
+  static w (tag, msg) {
+    if (!tag || Log.FORCE_GLOBAL_TAG) { tag = Log.GLOBAL_TAG }
 
-        if (Log.ENABLE_CALLBACK) {
-            Log.emitter.emit('log', 'warn', str);
-        }
+    let str = `[${tag}] > ${msg}`
 
-        if (!Log.ENABLE_WARN) {
-            return;
-        }
+    if (Log.ENABLE_CALLBACK) {
+      Log.emitter.emit('log', 'warn', str)
+    }
 
-        if (console.warn) {
-            console.warn(str);
-        } else {
-            console.log(str);
-        }
+    if (!Log.ENABLE_WARN) {
+      return
     }
 
-    static d(tag, msg) {
-        if (!tag || Log.FORCE_GLOBAL_TAG)
-            tag = Log.GLOBAL_TAG;
+    if (console.warn) {
+      console.warn(str)
+    } else {
+      console.log(str)
+    }
+  }
 
-        let str = `[${tag}] > ${msg}`;
+  static d (tag, msg) {
+    if (!tag || Log.FORCE_GLOBAL_TAG) { tag = Log.GLOBAL_TAG }
 
-        if (Log.ENABLE_CALLBACK) {
-            Log.emitter.emit('log', 'debug', str);
-        }
+    let str = `[${tag}] > ${msg}`
 
-        if (!Log.ENABLE_DEBUG) {
-            return;
-        }
+    if (Log.ENABLE_CALLBACK) {
+      Log.emitter.emit('log', 'debug', str)
+    }
 
-        if (console.debug) {
-            console.debug(str);
-        } else {
-            console.log(str);
-        }
+    if (!Log.ENABLE_DEBUG) {
+      return
     }
 
-    static v(tag, msg) {
-        if (!tag || Log.FORCE_GLOBAL_TAG)
-            tag = Log.GLOBAL_TAG;
+    if (console.debug) {
+      console.debug(str)
+    } else {
+      console.log(str)
+    }
+  }
 
-        let str = `[${tag}] > ${msg}`;
+  static v (tag, msg) {
+    if (!tag || Log.FORCE_GLOBAL_TAG) { tag = Log.GLOBAL_TAG }
 
-        if (Log.ENABLE_CALLBACK) {
-            Log.emitter.emit('log', 'verbose', str);
-        }
+    let str = `[${tag}] > ${msg}`
 
-        if (!Log.ENABLE_VERBOSE) {
-            return;
-        }
+    if (Log.ENABLE_CALLBACK) {
+      Log.emitter.emit('log', 'verbose', str)
+    }
 
-        console.log(str);
+    if (!Log.ENABLE_VERBOSE) {
+      return
     }
 
+    console.log(str)
+  }
 }
 
-Log.GLOBAL_TAG = 'flv.js';
-Log.FORCE_GLOBAL_TAG = false;
-Log.ENABLE_ERROR = true;
-Log.ENABLE_INFO = true;
-Log.ENABLE_WARN = true;
-Log.ENABLE_DEBUG = true;
-Log.ENABLE_VERBOSE = true;
+Log.GLOBAL_TAG = 'flv.js'
+Log.FORCE_GLOBAL_TAG = false
+Log.ENABLE_ERROR = true
+Log.ENABLE_INFO = true
+Log.ENABLE_WARN = true
+Log.ENABLE_DEBUG = true
+Log.ENABLE_VERBOSE = true
 
-Log.ENABLE_CALLBACK = false;
+Log.ENABLE_CALLBACK = false
 
-Log.emitter = new EventEmitter();
+Log.emitter = new EventEmitter()
 
-export default Log;
+export default Log
diff --git a/packages/xgplayer-flv/src/Flv.js b/packages/xgplayer-flv/src/Flv.js
@@ -73,7 +73,6 @@ export default class Flv {
           this.isSeeking = false
           if (hasPendingFragments) {
             const fragment = pendingFragments.shift()
-            console.log(fragment)
             if (!mse.appendBuffer(fragment.data)) {
               pendingFragments.unshift(fragment)
             } else {
@@ -163,7 +162,6 @@ export default class Flv {
           if (!mse.appendBuffer(fragment.data)) {
             pendingFragments.unshift(fragment)
           } else {
-            console.log(fragment)
             this._player.emit('cacheupdate', this._player)
           }
         }

diff --git a/packages/xgplayer-flv/src/parse/MainParser.js b/packages/xgplayer-flv/src/parse/MainParser.js
@@ -255,7 +255,6 @@ export default class MainParser extends Demuxer {
       if (!this.handleMediaFragment(fragment)) {
         this._pendingFragments.unshift(fragment)
       } else {
-        console.log(fragment)
         this.handleSeekEnd()
         this._player.emit('cacheupdate', this._player)
       }
@@ -334,7 +333,6 @@ export default class MainParser extends Demuxer {
   }
 
   seek (target) {
-    console.log(this.uid)
     this.loadTask.cancel()
     const {keyframes = {}, videoTimeScale} = this._store
     let seekStart = target * videoTimeScale

diff --git a/packages/xgplayer-hls.js/browser/index.js b/packages/xgplayer-hls.js/browser/index.js
diff --git a/packages/xgplayer-hls.js/dist/index.js b/packages/xgplayer-hls.js/dist/index.js
diff --git a/packages/xgplayer-hls.js/src/index.js b/packages/xgplayer-hls.js/src/index.js
@@ -10,6 +10,7 @@ class HlsJsPlayer extends Player {
     let url = player.config.url
     let hls
     hls = new Hls(this.hlsOpts)
+    this.hls = hls
     hls.on(Hls.Events.MEDIA_ATTACHED, () => {
       hls.loadSource(url)
     })
@@ -40,6 +41,9 @@ class HlsJsPlayer extends Player {
     this.once('complete', () => {
       hls.attachMedia(player.video)
     })
+    this.once('destroy', () => {
+      hls.stopLoad()
+    })
   }
 }
 

diff --git a/packages/xgplayer-hls/browser/index.js b/packages/xgplayer-hls/browser/index.js
diff --git a/packages/xgplayer-hls/dist/index.js b/packages/xgplayer-hls/dist/index.js
diff --git a/packages/xgplayer-hls/src/hls.js b/packages/xgplayer-hls/src/hls.js
@@ -6,7 +6,6 @@ import Buffer from './fmp4/buffer'
 import MP4 from './fmp4/mp4'
 import Task from './media/task'
 import MSE from './media/mse'
-import Download from './util/download'
 
 class HLS {
   constructor (url) {
@@ -50,7 +49,7 @@ class HLS {
   seek (time) {
     let segment = this.m3u8.seek(time)
     if (segment.length && !segment[0].downloaded) {
-      new Task(segment[0].url, (res) => {
+      const tasker = new Task(segment[0].url, (res) => {
         let ts = new Parser(res)
         this.parse(ts)
         let url = segment[0].url
@@ -209,10 +208,6 @@ class HLS {
       }
     }
   }
-
-  download () {
-    new Download('ts.mp4', this.cache.buffer)
-  }
 }
 
 export default HLS
diff --git a/packages/xgplayer-hls/src/index.js b/packages/xgplayer-hls/src/index.js
@@ -47,6 +47,8 @@ const hlsplayer = function () {
               }
             }
           }, 200)
+        } else {
+          clearTimeout(hls.m3u8.timer)
         }
       })
       _start.call(player, hls.mse.url)
@@ -77,9 +79,7 @@ const hlsplayer = function () {
     player.on('waiting', () => {
       if (hls.type === 'live') {
         let buffered = player.buffered
-
         let length = buffered.length
-
         let currentTime = player.currentTime
         for (let i = 0; i < length; i++) {
           if (buffered.start(i) > currentTime) {
@@ -91,6 +91,10 @@ const hlsplayer = function () {
         hls.seek()
       }
     })
+
+    player.once('destroy', () => {
+      clearTimeout(hls.m3u8.timer)
+    })
   }
 }