修复videobuffer时间戳为负数的情况造成播放卡顿

langhuihui · Jun 20, 2022 · 1cbaff2 · 1cbaff2 · vercel · Jun 20, 2022
1 parent cc862dc
commit 1cbaff2
Show file tree

Hide file tree

Showing 12 changed files with 65 additions and 37 deletions.
diff --git a/demo/public/decoder.js b/demo/public/decoder.js
diff --git a/demo/public/decoder.js.map b/demo/public/decoder.js.map
diff --git a/demo/public/jessibuca.js b/demo/public/jessibuca.js
diff --git a/demo/public/jessibuca.js.map b/demo/public/jessibuca.js.map
diff --git a/demo/public/ws-demo.html b/demo/public/ws-demo.html
@@ -136,7 +136,7 @@
             },
             forceNoOffscreen: forceNoOffscreen,
             isNotMute: false,
-            heartTimeout: 100
+            heartTimeout: 100,
         },);
 
         jessibuca.onLog = msg => console.error(msg);
@@ -145,9 +145,9 @@
         jessibuca.onPlay = () => console.log('onPlay');
         jessibuca.onFullscreen = msg => console.log('onFullscreen', msg);
         jessibuca.onMute = msg => console.log('onMute', msg);
-        jessibuca.on('stats', (stats) => {
-            console.log('stats', stats);
-        })
+        // jessibuca.on('stats', (stats) => {
+        //     console.log('stats', stats);
+        // })
         $player.style.display = 'inline-block';
         $pause.style.display = 'none';
         $destroy.style.display = 'none';

