@cycjimmy/jsmpeg-player 6.1.6 → 6.1.8

package/README.md

@@ -12,7 +12,7 @@
 * **[jsmpeg-player](https://github.com/cycdpo/jsmpeg-player) has been renamed to @cycjimmy/jsmpeg-player for scoped NPM package.**
 * JSMpeg player is based on [jsmpeg](https://github.com/phoboslab/jsmpeg).
 * The video must be compressed into the TS format of MPEG1 / MP2.
-* Apple device automatically plays without sound, you need to guide the user to click on the video in the lower right corner of the video icon to unlock the sound. (no similar problem in non-autoplay mode)
+* Autoplay with sound is blocked by the browser until the page receives a user gesture: Apple device automatically plays without sound, you need to guide the user to click on the video in the lower right corner of the video icon to unlock the sound. Chrome and Safari follow the same autoplay policy, where the sound stays in sync with the picture and starts as soon as the user interacts with the page, or can be unlocked right away through the same icon. (no similar problem in non-autoplay mode)
 * [Demo][github-pages-url]
 
 ## How to use
@@ -47,7 +47,7 @@ new JSMpeg.VideoElement(videoWrapper, videoUrl [, options] [, overlayOptions])
     * `autoplay`: [Boolean] Whether to start playing immediately. Default `false`.
     * `autoSetWrapperSize`: [Boolean] Whether to set the wrapper element size automatically when the video loaded. Default `false`.
     * `loop`: [Boolean] Whether to loop the video (static files only). Default `false`.**[overwrite]**
-    * `control`: [Boolean] Whether the user can control. Default `true`.
+    * `control`: [Boolean] Whether the user can control. The built-in play button and click-to-toggle apply to static files only: `ws://` / `wss://` live sources have no built-in playback control and must be driven with `play()` / `pause()`. Default `true`.
     * `decodeFirstFrame`: [Boolean] Whether to decode and display the first frame of the video. Default `true`.
     * `picMode`: [Boolean] Picture mode (no playButton). Default `false`.
     * `progressive`: [Boolean] whether to load data in chunks (static files only). Default `true`.
@@ -58,7 +58,7 @@ new JSMpeg.VideoElement(videoWrapper, videoUrl [, options] [, overlayOptions])
       * `stop`: [Function] The hook function when the video stop.
       * `load`: [Function] The hook function when the video established.
   * `overlayOptions`: [Object] More options can view the [jsmpeg options](https://github.com/phoboslab/jsmpeg#usage)
-    * `protocols`: [String | Array<String>] WebSocket subprotocols, forwarded to `new WebSocket(url, protocols)` (`wss://` URLs only). Can carry a Bearer token. Default `undefined`. See [WebSocket authentication](#websocket-authentication).
+    * `protocols`: [String | Array<String>] WebSocket subprotocols, forwarded to `new WebSocket(url, protocols)` (`ws://` and `wss://` URLs only). Can carry a Bearer token. Default `undefined`. See [WebSocket authentication](#websocket-authentication).
     * `preserveDrawingBuffer`: [Boolean] Keep the WebGL drawing buffer so the canvas can be read back, e.g. to take a snapshot with `canvas.toDataURL()`. Default `false`. See [Snapshot](#snapshot).
 
 * `JSMpeg.VideoElement` instance supports the following methods:

package/dist/jsmpeg-player.cjs

@@ -235,10 +235,10 @@ var VideoElement = /*#__PURE__*/function () {
       this.els.playButton.classList.add(_style.hidden);
     }
 
-    // Set up the unlock audio button for iOS devices. iOS only allows us to
-    // play audio after a user action has initiated playing. For autoplay or
-    // streaming players we set up a muted speaker icon as the button. For all
-    // others, we can simply use the play button.
+    // Set up the unlock audio button for the browsers that do not allow audio
+    // before a user action (iOS, and Chrome/Safari under their autoplay
+    // policy). For autoplay or streaming players we set up a muted speaker
+    // icon as the button. For all others, we can simply use the play button.
     if (this.player.audioOut && !this.player.audioOut.unlocked) {
       var unlockAudioElement = this.els.wrapper;
       if (this.options.autoplay || this.player.options.streaming) {
@@ -251,6 +251,12 @@ var VideoElement = /*#__PURE__*/function () {
       this.unlockAudioBound = this.onUnlockAudio.bind(this, unlockAudioElement);
       unlockAudioElement.addEventListener('touchstart', this.unlockAudioBound, false);
       unlockAudioElement.addEventListener('click', this.unlockAudioBound, true);
+
+      // Any gesture on the page may unlock the audio, so the icon has to go
+      // away even when it was not the element that was clicked.
+      this.player.audioOut.onUnlock = function () {
+        return _this.onAudioUnlocked(unlockAudioElement);
+      };
     }
   };
   _proto.initPlayButton = function initPlayButton() {
@@ -277,6 +283,15 @@ var VideoElement = /*#__PURE__*/function () {
       });
     });
   };
+  _proto.onAudioUnlocked = function onAudioUnlocked(element) {
+    if (this.els.unmuteButton) {
+      this.els.unmuteButton.classList.add(_style.hidden);
+    }
+    if (element && this.unlockAudioBound) {
+      element.removeEventListener('touchstart', this.unlockAudioBound);
+      element.removeEventListener('click', this.unlockAudioBound);
+    }
+  };
   _proto.onUnlockAudio = function onUnlockAudio(element, ev) {
     var _this3 = this;
     if (this.els.unmuteButton) {
@@ -284,11 +299,7 @@ var VideoElement = /*#__PURE__*/function () {
       ev.stopPropagation();
     }
     this.player.audioOut.unlock(function () {
-      if (_this3.els.unmuteButton) {
-        _this3.els.unmuteButton.classList.add(_style.hidden);
-      }
-      element.removeEventListener('touchstart', _this3.unlockAudioBound);
-      element.removeEventListener('click', _this3.unlockAudioBound);
+      return _this3.onAudioUnlocked(element);
     });
   };
   _proto.onClick = function onClick() {
@@ -393,6 +404,11 @@ var AjaxSource = /*#__PURE__*/function () {
     // Nothing to do here
   };
   _proto.destroy = function destroy() {
+    // destroy() may run before start(), e.g. when a player is torn down while
+    // the WASM module is still compiling and the source was never started.
+    if (!this.request) {
+      return;
+    }
     this.request.abort();
   };
   _proto.onProgress = function onProgress(ev) {
@@ -587,6 +603,12 @@ var WSSource = /*#__PURE__*/function () {
   _proto.destroy = function destroy() {
     clearTimeout(this.reconnectTimeoutId);
     this.shouldAttemptReconnect = false;
+
+    // destroy() may run before start(), e.g. when a player is torn down while
+    // the WASM module is still compiling and the socket was never opened.
+    if (!this.socket) {
+      return;
+    }
     this.socket.close();
   };
   _proto.start = function start() {
@@ -4038,11 +4060,15 @@ var MP2WASM = /*#__PURE__*/function (_BaseDecoder) {
     _this.bufferSize = options.audioBufferSize || 128 * 1024;
     _this.bufferMode = options.streaming ? BitBuffer.MODE.EVICT : BitBuffer.MODE.EXPAND;
     _this.sampleRate = 0;
+    _this.destroyed = false;
     return _this;
   }
   _inheritsLoose(MP2WASM, _BaseDecoder);
   var _proto = MP2WASM.prototype;
   _proto.initializeWasmDecoder = function initializeWasmDecoder() {
+    if (this.destroyed) {
+      return;
+    }
     if (!this.module.instance) {
       console.warn('JSMpeg: WASM module not compiled yet');
       return;
@@ -4052,10 +4078,23 @@ var MP2WASM = /*#__PURE__*/function (_BaseDecoder) {
     this.decoder = this.functions._mp2_decoder_create(this.bufferSize, this.bufferMode);
   };
   _proto.destroy = function destroy() {
+    // A source can still deliver one last chunk inside the very callback that
+    // destroys the player, so nothing may reach the module from now on.
+    this.destroyed = true;
     if (!this.decoder) {
       return;
     }
     this.functions._mp2_decoder_destroy(this.decoder);
+    // The pointer refers to a freed block now, and the module may hand the same
+    // address to the decoder of the next player: it must never be used again.
+    this.decoder = null;
+    this.canPlay = false;
+  };
+  _proto.write = function write(pts, buffers) {
+    if (this.destroyed) {
+      return;
+    }
+    _BaseDecoder.prototype.write.call(this, pts, buffers);
   };
   _proto.bufferGetIndex = function bufferGetIndex() {
     if (!this.decoder) {
@@ -4071,9 +4110,16 @@ var MP2WASM = /*#__PURE__*/function (_BaseDecoder) {
     this.functions._mp2_decoder_set_index(this.decoder, index);
   };
   _proto.bufferWrite = function bufferWrite(buffers) {
+    if (this.destroyed) {
+      return 0;
+    }
     if (!this.decoder) {
       this.initializeWasmDecoder();
     }
+    if (!this.decoder) {
+      // The module is not compiled yet; nothing can be written.
+      return 0;
+    }
     var totalLength = 0;
     for (var i = 0; i < buffers.length; i++) {
       totalLength += buffers[i].length;
@@ -4430,6 +4476,9 @@ var CanvasRenderer = /*#__PURE__*/function () {
   return CanvasRenderer;
 }();
 
+// Chrome grants the user activation on pointerup/touchend, not on the
+// touchstart/pointerdown that precedes them, so the touch events are paired.
+var UNLOCK_EVENTS = ['pointerdown', 'pointerup', 'keydown', 'touchend'];
 var WebAudioOut = /*#__PURE__*/function () {
   function WebAudioOut() {
     this.context = WebAudioOut.CachedContext = WebAudioOut.CachedContext || new (window.AudioContext || window.webkitAudioContext)();
@@ -4445,13 +4494,27 @@ var WebAudioOut = /*#__PURE__*/function () {
     this.wallclockStartTime = 0;
     this.volume = 1;
     this.enabled = true;
-    this.unlocked = !WebAudioOut.NeedsUnlocking();
+    this.sources = [];
+    this.skippedAudio = false;
+    this.destroyed = false;
+    this.gestureListener = null;
+    this.unlockCallback = null;
+    this.onUnlock = null;
+    this.unlocked = !WebAudioOut.NeedsUnlocking() && WebAudioOut.IsRunning(this.context);
     Object.defineProperty(this, 'enqueuedTime', {
       get: this.getEnqueuedTime
     });
+    if (!this.unlocked) {
+      this.listenForGesture();
+    }
   }
   var _proto = WebAudioOut.prototype;
   _proto.destroy = function destroy() {
+    this.destroyed = true;
+    this.unlockCallback = null;
+    this.onUnlock = null;
+    this.removeGestureListener();
+    this.stopSources();
     this.gain.disconnect();
     this.context._connections--;
     if (this.context._connections === 0) {
@@ -4460,20 +4523,46 @@ var WebAudioOut = /*#__PURE__*/function () {
     }
   };
   _proto.play = function play(sampleRate, left, right) {
-    if (!this.enabled) {
+    var _this = this;
+    if (!this.enabled || this.destroyed) {
       return;
     }
 
-    // If the context is not unlocked yet, we simply advance the start time
-    // to "fake" actually playing audio. This will keep the video in sync.
-    if (!this.unlocked) {
+    // Browsers that need no explicit unlock resume the context by themselves
+    // once the page has been interacted with, so the unlock does not necessarily
+    // go through unlock(). iOS keeps requiring the gesture.
+    if (!this.unlocked && !WebAudioOut.NeedsUnlocking() && WebAudioOut.IsRunning(this.context)) {
+      this.onUnlocked();
+    }
+
+    // A context that is not running, or that has not been unlocked yet, cannot
+    // play anything: the browser autoplay policy keeps it suspended until the
+    // page has received a user gesture, and its currentTime does not advance
+    // meanwhile. Scheduling buffers against it would queue all the audio
+    // decoded in the meantime and play it back from the very beginning once
+    // the context resumes. We simply advance the start time to "fake"
+    // actually playing audio instead. This will keep the video in sync.
+    if (!this.isPlayable()) {
+      this.listenForGesture();
       var ts = Now();
       if (this.wallclockStartTime < ts) {
         this.wallclockStartTime = ts;
       }
       this.wallclockStartTime += left.length / sampleRate;
+      this.skippedAudio = true;
       return;
     }
+
+    // The audio is available again: whatever was queued while it could not be
+    // played is dropped and the time base is rebuilt, so the audio joins the
+    // picture at the current point in time instead of staying behind it. The
+    // audio decoded meanwhile is lost once, which is what keeps it in sync
+    // with the picture.
+    if (this.skippedAudio) {
+      this.skippedAudio = false;
+      this.stopSources();
+      this.resetEnqueuedTime();
+    }
     this.gain.gain.value = this.volume;
     var buffer = this.context.createBuffer(2, left.length, sampleRate);
     buffer.getChannelData(0).set(left);
@@ -4481,6 +4570,13 @@ var WebAudioOut = /*#__PURE__*/function () {
     var source = this.context.createBufferSource();
     source.buffer = buffer;
     source.connect(this.destination);
+    source.onended = function () {
+      var index = _this.sources.indexOf(source);
+      if (index !== -1) {
+        _this.sources.splice(index, 1);
+      }
+    };
+    this.sources.push(source);
     var now = this.context.currentTime;
     var duration = buffer.duration;
     if (this.startTime < now) {
@@ -4492,11 +4588,13 @@ var WebAudioOut = /*#__PURE__*/function () {
     this.wallclockStartTime += duration;
   };
   _proto.stop = function stop() {
-    // Meh; there seems to be no simple way to get a list of currently
-    // active source nodes from the Audio Context, and maintaining this
-    // list ourselfs would be a pain, so we just set the gain to 0
-    // to cut off all enqueued audio instantly.
+    // Cut off everything that is still queued: the gain alone would only mute
+    // the buffers that are already scheduled, and they would become audible
+    // again as soon as play() restores it. The time base is rebuilt so the
+    // next buffer joins the current context time instead of the old queue.
     this.gain.gain.value = 0;
+    this.stopSources();
+    this.resetEnqueuedTime();
   };
   _proto.getEnqueuedTime = function getEnqueuedTime() {
     // The AudioContext.currentTime is only updated every so often, so if we
@@ -4507,16 +4605,65 @@ var WebAudioOut = /*#__PURE__*/function () {
     this.startTime = this.context.currentTime;
     this.wallclockStartTime = Now();
   };
+  _proto.isPlayable = function isPlayable() {
+    return this.unlocked && WebAudioOut.IsRunning(this.context);
+  };
+  _proto.stopSources = function stopSources() {
+    var sources = this.sources;
+    this.sources = [];
+    sources.forEach(function (source) {
+      try {
+        source.stop();
+      } catch (e) {
+        // The source has already ended and cannot be stopped any more.
+      }
+      try {
+        source.disconnect();
+      } catch (e) {
+        // It was never connected to anything.
+      }
+    });
+  };
+  _proto.listenForGesture = function listenForGesture() {
+    var _this2 = this;
+    if (this.gestureListener || this.isPlayable() || this.destroyed || WebAudioOut.NeedsUnlocking() || typeof document === 'undefined') {
+      return;
+    }
+
+    // Chrome and desktop Safari keep the context suspended until it is resumed
+    // inside a user gesture, and they do not resume it by themselves when the
+    // page is tapped somewhere else. iOS keeps requiring the unlock icon.
+    this.gestureListener = function () {
+      return _this2.unlock();
+    };
+    UNLOCK_EVENTS.forEach(function (type) {
+      document.addEventListener(type, _this2.gestureListener, true);
+    });
+  };
+  _proto.removeGestureListener = function removeGestureListener() {
+    var _this3 = this;
+    if (!this.gestureListener) {
+      return;
+    }
+    UNLOCK_EVENTS.forEach(function (type) {
+      document.removeEventListener(type, _this3.gestureListener, true);
+    });
+    this.gestureListener = null;
+  };
   _proto.unlock = function unlock(callback) {
-    if (this.unlocked) {
+    var _this4 = this;
+    // Nothing to do while the audio plays; a context that was suspended again
+    // still has to be resumed, and a destroyed one has nothing left to unlock.
+    if (this.isPlayable() || this.destroyed || this.context.state === 'closed') {
       if (callback) {
         callback();
       }
       return;
     }
-    this.unlockCallback = callback;
+    this.unlockCallback = callback || this.unlockCallback;
 
-    // Create empty buffer and play it
+    // Create empty buffer and play it, so the browsers that only start their
+    // audio pipeline from within a user gesture (iOS Safari) really unlock.
     var buffer = this.context.createBuffer(1, 1, 22050);
     var source = this.context.createBufferSource();
     source.buffer = buffer;
@@ -4528,23 +4675,73 @@ var WebAudioOut = /*#__PURE__*/function () {
     } else {
       source.noteOn(0);
     }
+
+    // Chrome and desktop Safari keep the context suspended until it is resumed
+    // explicitly, and resume() only takes effect inside a user gesture - which
+    // is exactly where unlock() is called from.
+    var resumed = null;
+    try {
+      resumed = this.context.resume && this.context.resume();
+    } catch (e) {
+      // An unsupported or interrupted context: fall through to the polling
+      // check, which also covers the browsers that resume on their own.
+    }
+    if (resumed && resumed.then) {
+      resumed.then(function () {
+        return _this4.checkIfUnlocked(source, 0);
+      }, function () {
+        return _this4.checkIfUnlocked(source, 0);
+      });
+      return;
+    }
     setTimeout(this.checkIfUnlocked.bind(this, source, 0), 0);
   };
   _proto.checkIfUnlocked = function checkIfUnlocked(source, attempt) {
-    if (source.playbackState === source.PLAYING_STATE || source.playbackState === source.FINISHED_STATE) {
-      this.unlocked = true;
-      if (this.unlockCallback) {
-        this.unlockCallback();
-        this.unlockCallback = null;
-      }
+    if (this.destroyed || this.context.state === 'closed') {
+      // The player was destroyed while waiting for the unlock.
+      this.unlockCallback = null;
+      return;
+    }
+
+    // `playbackState` and its constants were removed from the Web Audio API,
+    // and comparing two undefined values is always true, so the legacy check
+    // may only be used when the browser actually exposes it.
+    var legacyUnlocked = source.playbackState !== undefined && (source.playbackState === source.PLAYING_STATE || source.playbackState === source.FINISHED_STATE);
+    var unlocked = this.context.state ? this.context.state === 'running' : legacyUnlocked;
+    if (unlocked) {
+      this.onUnlocked();
     } else if (attempt < 10) {
       // Jeez, what a shit show. Thanks iOS!
       setTimeout(this.checkIfUnlocked.bind(this, source, attempt + 1), 100);
     }
   };
+  _proto.onUnlocked = function onUnlocked() {
+    if (this.destroyed) {
+      return;
+    }
+    this.removeGestureListener();
+
+    // The output may be unlocked again after its context had been suspended, so
+    // a pending callback is always served; only the onUnlock hook, which drives
+    // the unlock UI, is limited to the first time.
+    var firstUnlock = !this.unlocked;
+    this.unlocked = true;
+    var callbacks = [this.unlockCallback, firstUnlock ? this.onUnlock : null];
+    this.unlockCallback = null;
+    callbacks.forEach(function (callback) {
+      if (callback) {
+        callback();
+      }
+    });
+  };
   WebAudioOut.NeedsUnlocking = function NeedsUnlocking() {
     return /iPhone|iPad|iPod/i.test(navigator.userAgent);
   };
+  WebAudioOut.IsRunning = function IsRunning(context) {
+    // Old WebKit versions expose no state at all; there, NeedsUnlocking()
+    // alone decides whether the context has to be unlocked.
+    return !context.state || context.state === 'running';
+  };
   WebAudioOut.IsSupported = function IsSupported() {
     return window.AudioContext || window.webkitAudioContext;
   };
@@ -4812,6 +5009,7 @@ var Player = /*#__PURE__*/function () {
       set: this.setVolume
     });
     this.paused = true;
+    this.destroyed = false;
     this.unpauseOnShow = false;
     if (options.pauseWhenHidden !== false) {
       // Keep the bound reference so destroy() can remove this listener again,
@@ -4837,6 +5035,13 @@ var Player = /*#__PURE__*/function () {
   }
   var _proto = Player.prototype;
   _proto.startLoading = function startLoading() {
+    // The WASM module is compiled asynchronously, so this may still run through
+    // the module's init callback after destroy() has already torn the player
+    // down. Starting the source then would open a connection that nothing owns
+    // any more and restart the decode loop.
+    if (this.destroyed) {
+      return;
+    }
     this.source.start();
     if (this.autoplay) {
       this.play();
@@ -4868,10 +5073,11 @@ var Player = /*#__PURE__*/function () {
     this.isPlaying = false;
     this.paused = true;
     if (this.audio && this.audio.canPlay) {
-      // Seek to the currentTime again - audio may already be enqueued a bit
-      // further, so we have to rewind it.
+      // Seek back to the frame that is being heard: stop() drops the queue that
+      // was already enqueued further ahead, so the time has to be read first.
+      var time = this.currentTime;
       this.audioOut.stop();
-      this.seek(this.currentTime);
+      this.seek(time);
     }
     if (this.hooks.pause) {
       this.hooks.pause();
@@ -4899,6 +5105,9 @@ var Player = /*#__PURE__*/function () {
     }
   };
   _proto.destroy = function destroy() {
+    // Nothing may start the source from here on: the WASM init callback may
+    // still fire later, and destroy() itself may run before the source started.
+    this.destroyed = true;
     this.pause();
     this.source.destroy();
     this.video && this.video.destroy();
@@ -5105,6 +5314,12 @@ var FetchSource = /*#__PURE__*/function () {
   _proto.abort = function abort() {
     this.aborted = true;
   };
+  _proto.destroy = function destroy() {
+    // The player always calls source.destroy(); without this the Fetch source
+    // would throw on teardown. The pump loop cancels the reader once it sees
+    // the flag on the next chunk.
+    this.aborted = true;
+  };
   return FetchSource;
 }();