@alessmicrosystems/mpegts.js 1.8.1

package/src/player/loading-controller.ts

@@ -0,0 +1,142 @@
+/*
+ * Copyright (C) 2023 zheng qian. All Rights Reserved.
+ *
+ * @author zheng qian <xqq@xqq.im>
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import Log from '../utils/logger';
+
+class LoadingController {
+
+    private readonly TAG: string = 'LoadingController';
+
+    private _config: any = null;
+    private _media_element: HTMLMediaElement = null;
+    private _on_pause_transmuxer: () => void = null;
+    private _on_resume_transmuxer: () => void = null;
+
+    private _paused: boolean = false;
+
+    private e?: any = null;
+
+    public constructor(
+        config: any,
+        media_element: HTMLMediaElement,
+        on_pause_transmuxer: () => void,
+        on_resume_transmuxer: () => void
+    ) {
+        this._config = config;
+        this._media_element = media_element;
+        this._on_pause_transmuxer = on_pause_transmuxer;
+        this._on_resume_transmuxer = on_resume_transmuxer;
+
+        this.e = {
+            onMediaTimeUpdate: this._onMediaTimeUpdate.bind(this),
+        };
+    }
+
+    public destroy(): void {
+        this._media_element.removeEventListener('timeupdate', this.e.onMediaTimeUpdate);
+        this.e = null;
+        this._media_element = null;
+        this._config = null;
+        this._on_pause_transmuxer = null;
+        this._on_resume_transmuxer = null;
+    }
+
+    // buffered_position: in seconds
+    public notifyBufferedPositionChanged(buffered_position?: number): void {
+        if (this._config.isLive || !this._config.lazyLoad) {
+            return;
+        }
+
+        if (buffered_position == undefined) {
+            this._suspendTransmuxerIfNeeded();
+        } else {
+            this._suspendTransmuxerIfBufferedPositionExceeded(buffered_position);
+        }
+    }
+
+    private _onMediaTimeUpdate(e: Event): void {
+        if (this._paused) {
+            this._resumeTransmuxerIfNeeded();
+        }
+    }
+
+    private _suspendTransmuxerIfNeeded() {
+        const buffered: TimeRanges = this._media_element.buffered;
+        const current_time: number = this._media_element.currentTime;
+        let current_range_end = 0;
+
+        for (let i = 0; i < buffered.length; i++) {
+            const start = buffered.start(i);
+            const end = buffered.end(i);
+            if (start <= current_time && current_time < end) {
+                current_range_end = end;
+                break;
+            }
+        }
+        if (current_range_end > 0) {
+            this._suspendTransmuxerIfBufferedPositionExceeded(current_range_end);
+        }
+    }
+
+    private _suspendTransmuxerIfBufferedPositionExceeded(buffered_end: number): void {
+        const current_time = this._media_element.currentTime;
+        if (buffered_end >= current_time + this._config.lazyLoadMaxDuration && !this._paused) {
+            Log.v(this.TAG, 'Maximum buffering duration exceeded, suspend transmuxing task');
+            this.suspendTransmuxer();
+            this._media_element.addEventListener('timeupdate', this.e.onMediaTimeUpdate);
+        }
+    }
+
+    public suspendTransmuxer(): void {
+        this._paused = true;
+        this._on_pause_transmuxer();
+    }
+
+    private _resumeTransmuxerIfNeeded(): void {
+        const buffered: TimeRanges = this._media_element.buffered;
+        const current_time: number = this._media_element.currentTime;
+
+        const recover_duration = this._config.lazyLoadRecoverDuration;
+        let should_resume = false;
+
+        for (let i = 0; i < buffered.length; i++) {
+            const from = buffered.start(i);
+            const to = buffered.end(i);
+            if (current_time >= from && current_time < to) {
+                if (current_time >= to - recover_duration) {
+                    should_resume = true;
+                }
+                break;
+            }
+        }
+
+        if (should_resume) {
+            Log.v(this.TAG,  'Continue loading from paused position');
+            this.resumeTransmuxer();
+            this._media_element.removeEventListener('timeupdate', this.e.onMediaTimeUpdate);
+        }
+    }
+
+    public resumeTransmuxer(): void {
+        this._paused = false;
+        this._on_resume_transmuxer();
+    }
+
+}
+
+export default LoadingController;

package/src/player/mse-player.ts

@@ -0,0 +1,150 @@
+/*
+ * Copyright (C) 2023 zheng qian. All Rights Reserved.
+ *
+ * @author zheng qian <xqq@xqq.im>
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import Log from '../utils/logger';
+import MediaInfo from '../core/media-info';
+import PlayerEngine from './player-engine';
+import PlayerEngineMainThread from './player-engine-main-thread';
+import PlayerEngineDedicatedThread from './player-engine-dedicated-thread';
+import {InvalidArgumentException} from '../utils/exception';
+
+class MSEPlayer {
+
+    private readonly TAG: string = 'MSEPlayer';
+
+    private _type: string = 'MSEPlayer';
+
+    private _media_element: HTMLMediaElement = null;
+    private _player_engine: PlayerEngine = null;
+
+    public constructor(mediaDataSource: any, config?: any) {
+        const typeLowerCase: string = mediaDataSource.type.toLowerCase();
+        if (typeLowerCase !== 'mse'
+                && typeLowerCase !== 'mpegts'
+                && typeLowerCase !== 'm2ts'
+                && typeLowerCase !== 'flv') {
+            throw new InvalidArgumentException('MSEPlayer requires an mpegts/m2ts/flv MediaDataSource input!');
+        }
+
+        if (config && config.enableWorkerForMSE && PlayerEngineDedicatedThread.isSupported()) {
+            try {
+                this._player_engine = new PlayerEngineDedicatedThread(mediaDataSource, config);
+            } catch (error) {
+                Log.e(this.TAG,
+                    'Error while initializing PlayerEngineDedicatedThread, fallback to PlayerEngineMainThread');
+                this._player_engine = new PlayerEngineMainThread(mediaDataSource, config);
+            }
+        } else {
+            this._player_engine = new PlayerEngineMainThread(mediaDataSource, config);
+        }
+    }
+
+    public destroy(): void {
+        this._player_engine.destroy();
+        this._player_engine = null;
+        this._media_element = null;
+    }
+
+    public on(event: string, listener: (...args: any[]) => void): void {
+        this._player_engine.on(event, listener);
+    }
+
+    public off(event: string, listener: (...args: any[]) => void): void {
+        this._player_engine.off(event, listener);
+    }
+
+    public attachMediaElement(mediaElement: HTMLMediaElement): void {
+        this._media_element = mediaElement;
+        this._player_engine.attachMediaElement(mediaElement);
+    }
+
+    public detachMediaElement(): void {
+        this._media_element = null;
+        this._player_engine.detachMediaElement();
+    }
+
+    public load(): void {
+        this._player_engine.load();
+    }
+
+    public unload(): void {
+        this._player_engine.unload();
+    }
+
+    public play(): Promise<void> {
+        return this._player_engine.play();
+    }
+
+    public pause(): void {
+        this._player_engine.pause();
+    }
+
+    public get type(): string {
+        return this._type;
+    }
+
+    public get buffered(): TimeRanges {
+        return this._media_element.buffered;
+    }
+
+    public get duration(): number {
+        return this._media_element.duration;
+    }
+
+    public get volume(): number {
+        return this._media_element.volume;
+    }
+
+    public set volume(value) {
+        this._media_element.volume = value;
+    }
+
+    public get muted(): boolean {
+        return this._media_element.muted;
+    }
+
+    public set muted(muted) {
+        this._media_element.muted = muted;
+    }
+
+    public get currentTime(): number {
+        if (this._media_element) {
+            return this._media_element.currentTime;
+        }
+        return 0;
+    }
+
+    public set currentTime(seconds: number) {
+        this._player_engine.seek(seconds);
+    }
+
+    public get mediaInfo(): MediaInfo {
+        return this._player_engine.mediaInfo;
+    }
+
+    public get statisticsInfo(): any {
+        return this._player_engine.statisticsInfo;
+    }
+
+    public switchAudioPid(pid: number): void {
+        this._player_engine.switchAudioPid(pid);
+    }
+
+}
+
+export default MSEPlayer;

package/src/player/native-player.js

@@ -0,0 +1,262 @@
+/*
+ * Copyright (C) 2016 Bilibili. All Rights Reserved.
+ *
+ * @author zheng qian <xqq@xqq.im>
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import EventEmitter from 'events';
+import PlayerEvents from './player-events';
+import {createDefaultConfig} from '../config.js';
+import {InvalidArgumentException, IllegalStateException} from '../utils/exception.js';
+
+// Player wrapper for browser's native player (HTMLVideoElement) without MediaSource src.
+class NativePlayer {
+
+    constructor(mediaDataSource, config) {
+        this.TAG = 'NativePlayer';
+        this._type = 'NativePlayer';
+        this._emitter = new EventEmitter();
+
+        this._config = createDefaultConfig();
+        if (typeof config === 'object') {
+            Object.assign(this._config, config);
+        }
+
+        let typeLowerCase = mediaDataSource.type.toLowerCase();
+
+        if (typeLowerCase === 'mse'
+                || typeLowerCase === 'mpegts'
+                || typeLowerCase === 'm2ts'
+                || typeLowerCase === 'flv') {
+            throw new InvalidArgumentException('NativePlayer does\'t support mse/mpegts/m2ts/flv MediaDataSource input!');
+        }
+        if (mediaDataSource.hasOwnProperty('segments')) {
+            throw new InvalidArgumentException(`NativePlayer(${mediaDataSource.type}) doesn't support multipart playback!`);
+        }
+
+        this.e = {
+            onvLoadedMetadata: this._onvLoadedMetadata.bind(this)
+        };
+
+        this._pendingSeekTime = null;
+        this._statisticsReporter = null;
+
+        this._mediaDataSource = mediaDataSource;
+        this._mediaElement = null;
+    }
+
+    destroy() {
+        this._emitter.emit(PlayerEvents.DESTROYING);
+        if (this._mediaElement) {
+            this.unload();
+            this.detachMediaElement();
+        }
+        this.e = null;
+        this._mediaDataSource = null;
+        this._emitter.removeAllListeners();
+        this._emitter = null;
+    }
+
+    on(event, listener) {
+        if (event === PlayerEvents.MEDIA_INFO) {
+            if (this._mediaElement != null && this._mediaElement.readyState !== 0) {  // HAVE_NOTHING
+                Promise.resolve().then(() => {
+                    this._emitter.emit(PlayerEvents.MEDIA_INFO, this.mediaInfo);
+                });
+            }
+        } else if (event === PlayerEvents.STATISTICS_INFO) {
+            if (this._mediaElement != null && this._mediaElement.readyState !== 0) {
+                Promise.resolve().then(() => {
+                    this._emitter.emit(PlayerEvents.STATISTICS_INFO, this.statisticsInfo);
+                });
+            }
+        }
+        this._emitter.addListener(event, listener);
+    }
+
+    off(event, listener) {
+        this._emitter.removeListener(event, listener);
+    }
+
+    attachMediaElement(mediaElement) {
+        this._mediaElement = mediaElement;
+        mediaElement.addEventListener('loadedmetadata', this.e.onvLoadedMetadata);
+
+        if (this._pendingSeekTime != null) {
+            try {
+                mediaElement.currentTime = this._pendingSeekTime;
+                this._pendingSeekTime = null;
+            } catch (e) {
+                // IE11 may throw InvalidStateError if readyState === 0
+                // Defer set currentTime operation after loadedmetadata
+            }
+        }
+    }
+
+    detachMediaElement() {
+        if (this._mediaElement) {
+            this._mediaElement.src = '';
+            this._mediaElement.removeAttribute('src');
+            this._mediaElement.removeEventListener('loadedmetadata', this.e.onvLoadedMetadata);
+            this._mediaElement = null;
+        }
+        if (this._statisticsReporter != null) {
+            window.clearInterval(this._statisticsReporter);
+            this._statisticsReporter = null;
+        }
+    }
+
+    load() {
+        if (!this._mediaElement) {
+            throw new IllegalStateException('HTMLMediaElement must be attached before load()!');
+        }
+        this._mediaElement.src = this._mediaDataSource.url;
+
+        if (this._mediaElement.readyState > 0) {
+            this._mediaElement.currentTime = 0;
+        }
+
+        this._mediaElement.preload = 'auto';
+        this._mediaElement.load();
+        this._statisticsReporter = window.setInterval(
+            this._reportStatisticsInfo.bind(this),
+        this._config.statisticsInfoReportInterval);
+    }
+
+    unload() {
+        if (this._mediaElement) {
+            this._mediaElement.src = '';
+            this._mediaElement.removeAttribute('src');
+        }
+        if (this._statisticsReporter != null) {
+            window.clearInterval(this._statisticsReporter);
+            this._statisticsReporter = null;
+        }
+    }
+
+    play() {
+        return this._mediaElement.play();
+    }
+
+    pause() {
+        this._mediaElement.pause();
+    }
+
+    get type() {
+        return this._type;
+    }
+
+    get buffered() {
+        return this._mediaElement.buffered;
+    }
+
+    get duration() {
+        return this._mediaElement.duration;
+    }
+
+    get volume() {
+        return this._mediaElement.volume;
+    }
+
+    set volume(value) {
+        this._mediaElement.volume = value;
+    }
+
+    get muted() {
+        return this._mediaElement.muted;
+    }
+
+    set muted(muted) {
+        this._mediaElement.muted = muted;
+    }
+
+    get currentTime() {
+        if (this._mediaElement) {
+            return this._mediaElement.currentTime;
+        }
+        return 0;
+    }
+
+    set currentTime(seconds) {
+        if (this._mediaElement) {
+            this._mediaElement.currentTime = seconds;
+        } else {
+            this._pendingSeekTime = seconds;
+        }
+    }
+
+    get mediaInfo() {
+        let mediaPrefix = (this._mediaElement instanceof HTMLAudioElement) ? 'audio/' : 'video/';
+        let info = {
+            mimeType: mediaPrefix + this._mediaDataSource.type
+        };
+        if (this._mediaElement) {
+            info.duration = Math.floor(this._mediaElement.duration * 1000);
+            if (this._mediaElement instanceof HTMLVideoElement) {
+                info.width = this._mediaElement.videoWidth;
+                info.height = this._mediaElement.videoHeight;
+            }
+        }
+        return info;
+    }
+
+    get statisticsInfo() {
+        let info = {
+            playerType: this._type,
+            url: this._mediaDataSource.url
+        };
+
+        if (!(this._mediaElement instanceof HTMLVideoElement)) {
+            return info;
+        }
+
+        let hasQualityInfo = true;
+        let decoded = 0;
+        let dropped = 0;
+
+        if (this._mediaElement.getVideoPlaybackQuality) {
+            let quality = this._mediaElement.getVideoPlaybackQuality();
+            decoded = quality.totalVideoFrames;
+            dropped = quality.droppedVideoFrames;
+        } else if (this._mediaElement.webkitDecodedFrameCount != undefined) {
+            decoded = this._mediaElement.webkitDecodedFrameCount;
+            dropped = this._mediaElement.webkitDroppedFrameCount;
+        } else {
+            hasQualityInfo = false;
+        }
+
+        if (hasQualityInfo) {
+            info.decodedFrames = decoded;
+            info.droppedFrames = dropped;
+        }
+
+        return info;
+    }
+
+    _onvLoadedMetadata(e) {
+        if (this._pendingSeekTime != null) {
+            this._mediaElement.currentTime = this._pendingSeekTime;
+            this._pendingSeekTime = null;
+        }
+        this._emitter.emit(PlayerEvents.MEDIA_INFO, this.mediaInfo);
+    }
+
+    _reportStatisticsInfo() {
+        this._emitter.emit(PlayerEvents.STATISTICS_INFO, this.statisticsInfo);
+    }
+
+}
+
+export default NativePlayer;