@jxstjh/jhvideo
Version:
HTML5 jhvideo base on MPEG2-TS Stream Player
294 lines (293 loc) • 9.03 kB
TypeScript
import { Direction, PlayerMode, StreamOpt, StreamSpeed, StyleSize } from "./model/playerModel";
import GlobalClient from "./globalClient.js";
export declare class JPlayerMediaRecorder {
mediaElement: unknown;
private recorder;
emitter: any;
private timer$;
private $stop;
private subscriptiontimer;
constructor(mediaElement: unknown, time: any);
on(event: any, listener: any): void;
off(event: any, listener: any): void;
start(): void;
stop(): void;
destroy(): void;
}
export declare class JPlayer {
el: HTMLElement;
playerMode?: PlayerMode;
static get version(): any;
static isSupported(): boolean;
private features;
private globalClient;
private h5msClient;
private nippleIns;
private timelineIns;
private e;
private vid;
private prefixName;
private _rootHammertime;
private vel;
private cel;
private canvas;
private wrapperel;
private joystickele;
private videoWrapperEl;
private streamOpt;
private playUrl;
private streamId;
private contextMenu;
private rectBlock;
private playerIns;
private _currentTime;
private _audioCtrl;
private _videoStream;
private lastDecodedFrame;
private readonly MAX_OPEN_STREAM_RETRY_COUNT;
private readonly MAX_AUTO_RECOVER_COUNT;
private readonly DEFAULT_STABLE_PLAY_SECONDS;
private readonly MAX_STABLE_PLAY_SECONDS;
private AUTO_RECOVER_RESET_DELAY_MS;
_talkCtrl: any;
_vodPlayer: any;
private osdTimeId;
private videoRatio;
private playerOnCanPlay;
private _playing;
private _ptzing;
private _ptzLoad;
private _zooming;
private _drawing;
private _setting;
private _seeking;
_ptzSpeed: number;
private _isFullScreen;
private _offsetObj;
private _ponitDragClick;
private _zoomStartPonit;
private _zoomEndPonit;
private _begintime;
private _endtime;
private _offsetTime;
private _loading;
private _recording;
private _maxRetryTime;
private _autoRecoverCount;
private _enableAutoRecover;
private _maxAutoRecoverCount;
private _autoRecoverResetTimer;
private _isStablePlaying;
private _isAutoRecovering;
private _size;
private _timer;
private mediaRecorder;
private $resize;
private $click;
private $dblclick;
private $mouseenter;
private $mouseout;
private $mousemove;
private $mousewheel;
private $contextmenu;
private $mousedown;
private $mouseup;
private _isMouseUp;
private subscriptionWrapList$;
private subscriptionToolbarList$;
private $ptzSubject;
private _liveFlow;
private _OSDTime;
emitter: any;
private zoomScale;
private _sequence;
private _passageRepeat;
private set sequence(value);
get mediaInfo(): any;
get loading(): boolean;
get playerType(): "webgl" | "video";
set playerType(type: "webgl" | "video");
set loading(v: boolean);
set styleSize(size: StyleSize);
get size(): StyleSize;
get seeking(): boolean;
set seeking(v: boolean);
get recording(): boolean;
set recording(v: boolean);
set messageError(err: any);
private set loadingTxt(value);
set error(v: any);
get isFullScreen(): boolean;
set isFullScreen(v: boolean);
get speed(): string;
get durationT(): number;
set playing(v: boolean);
get playing(): boolean;
get ptzing(): boolean;
set ptzing(v: boolean);
private get setting();
private set setting(value);
get zooming(): boolean;
set zooming(v: boolean);
get streamSpeed(): StreamSpeed;
set streamSpeed(v: StreamSpeed);
set offsetTime(v: number);
private get isMobile();
constructor(globalClient: GlobalClient, el: HTMLElement, playerMode?: PlayerMode);
private initHammer;
on(event: any, listener: any): void;
private emitPlayerError;
init(stream?: StreamOpt): Promise<void>;
toogleCanvasVide(toogle: any): void;
updateCanvas(): void;
getFeatureList(): {
msePlayback: boolean;
mseLivePlayback: boolean;
networkStreamIO: boolean;
networkLoaderName: string;
nativeMP4H264Playback: boolean;
nativeWebmVP8Playback: boolean;
nativeWebmVP9Playback: boolean;
};
initObservables(): void;
unSubscribeObservables(): void;
unSubscribeToolbarObservables(): void;
initDom(): void;
initToolBar(): void;
creatPlayer(): Promise<any>;
updateOsdTimeThrottle(): void;
switchStream(streamNO: number, dom?: HTMLSpanElement): void;
requestInfo(url: string): {
url: string;
aisleId: any;
headers: {
"Content-Type": string;
Authorization: string;
};
};
/**
* 在稳定播放后的断流场景下,触发一次完整的重开流流程。
* 如果当前还未进入稳定播放态、已经处于恢复中,或已达到最大恢复次数,则返回 false。
*/
private tryAutoRecover;
/**
* 归一化重试次数配置。
* 允许下游通过 init 传入,但最终不会超过播放器内部允许的最大值。
*/
private normalizeRetryCount;
/**
* 归一化稳定播放时长配置,单位秒。
* 允许下游通过 init 传入,但最终会被裁剪到播放器允许的范围内。
*/
private normalizeStablePlaySeconds;
/**
* 启动稳定播放计时器。
* 只有在持续稳定播放达到配置时长后,才会重置自动恢复次数。
*/
private startAutoRecoverResetTimer;
/**
* 清理稳定播放计时器,并将当前播放会话标记为未进入稳定播放态。
* 在销毁播放器或重新开流前调用,避免误重置恢复次数。
*/
private clearAutoRecoverResetTimer;
/**
* 判断当前错误是否应该触发自动重开流。
* 只有已经稳定播放过的实例,且错误属于网络中断类问题时,才允许自动恢复。
*/
private shouldAutoRecover;
/**
* 在自动恢复前修正流参数。
* 直播直接回到最新流位置,回放则从当前已播时间继续拉流。
*/
private prepareAutoRecoverStreamState;
sendCmdPtz(cmd: number, operate?: {
index: number;
name?: string;
state?: number;
}): Promise<void>;
sendCmdDirection(direction: number): Promise<any>;
sendCmdPreset({ index, name, state }: {
index: number;
name?: string;
state?: number;
}): Promise<any>;
openStream(stream: StreamOpt): Promise<any>;
private initContextMenu;
private getRightMenu;
private bindEvents;
private unBindEvents;
setFullScreen(value?: boolean): void;
private fullScreenHandler;
private setMCPosition;
private getPtzPosition;
/**
* 3 2 1
* 4 * 0
* 5 6 7
*
*/
private getPtzPositionFlag;
private appendMockCursor;
private showToolbars;
private hideToolbars;
private showSettingMenu;
private hideSettingMenu;
hideContextMenu(): void;
private checkEleSize;
private addPtzClass;
private clearPtzClass;
/**
* 根据起始时间和偏移秒数,计算出新的绝对时间字符串
* @param originalTimeStr 原始绝对时间,例如 "2026-03-19 12:00:00"
* @param offsetSeconds 播放器当前播放的相对秒数,例如 125.5
* @returns 新的绝对时间字符串,例如 "2026-03-19 12:02:05"
*/
private calculateNewBeginTime;
play(isGive?: boolean): void;
pause(): void;
private resetPlayerStatus;
refresh(streamOpt?: StreamOpt): Promise<void>;
toggleVod(streamOpt?: StreamOpt): Promise<void>;
private setCanvasSize;
/**
* 绘制矩形框
**/
private switchDraw;
private videoIsOriginalState;
private toggleDraw;
drawBtnHandle(e: any): void;
private setRectRatio;
getShape(): Promise<any>;
setFillRatio(): void;
resetRatio(): void;
ratioAdjust(W?: number, H?: number): void;
record(time?: number): Promise<void>;
screenshot(): void;
toggleSetting(): void;
togglePtz(): void;
toggleZoom(): void;
private emptyVideoDom;
private emptyVideoTool;
toggleVodOrigin(e: any): void;
toggleVodOriginForNumber(vod: number): void;
creatZoomStartPonit(ox: any, oy: any): void;
cleanZoomStartPonit(): void;
setZoom(w: any, h: any, dir: Direction): void;
private updateProcess;
private updateTimeLine;
private updateProcessBarView;
private updateProcessClockView;
private getOffetTime;
private getOffetClientTime;
private getOffetX;
initNipple(): void;
sendPtzCmd(cmd: any, param?: number): void;
sendAudio(): any;
destroyNipple(): void;
close(): void;
private teardownPlaybackSession;
clearOsdTimeId(): void;
destroy(): void;
private destroyMediaRecorder;
}
export default JPlayer;