fix: Fix hung playback on rapid seek (#3479)

streaming_engine maintains a reference to ongoing fetch operations for
video, audio and text segments. Using these references, the fetch
operations may be cancelled (e.g. due to a seek).
Immediately following a seek, fetch operations were started for init
segments and media segments. Upon completion of the init segment
operation the reference to the media segment operation was overwritten
with null, so could not be cancelled.

This was particularly evident on platforms where the seek bar is
dragged, as this produces multiple seeks. When dragging backwards it
was possible for the buffer to contain segments beyond the play head.

The solution is to await completion of the init segment fetch before
starting the media segment fetch.

Fixed #3384

AUTHORS

@@ -67,6 +67,7 @@ Toshihiro Suzuki <[email protected]>
 uStudio Inc. <*@ustudio.com>
 Verizon Digital Media Services <*@verizondigitalmedia.com>
 Vincent Valot <[email protected]>
+Wayne Morgan <[email protected]>
 Prakash <[email protected]>
 
 

CONTRIBUTORS

@@ -102,6 +102,7 @@ Toshihiro Suzuki <[email protected]>
 Vasanth Polipelli <[email protected]>
 Vignesh Venkatasubramanian <[email protected]>
 Vincent Valot <[email protected]>
+Wayne Morgan <[email protected]>
 Yohann Connell <[email protected]>
 Adrián Gómez Llorente <[email protected]>
 Prakash Duggaraju <[email protected]>

lib/media/streaming_engine.js

@@ -1188,18 +1188,21 @@ shaka.media.StreamingEngine = class {
 
     mediaState.performingUpdate = true;
 
-    const initSourceBuffer = this.initSourceBuffer_(mediaState, reference);
-
-    shaka.log.v2(logPrefix, 'fetching segment');
     try {
+      await this.initSourceBuffer_(mediaState, reference);
+      this.destroyer_.ensureNotDestroyed();
+      if (this.fatalError_) {
+        return;
+      }
+
+      shaka.log.v2(logPrefix, 'fetching segment');
       const isMP4 = stream.mimeType == 'video/mp4' ||
               stream.mimeType == 'audio/mp4';
       const isReadableStreamSupported = window.ReadableStream;
       // Enable MP4 low latency streaming with ReadableStream chunked data.
       if (this.config_.lowLatencyMode && isReadableStreamSupported && isMP4) {
         let remaining = new Uint8Array(0);
         const streamDataCallback = async (data) => {
-          await initSourceBuffer;
           this.destroyer_.ensureNotDestroyed();
           if (this.fatalError_) {
             return;
@@ -1237,7 +1240,7 @@ shaka.media.StreamingEngine = class {
             'ReadableStream is not supported by the browser.');
         }
         const fetchSegment = this.fetch_(mediaState, reference);
-        const results = await Promise.all([initSourceBuffer, fetchSegment]);
+        const result = await fetchSegment;
         this.destroyer_.ensureNotDestroyed();
         if (this.fatalError_) {
           return;
@@ -1254,7 +1257,7 @@ shaka.media.StreamingEngine = class {
           return;
         }
         await this.append_(
-            mediaState, presentationTime, stream, reference, results[1]);
+            mediaState, presentationTime, stream, reference, result);
       }
 
       this.destroyer_.ensureNotDestroyed();

test/media/streaming_engine_unit.js

@@ -835,7 +835,7 @@ describe('StreamingEngine', () => {
     // This would let some media types buffer faster than others if unchecked.
     netEngineDelays.text = 0.1;
     netEngineDelays.audio = 1.0;
-    netEngineDelays.video = 10.0;
+    netEngineDelays.video = 5.0; // Need init segment and media segment
 
     mediaSourceEngine.appendBuffer.and.callFake((type, data, start, end) => {
       // Call to the underlying implementation.
@@ -2170,13 +2170,13 @@ describe('StreamingEngine', () => {
               .bind(mediaSourceEngine);
 
       mediaSourceEngine.remove.and.callFake((type, start, end) => {
-        expect(presentationTimeInSeconds).toBe(20);
+        expect(presentationTimeInSeconds).toBeGreaterThanOrEqual(20);
         expect(start).toBe(0);
         expect(end).toBe(10);
 
         if (mediaSourceEngine.remove.calls.count() == 3) {
           mediaSourceEngine.remove.and.callFake((type, start, end) => {
-            expect(presentationTimeInSeconds).toBe(30);
+            expect(presentationTimeInSeconds).toBeGreaterThanOrEqual(30);
             expect(start).toBe(10);
             expect(end).toBe(20);
             return originalRemove(type, start, end);