ezuikit-flv 1.0.2-alpha.6 → 1.0.2-alpha.7

package/types/index.d.ts

@@ -0,0 +1,290 @@
+export default EzuikitFlv;
+/**
+ * @classdesc EzuikitFlv.js 播放flv直播流， 支持播放h264/h265的直播视频流
+ * @example
+ * ```js
+ * const flv = new EzuikitFlv({
+ *  container: "EleId",
+ *  url: "https://open.ys7.com/v3/openlive/E71992743_1_1.flv"
+ * })
+ * ```
+ */
+declare class EzuikitFlv extends BasePlayer {
+    /**
+     * @description ERROR
+     * @static
+     * @member
+     * @example
+     * EzuikitFlv.ERROR.playError
+     */
+    static ERROR: {
+        playError: string;
+        fetchError: string;
+        websocketError: string;
+        webcodecsH265NotSupport: string;
+        webcodecsDecodeError: string;
+        webcodecsWidthOrHeightChange: string;
+        mediaSourceH265NotSupport: string;
+        mediaSourceFull: string;
+        mseSourceBufferError: string;
+        mediaSourceAppendBufferError: string;
+        mediaSourceBufferListLarge: string;
+        mediaSourceAppendBufferEndTimeout: string;
+        wasmDecodeError: string; /**
+         * @description 绑定事件
+         * @private
+         */
+        webglAlignmentError: string;
+    };
+    /** */
+    static TIMEOUT: {
+        loadingTimeout: string;
+        delayTimeout: string;
+    };
+    /**
+     * @private
+     * @param {FlvOptions} options
+     * @returns {FlvOptions}
+     */
+    private static _setOptions;
+    static version: string;
+    /**
+     * @description 静态方法 判断是否支持播放地址
+     * @param {Object} options
+     * @param {string=} options.url
+     * @param {type=} options.type
+     * @returns {boolean}
+     * @static
+     *
+     * @example
+     * ```js
+     * EzuikitFlv.supportType({url: "https://open.ys7.com/v3/openlive/E71992743_1_1.flv",  type:'flv'})
+     * ```
+     */
+    static supportType(options: {
+        url?: string | undefined;
+        type?: type | undefined;
+    }): boolean;
+    /**
+     * @constructor
+     * @param {FlvOptions} options
+     */
+    constructor(options: FlvOptions);
+    event: {
+        on: <T extends string | symbol>(event: T, fn: (...args: any[]) => void, context?: any) => this;
+        emit: <T_1 extends string | symbol>(event: T_1, ...args: any[]) => boolean;
+        eventNames: () => (string | symbol)[];
+        listeners: <T_2 extends string | symbol>(event: T_2) => ((...args: any[]) => void)[];
+        off: <T_3 extends string | symbol>(event: T_3, fn?: (...args: any[]) => void, context?: any, once?: boolean) => this;
+        once: <T_4 extends string | symbol>(event: T_4, fn: (...args: any[]) => void, context?: any) => this;
+        listenerCount: (event: string | symbol) => number;
+        addListener: <T_5 extends string | symbol>(event: T_5, fn: (...args: any[]) => void, context?: any) => this;
+        removeListener: <T_6 extends string | symbol>(event: T_6, fn?: (...args: any[]) => void, context?: any, once?: boolean) => this;
+        removeAllListeners: (event?: string | symbol) => this;
+    };
+    _opt: FlvOptions;
+    $container: any;
+    _loadingTimeoutReplayTimes: number;
+    _heartTimeoutReplayTimes: number;
+    events: Events;
+    player: Player;
+    /**
+     * @description 初始化播放
+     * @private
+     * @param {string | HTMLElement} $container
+     * @param {FlvOptions} options
+     * @return {void}
+     */
+    private _initPlayer;
+    /**
+     * @description 重置播放器
+     * @private
+     * @param {FlvOptions} options
+     */
+    private _resetPlayer;
+    /**
+     * @description 绑定事件
+     * @private
+     */
+    private _bindEvents;
+    /**
+     * @description 是否开启控制台调试打印
+     * @param {boolean} value true: 开启， false: 关闭
+     * @returns {void}
+     * @example
+     * flv.setDebug(false)
+     */
+    setDebug(value: boolean): void;
+    /**
+     * @description 设置日志
+     * @param {object} options 日志设置 {level： 'INFO' | 'LOG' | 'WARN' | 'ERROR'}
+     * @returns {void}
+     */
+    setLogger(opt?: {}): void;
+    /**
+     * @description 关闭声音
+     * @returns {void}
+     * @example
+     * flv.closeSound()
+     */
+    closeSound(): void;
+    /**
+     * @description 开启声音 默认音量 0.5
+     * @returns {void}
+     * @example
+     * flv.openSound() //
+     */
+    openSound(): void;
+    set volume(value: any);
+    get volume(): any;
+    /**
+     * @description 获取音量， 音量 0～1
+     * @returns {number}
+     * @example
+     * flv.getVolume()
+     */
+    getVolume(): number;
+    /**
+     * @description 音频回复
+     * @returns {void}
+     * @example
+     * flv.audioResume()
+     */
+    audioResume(): void;
+    /**
+     * @description 设置超时时长, 单位秒 在连接成功之前和播放中途,如果超过设定时长无数据返回,则回调timeout事件
+     * @private
+     * @param {number} time 设置超时时长, 单位秒
+     * @returns {void}
+     * @example
+     * flv.setTimeout(3)
+     */
+    private setTimeout;
+    /**
+     * @description 设置渲染的模式 (video 不支持)
+     * @private
+     * @param {0 | 1 | 2} type 0: 完全填充canvas区域; 1: 等比缩放, 最大边填充 ; 2: 等比缩放后,最小边填充，完全填充canvas区域,画面不被拉伸,没有黑边,但画面显示不全
+     * @returns {Promise}
+     * @example
+     * flv.setScaleMode(1)
+     */
+    private setScaleMode;
+    /**
+     * @description 暂停
+     * @returns {Promise<unknown>}
+     * @example
+     * flv.pause()
+     */
+    pause(): Promise<unknown>;
+    /**
+     * @description 关闭视频,不释放底层资源
+     * @private
+     * @returns {void}
+     * @example
+     * flv.close()
+     */
+    private close;
+    /**
+     * @description 清理画布为黑色背景
+     * @private
+     * @returns {void}
+     * @example
+     * flv.clearView()
+     */
+    private clearView;
+    /**
+     * @description 播放
+     * @param {(string | FlvOptions)=} options
+     * @returns {Promise}
+     * @example
+     * flv.play()
+     */
+    play(options?: (string | FlvOptions) | undefined): Promise<any>;
+    /**
+     * @description 播放
+     * @private
+     * @param {string} url
+     * @param {object=} options
+     * @returns {Promise<unknown>}
+     */
+    private _play;
+    /**
+     * @description 重新调整视图大小
+     * @param {number=} width  宽
+     * @param {number=} height  高
+     * @example
+     * flv.resize()
+     */
+    resize(width?: number | undefined, height?: number | undefined): void;
+    /**
+     * @description 设置最大缓冲时长，单位秒，播放器会自动消除延迟。软解
+     * @private
+     * @param {number} time  大缓冲时长 s
+     * @example
+     * flv.setBufferTime(3)
+     */
+    private setBufferTime;
+    /**
+     * @description 设置旋转角度，支持，0(默认), 90, 180, 270 四个值。
+     * @returns {Promise}
+     * @param {number} deg
+     * @example
+     * flv.setRotate(90) // 旋转90度
+     */
+    setRotate(deg: number): Promise<any>;
+    /**
+     * @description 返回是否加载完毕
+     * @private
+     * @returns {boolean}
+     */
+    private hasLoaded;
+    /**
+     * @description 开启屏幕常亮，在手机浏览器上
+     * @returns {void}
+     * @example
+     * flv.setKeepScreenOn()
+     */
+    setKeepScreenOn(): void;
+    /**
+     * @description 全屏(取消全屏)播放视频
+     * @private
+     * @param {Boolean} flag
+     */
+    private _setFullscreen;
+    /**
+     * @description 全屏播放视频
+     * @returns {Promise}
+     * @example
+     * flv.fullScreen() // 全屏
+     *
+     */
+    fullScreen(): Promise<any>;
+    /**
+     * @description 退出全屏播放视频
+     * @returns {Promise}
+     * @example
+     * flv.cancelFullScreen() // 退出全屏
+     */
+    cancelFullScreen(): Promise<any>;
+    /**
+     * @description 退出全屏播放视频
+     * @private
+     * @returns {Promise}
+     */
+    private _exitFullscreen;
+    /**
+     * @description 获取播放器的状态
+     * @returns {PlayerState} 播放器的状态
+     * @example
+     * flv.getState()
+     */
+    getState(): PlayerState;
+    /**
+     * @description 获取设置
+     * @returns {object}
+     */
+    getOptions(): object;
+}
+import BasePlayer from '@ezuikit/player-base';
+import Events from './utils/events';
+import Player from './player';