diff --git a/dist/decoder.js b/dist/decoder.js
diff --git a/dist/jessibuca.js b/dist/jessibuca.js
diff --git a/src/constant/index.js b/src/constant/index.js
@@ -14,6 +14,7 @@ export const DEMUX_TYPE = {
 // default player options
 export const DEFAULT_PLAYER_OPTIONS = {
     videoBuffer: 1000, //1000ms == 1 second
+    videoBufferDelay: 1000,// 1000ms
     isResize: true,
     isFullResize: false, //
     isFlv: false,

diff --git a/src/decoder/mediaSource.js b/src/decoder/mediaSource.js
@@ -150,12 +150,12 @@ export default class MseDecoder extends Emitter {
         let dts = ts;
         // player.debug.log('MediaSource', '_decodeVideo', ts);
         const $video = player.video.$videoElement;
-
+        const videoBufferDelay = player._opt.videoBufferDelay;
         if ($video.buffered.length > 1) {
             this.removeBuffer($video.buffered.start(0), $video.buffered.end(0));
             this.timeInit = false;
         }
-        if (this.dropping && dts - this.cacheTrack.dts > 1000) {
+        if (this.dropping && dts - this.cacheTrack.dts > videoBufferDelay) {
             this.dropping = false;
             this.cacheTrack = {};
         } else if (this.cacheTrack && dts > this.cacheTrack.dts) {

diff --git a/src/demux/commonLoader.js b/src/demux/commonLoader.js
@@ -38,7 +38,13 @@ export default class CommonLoader extends Emitter {
             this.delay = -1;
         } else {
             if (timestamp) {
-                this.delay = (Date.now() - this.startTimestamp) - (timestamp - this.firstTimestamp)
+                const localTimestamp = (Date.now() - this.startTimestamp);
+                const timeTimestamp = (timestamp - this.firstTimestamp);
+                if (localTimestamp >= timeTimestamp) {
+                    this.delay = localTimestamp - timeTimestamp;
+                } else {
+                    this.delay = timeTimestamp - localTimestamp;
+                }
             }
         }
         return this.delay
@@ -57,6 +63,7 @@ export default class CommonLoader extends Emitter {
         let _loop = () => {
             let data;
             const videoBuffer = this.player._opt.videoBuffer;
+            const videoBufferDelay = this.player._opt.videoBufferDelay;
             if (this.bufferList.length) {
                 if (this.dropping) {
                     // this.player.debug.log('common dumex', `is dropping`);
@@ -81,7 +88,7 @@ export default class CommonLoader extends Emitter {
                         // this.player.debug.log('common dumex', `delay is -1`);
                         this.bufferList.shift()
                         this._doDecoderDecode(data);
-                    } else if (this.delay > videoBuffer + 1000) {
+                    } else if (this.delay > videoBuffer + videoBufferDelay) {
                         // this.player.debug.log('common dumex', `delay is ${this.delay}, set dropping is true`);
                         this.resetDelay();
                         this.dropping = true

diff --git a/src/worker.js b/src/worker.js
@@ -87,7 +87,8 @@ Module.postRun = function () {
             forceNoOffscreen: DEFAULT_PLAYER_OPTIONS.forceNoOffscreen,
             useWCS: DEFAULT_PLAYER_OPTIONS.useWCS,
             videoBuffer: DEFAULT_PLAYER_OPTIONS.videoBuffer,
-            openWebglAlignment: DEFAULT_PLAYER_OPTIONS.openWebglAlignment
+            openWebglAlignment: DEFAULT_PLAYER_OPTIONS.openWebglAlignment,
+            videoBufferDelay: DEFAULT_PLAYER_OPTIONS.videoBufferDelay
         },
         useOffscreen: function () {
             return !decoder.opt.forceNoOffscreen && typeof OffscreenCanvas != 'undefined';
@@ -246,27 +247,22 @@ Module.postRun = function () {
                     } else {
                         var data = buffer[0];
                         if (this.getDelay(data.ts) === -1) {
-                            decoder.opt.debug && console.log('Jessibuca: [worker]: common dumex delay is -1');
+                            // decoder.opt.debug && console.log('Jessibuca: [worker]: common dumex delay is -1');
                             buffer.shift();
                             _doDecode(data);
-                        } else if (this.delay > decoder.opt.videoBuffer + 1000) {
-                            decoder.opt.debug && console.log('Jessibuca: [worker]:', `delay is ${this.delay}, set dropping is true`);
+                        } else if (this.delay > decoder.opt.videoBuffer + decoder.opt.videoBufferDelay) {
+                            // decoder.opt.debug && console.log('Jessibuca: [worker]:', `delay is ${this.delay}, set dropping is true`);
                             this.resetDelay();
                             this.dropping = true;
                         } else {
                             while (buffer.length) {
                                 data = buffer[0];
                                 if (this.getDelay(data.ts) > decoder.opt.videoBuffer) {
-                                    decoder.opt.debug && console.log('Jessibuca: [worker]:', `delay is ${this.delay}, decode`);
+                                    // decoder.opt.debug && console.log('Jessibuca: [worker]:', `delay is ${this.delay}, decode`);
                                     buffer.shift();
                                     _doDecode(data);
                                 } else {
-                                    decoder.opt.debug && console.log('Jessibuca: [worker]:', `delay is ${this.delay},opt.videoBuffer is ${decoder.opt.videoBuffer}`);
-                                    // if (this.delay < -1) {
-                                    //     this.resetDelay();
-                                    //     this.dropping = true;
-                                    //     break;
-                                    // }
+                                    // decoder.opt.debug && console.log('Jessibuca: [worker]:', `delay is ${this.delay},opt.videoBuffer is ${decoder.opt.videoBuffer}`);
                                     break;
                                 }
                             }

diff --git a/src/worker/index.js b/src/worker/index.js
@@ -101,6 +101,7 @@ export default class DecoderWorker {
             forceNoOffscreen: this.player._opt.forceNoOffscreen,
             useWCS: this.player._opt.useWCS,
             videoBuffer: this.player._opt.videoBuffer,
+            videoBufferDelay: this.player._opt.videoBufferDelay,
             openWebglAlignment: this.player._opt.openWebglAlignment
         }
         this.decoderWorker.postMessage({