package/types/player/base-player.d.ts

@@ -0,0 +1,51 @@
+export default class BasePlayer extends Emitter {
+    constructor(container: any, options: any, Video: any);
+    $container: any;
+    _opt: any;
+    debug: Debug;
+    _loading: boolean;
+    _playing: boolean;
+    _hasLoaded: boolean;
+    _checkHeartTimeout: any;
+    _checkLoadingTimeout: any;
+    _checkStatsInterval: any;
+    _startBpsTime: any;
+    _isPlayingBeforePageHidden: boolean;
+    _stats: {
+        buf: number;
+        fps: number;
+        abps: number;
+        vbps: number;
+        ts: number;
+    };
+    _times: {
+        playInitStart: string;
+        playStart: string;
+        streamStart: string;
+        streamResponse: string;
+        demuxStart: string;
+        decodeStart: string;
+        videoStart: string;
+        playTimestamp: string;
+        streamTimestamp: string;
+        streamResponseTimestamp: string;
+        demuxTimestamp: string;
+        decodeTimestamp: string;
+        videoTimestamp: string;
+        allTimestamp: string;
+    };
+    _videoTimestamp: number;
+    _audioTimestamp: number;
+    events: Events;
+    video: any;
+    control: Control;
+    /**
+     *
+     * @param options
+     */
+    updateOption(options: any): void;
+}
+import Emitter from '../utils/emitter';
+import Debug from '../utils/debug';
+import Events from '../utils/events';
+import Control from '../control';

package/types/player/commonLoader.d.ts

@@ -0,0 +1,16 @@
+export default class CommonLoader extends Emitter {
+    init: boolean;
+    resetInit(): void;
+    videoInfo: {
+        width: string;
+        height: string;
+        encType: string;
+        encTypeCode: string;
+    };
+    destroy(): void;
+    updateVideoInfo(data: any): void;
+    play(): void;
+    pause(): void;
+    clearView(): void;
+}
+import Emitter from '../utils/emitter';

package/types/player/events.d.ts

@@ -0,0 +1,2 @@
+declare function _default(player: any): void;
+export default _default;

package/types/player/hard-player/index.d.ts

@@ -0,0 +1,94 @@
+import { type PlayerInterface, type RequiredFlvOptions } from '../interface';
+import Events from '../../utils/events';
+import Video from './videoLoader';
+import type Control from '../../control';
+import BasePlayer from '../base-player';
+/**
+ * @class
+ *
+ * @interface {PlayerInterface}
+ */
+export default class HardPlayer extends BasePlayer implements PlayerInterface {
+    player: any;
+    video: Video;
+    events: Events;
+    _playing: any;
+    _lastVolume: any;
+    _loading: any;
+    _audioTimestamp: any;
+    _videoTimestamp: any;
+    _times: any;
+    $container: HTMLElement;
+    _opt: RequiredFlvOptions;
+    _hasLoaded: boolean;
+    _checkHeartTimeout: number;
+    _stats: any;
+    _checkLoadingTimeout: number;
+    control: Control;
+    width: number;
+    height: number;
+    _pause: boolean;
+    _decodedFrames: number;
+    constructor(container: HTMLElement, options: RequiredFlvOptions);
+    close(): Promise<unknown>;
+    _createPlayer(options: RequiredFlvOptions): void;
+    _flvEvents(): void;
+    getOption(): RequiredFlvOptions;
+    emitError(errorType: string, message?: string): void;
+    /**
+     * @description 销毁实例
+     */
+    destroy(): void;
+    resetStats(): void;
+    set fullscreen(value: any);
+    get fullscreen(): any;
+    set webFullscreen(value: boolean);
+    get webFullscreen(): boolean;
+    set loaded(value: boolean);
+    get loaded(): boolean;
+    set playing(value: any);
+    get playing(): any;
+    get volume(): number;
+    set volume(value: number);
+    get lastVolume(): any;
+    set loading(value: any);
+    get loading(): any;
+    set audioTimestamp(value: any);
+    get audioTimestamp(): any;
+    set videoTimestamp(value: any);
+    get videoTimestamp(): any;
+    get isDebug(): boolean;
+    /**
+     * 心跳检查
+     */
+    checkHeart(): void;
+    clearCheckHeartTimeout(): void;
+    /**
+     * @description 心跳检查，如果渲染间隔暂停了多少时间之后，就会抛出异常
+     */
+    checkHeartTimeout(): void;
+    /**
+     * @description 检查等待时间 （loading 等待时间）
+     */
+    checkLoadingTimeout(): void;
+    handleRender(): void;
+    clearCheckLoadingTimeout(): void;
+    /**
+     *
+     * @param options
+     */
+    updateOption(options: Partial<RequiredFlvOptions>): void;
+    /**
+     * @description 播放
+     * @param url
+     * @param options
+     * @returns {Promise}
+     */
+    play(): Promise<unknown>;
+    _play(): Promise<void>;
+    _close(): Promise<unknown>;
+    pause(): Promise<unknown>;
+    resumeAudioAfterPause(): void;
+    mute(flag: boolean): void;
+    resize(): void;
+}

package/types/player/hard-player/videoLoader.d.ts

@@ -0,0 +1,28 @@
+import CommonLoader from '../commonLoader';
+import { ScreenshotFormat } from '../interface';
+import HardPlayer from '.';
+export default class VideoLoader extends CommonLoader {
+    _delayPlay: boolean;
+    $canvasElement: HTMLCanvasElement;
+    canvasContext: CanvasRenderingContext2D | null;
+    trackGenerator: any;
+    vwriter: any;
+    $videoElement: HTMLVideoElement;
+    player: HardPlayer;
+    $posterElement: HTMLImageElement;
+    constructor(player: HardPlayer);
+    destroy(): void;
+    fixChromeVideoFlashBug(): void;
+    play(): void;
+    _getVideoReadyState(): number;
+    _play(): void;
+    pause(isNow?: boolean): void;
+    clearView(): void;
+    screenshot(filename: string, format?: keyof ScreenshotFormat, quality?: number, type?: string): string | File;
+    initCanvasViewSize(): void;
+    _poster(): void;
+    render(msg: any): void;
+    resize(): void;
+    _resizeElement($Element: HTMLVideoElement | HTMLImageElement): void;
+    isPlaying(): boolean;
+}

package/types/player/index.d.ts

@@ -0,0 +1,7 @@
+export default class PlayerLoader {
+    static getLoaderFactory(useMSE: any): typeof SoftPlayer | typeof HardPalyer;
+    constructor(container: any, options: any);
+    _opt: any;
+}
+import SoftPlayer from './soft-player';
+import HardPalyer from './hard-player';

package/types/player/interface.d.ts

@@ -0,0 +1,100 @@
+import Debug from '../utils/debug';
+export type TFlvOptions = {
+    container: string | HTMLElement;
+    videoBuffer: number;
+    decoder?: string;
+    forceNoOffscreen?: boolean;
+    hasAudio?: boolean;
+    scaleMode: 0 | 1 | 2;
+    debug: boolean;
+    timeout: number;
+    heartTimeout: number;
+    heartTimeoutReplayTimes: number;
+    loadingTimeout: number;
+    loadingTimeoutReplay: boolean;
+    keepScreenOn: boolean;
+    isNotMute: boolean;
+    useMSE: boolean;
+    autoWasm: boolean;
+    wasmDecodeErrorReplay: boolean;
+    useWebFullScreen: boolean;
+    width: number;
+    height: number;
+};
+export type RequiredFlvOptions = Required<TFlvOptions> & {
+    url: string;
+    rotate?: 0 | 90 | 180 | 270;
+    hasControl: any;
+    openWebglAlignment?: boolean;
+};
+export type TPlayerTimes = {
+    playInitStart: number;
+    playStart: number;
+    streamStart: number;
+    streamResponse: number;
+    demuxStart: number;
+    decodeStart: number;
+    videoStart: number;
+    playTimestamp: number;
+    streamTimestamp: number;
+    streamResponseTimestamp: number;
+    demuxTimestamp: number;
+    decodeTimestamp: number;
+    videoTimestamp: number;
+    allTimestamp: number;
+};
+export type TPlayerStats = {
+    buf: number;
+    fps: number;
+    abps: number;
+    vbps: number;
+    ts: number;
+};
+export interface VideoInterface {
+    player: any;
+    destroy(): void;
+    initCanvasViewSize(): void;
+    render(msg: any): void;
+    screenshot(filename?: string, format?: string, quality?: number, type?: string): void;
+    clearView(): void;
+    resize(): void;
+}
+export interface PlayerInterface {
+    $container: any;
+    debug: Debug;
+    _opt: RequiredFlvOptions;
+    /**
+     * @description 播放
+     * @param url
+     * @param options
+     */
+    play(options?: TFlvOptions): Promise<unknown>;
+    /**
+     * @description 暂停
+     */
+    pause(flag?: boolean): Promise<unknown>;
+    /**
+     * @description 静音
+     * @param flag
+     */
+    mute(flag?: boolean): void;
+    /**
+     * @description resize
+     */
+    resize(): void;
+    /**
+     * @description 关闭
+     */
+    close(): Promise<unknown>;
+    /**
+     * @description 销毁实例
+     */
+    destroy(): void;
+}
+export type VideoInfo = {
+    width: string;
+    height: string;
+    encType: string;
+    encTypeCode?: 7 | 12 | '';
+};
+export type ScreenshotFormat = Record<'png' | 'jpeg' | 'webp', string>;

package/types/player/observer.d.ts

@@ -0,0 +1,2 @@
+declare function _default(player: any): void;
+export default _default;

package/types/player/property.d.ts

@@ -0,0 +1,2 @@
+declare function _default(player: any): void;
+export default _default;

package/types/player/soft-player/canvasLoader.d.ts

@@ -0,0 +1,27 @@
+export default class CanvasVideoLoader extends CommonLoader {
+    constructor(player: any);
+    player: any;
+    $videoElement: HTMLCanvasElement;
+    context2D: CanvasRenderingContext2D;
+    contextGl: any;
+    contextGlRender: (w: any, h: any, y: any, u: any, v: any) => void;
+    contextGlDestroy: () => void;
+    bitmaprenderer: ImageBitmapRenderingContext;
+    renderType: string;
+    videoInfo: {
+        width: string;
+        height: string;
+        encType: string;
+    };
+    _contextmenuEvent: (e: any) => void;
+    _initContextGl(): void;
+    _initContext2D(): void;
+    _initCanvasRender(): void;
+    _supportOffscreen(): any;
+    _bindOffscreen(): void;
+    initCanvasViewSize(): void;
+    render(msg: any): void;
+    screenshot(filename: any, format: any, quality: any, type: any): string | File;
+    resize(): void;
+}
+import CommonLoader from '../commonLoader';