@vtx/player 0.0.15 → 0.0.16

package/lib/live-player/demo/src/pages/carHistory/components/video/index.d.ts

@@ -0,0 +1,221 @@
+/// <reference types="react" />
+import moment from 'moment';
+import { CloudControlPanelProps } from '@/components/controls';
+import { VideoType as VideoType$1 } from '@/components/player';
+import * as react from 'react';
+import { GetHistoryUrlParams, LoadVideoInfoParams } from '@/api/types';
+
+/** 视频流格式 */
+declare type VideoType = 'flv' | 'hls' | 'hk_ws';
+interface ConstructorParams {
+    url: string;
+    /** 渲染容器 */
+    container: HTMLDivElement;
+    /** 是否直播，flv.js需要 */
+    live?: boolean;
+    /** 视频流格式 */
+    type?: VideoType;
+    /** 开始时间，历史回放需要 */
+    startTime?: moment.MomentInput;
+    /** 结束时间，历史回放需要 */
+    endTime?: moment.MomentInput;
+}
+/**
+ * 视频播放核心类
+ */
+declare class Player {
+    /** 视频地址 */
+    url: string;
+    /** 视频流格式 */
+    type: VideoType;
+    private player;
+    private video;
+    /** 开始时间，历史回放需要 */
+    private startTime?;
+    /** 结束时间，历史回放需要 */
+    private endTime?;
+    /** 跳转时间，用于处理进度条位置 */
+    private seekTime?;
+    /** 之前的视频播放速度，用于处理海康音量控制 */
+    private preSpeed;
+    constructor(params: ConstructorParams);
+    /** 播放 */
+    play(): Promise<void>;
+    /** 回放 */
+    playBack(): Promise<void>;
+    /** 销毁 */
+    destroy(): void;
+    /** 截图 */
+    capture(captureName?: string, time?: boolean): void;
+    /** 尺寸重置 */
+    resize(): void;
+    /**
+     * 设置音量
+     * @param value
+     */
+    setVolume(value: number): void;
+    /**
+     * 设置播放速度
+     * @param speed
+     */
+    setSpeed(speed: 0.5 | 1 | 2 | 4 | 8): void;
+    /**
+     * 时间更新事件
+     * @param callback 回调函数
+     */
+    onTimeUpdate(callback: (currentTime: number, speed: number) => void): void;
+    /** 跳转到 */
+    seekTo(time: number): Promise<void>;
+    /**
+     * 暂停播放
+     * @param callback 回调函数
+     */
+    pause(callback?: () => void): void;
+    /**
+     * 恢复播放
+     * @param callback 回调函数
+     */
+    resume(callback?: () => void): void;
+    /**
+     * 开始对讲
+     * @param url 对讲地址
+     */
+    startTalk(url: string): Promise<void>;
+    /**
+     * 开始对讲
+     * @param state 状态
+     */
+    stopTalk(): Promise<void>;
+}
+
+interface VtxPlayerProps$1 {
+    /** 视频流地址 */
+    url: string;
+    /** 宽度 */
+    width?: number;
+    /** 高度 */
+    height?: number;
+    /** 视频流格式，如果为空则根据url自行判断 */
+    type?: VideoType$1;
+    /** 截图文件名 */
+    captureName?: string;
+    /** 对讲地址 */
+    talkUrl?: string;
+    /** 云台控制 */
+    cloudParams?: CloudControlPanelProps;
+}
+declare const LivePlayer: (props: VtxPlayerProps$1) => JSX.Element;
+
+declare type HistoryPlayerHandle = {
+    /**
+     * 跳转，目前仅支持海康视频跳转
+     */
+    seekTo: (time: string) => Promise<void>;
+};
+interface VtxPlayerProps {
+    /** 视频流地址 */
+    url: string;
+    /** 视频流格式，如果为空则根据url自行判断 */
+    type?: VideoType$1;
+    /** 开始时间，格式为：YYYY-MM-DD HH:mm:ss */
+    startTime: string;
+    /** 结束时间，格式为：YYYY-MM-DD HH:mm:ss  */
+    endTime: string;
+    /** 宽度 */
+    width?: number;
+    /** 高度 */
+    height?: number;
+    /** 截图文件名 */
+    captureName?: string;
+    /** 控制条bottom */
+    controlBottom?: number;
+    /** 播放器进度回调，time:YYYY-MM-DD HH:mm:ss speed:播放速率 */
+    onTimeChange?: (time: string, speed: number) => void;
+}
+declare const HistoryPlayer: react.ForwardRefExoticComponent<VtxPlayerProps & react.RefAttributes<HistoryPlayerHandle>>;
+
+declare type LiveControlHandle = {
+    /** 加载视频 */
+    load: (channel: ChannelType) => void;
+    /** 卸载视频，参数为通道编号 */
+    unLoad: (channelNum: string) => void;
+    /** 一次加载多个视频，适用于初始化 */
+    multiLoad: (channels: ChannelType[]) => void;
+};
+interface LiveControlProps {
+    /** 展开/收缩按钮回调 */
+    onExpandChange?: (expand: boolean) => void;
+    /** 视频关闭回调，参数为通道编号数组 */
+    onChannelChange?: (channelSNum: string[]) => void;
+    /** 宽度 */
+    width?: number | string;
+    /** 高度 */
+    height?: number | string;
+    /** 轮询频率 */
+    polling?: number | undefined;
+}
+declare type ChannelType = {
+    /** 通道号 */
+    channelNum: string;
+    /** 设备ID */
+    deviceId?: string;
+    /** 协议 */
+    protocol?: string;
+};
+/**
+ * 实时分屏组件
+ */
+declare const LiveControl: react.ForwardRefExoticComponent<LiveControlProps & react.RefAttributes<LiveControlHandle>>;
+
+declare type HistoryControlHandle = {
+    load: (channel: GetHistoryUrlParams) => void;
+};
+interface HistoryControlProps {
+    /** 宽度 */
+    width?: number;
+    /** 高度 */
+    height?: number;
+    /** 展开/收缩按钮回调 */
+    onExpandChange?: (expand: boolean) => void;
+    /** 播放器进度回调，time:YYYY-MM-DD HH:mm:ss */
+    onTimeChange?: (time: string) => void;
+}
+/**
+ * 历史视频控制器
+ */
+declare const HistoryControl: react.ForwardRefExoticComponent<HistoryControlProps & react.RefAttributes<HistoryControlHandle>>;
+
+interface BillPlayerProps {
+    /** 参数 */
+    params: LoadVideoInfoParams;
+    /** 宽度 */
+    width?: string | number;
+    /** 高度 */
+    height?: string | number;
+    /** 是否显示实时视频，默认为true */
+    live?: boolean;
+    /** 是否显示历史视频，默认为true */
+    history?: boolean;
+    /** 实时默认播放 */
+    defaultLivePlay?: boolean;
+    /** 历史默认播放 */
+    defaultHistoryPlay?: boolean;
+}
+declare const BillPlayer: (props: BillPlayerProps) => JSX.Element;
+
+interface LiveChannelPlayerProps {
+    /** 通道ID */
+    channelId: string;
+    /** 宽度 */
+    width?: number;
+    /** 高度 */
+    height?: number;
+}
+/**
+ * 基于通道ID的实时播放器
+ * @param props
+ * @returns
+ */
+declare const LiveChannelPlayer: (props: LiveChannelPlayerProps) => JSX.Element | undefined;
+
+export { BillPlayer, HistoryControl, HistoryPlayer, LiveChannelPlayer, LiveControl, LivePlayer, Player };

package/lib/live-player/demo/src/pages/carHistory/components/video/types/api/fetch.d.ts

@@ -0,0 +1,12 @@
+interface VMFetchProps {
+    /** 请求体 */
+    data?: any;
+    /** 请求头 */
+    headersEx?: object;
+}
+/**
+ * 数据fetch总入口
+ * @param props
+ */
+declare const Fetch: <T>(url: string, type?: 'GET' | 'POST', params?: VMFetchProps) => Promise<T>;
+export default Fetch;

package/lib/live-player/demo/src/pages/carHistory/components/video/types/api/index.d.ts

@@ -0,0 +1,15 @@
+import * as Types from './types';
+/** 获取预览地址 */
+export declare const getPreviewUrl: (data: Types.GetPreviewUrlParams) => Promise<Types.GetPreviewUrlResp>;
+/** 获取历史地址 */
+export declare const getHistoryUrl: (data: Types.GetHistoryUrlParams) => Promise<Types.GetHistoryUrlResp>;
+/** 获取视频信息 */
+export declare const loadVideoInfo: (data: Types.LoadVideoInfoParams) => Promise<Types.LoadVideoInfoResp>;
+/** 云台控制 */
+export declare const cloudControl: (data: Types.CloudControlParams) => Promise<unknown>;
+/**
+ * 获取通道信息
+ * @param channelId 通道ID
+ * @returns
+ */
+export declare const loadVideoChannel: (channelId: string) => Promise<Types.LoadVideoChannelResp>;

package/lib/live-player/demo/src/pages/carHistory/components/video/types/api/types.d.ts

@@ -0,0 +1,107 @@
+/** 获取预览地址Resp */
+export interface GetPreviewUrlResp {
+    /** 对讲地址 */
+    apiUrl: string;
+    /** 地址 */
+    url: string;
+    /** 设备名称 */
+    deviceName: string;
+    /** 设备ID */
+    deviceId: string;
+    /** 通道名称 */
+    channelName: string;
+    /** 通道编号 */
+    channelNum: string;
+    /** 播放器 */
+    player: string | null;
+    /** 是否可以对讲，1为可以，0为不可以 */
+    beenHasVideo?: 1 | 0;
+    /** 云台类型，1全功能，2不能转动，3不能变焦，4无功能 */
+    ptzType?: 1 | 2 | 3 | 4;
+}
+/** 获取预览地址Params */
+export interface GetPreviewUrlParams {
+    /** 频道号 */
+    channelNum: string;
+    /** 设备ID */
+    deviceId: string;
+    /** 协议 */
+    protocol?: string;
+}
+/** 历史地址子项 */
+export interface HistoryUrlItem {
+    /** 开始时间 */
+    beginTime: string;
+    /** 结束时间 */
+    endTime: string;
+    /** 回放地址 */
+    playbackUrl: string | null;
+    /** 大小 */
+    size: number;
+}
+/** 获取历史地址Resp */
+export interface GetHistoryUrlResp {
+    /** 设备名称 */
+    deviceName: string;
+    /** 通道名称 */
+    channelName: string;
+    /** url列表 */
+    list: HistoryUrlItem[];
+    /** 播放器 */
+    player: string | null;
+    /** 全时播放地址 */
+    totalTimeUrl: string;
+    /** 地址 */
+    url: string;
+}
+/** 获取历史地址Params */
+export interface GetHistoryUrlParams {
+    /** 频道号 */
+    channelNum: string;
+    /** 设备ID */
+    deviceId: string;
+    /** 协议 */
+    protocol?: string;
+    /** 开始时间，格式：2022-06-01 00:00:00 */
+    beginTime: string;
+    /** 结束时间，格式：2022-06-01 23:59:59 */
+    endTime: string;
+}
+/** 获取视频信息Params */
+export interface LoadVideoInfoParams {
+    /** 业务ID */
+    billId: string;
+}
+export interface LoadVideoInfo {
+    /** 频道号 */
+    channelNum: string;
+    /** 设备ID */
+    videoDeviceId: string;
+    /** 通道名称 */
+    channelName: string;
+}
+/** 获取视频信息Resp */
+export declare type LoadVideoInfoResp = LoadVideoInfo[];
+/** 云台控制Params */
+export declare type CloudControlParams = {
+    /** 频道号 */
+    channelNum: string;
+    /** 设备ID */
+    deviceId: string;
+    /** 操作：1为按下，0为放开 */
+    action: 1 | 0;
+    /** 命令 */
+    command: CloudControlCommandType;
+};
+/** 云台控制命令 */
+export declare type CloudControlCommandType = 'LEFT' | 'RIGHT' | 'UP' | 'DOWN' | 'LEFT_UP' | 'LEFT_DOWN' | 'RIGHT_UP' | 'RIGHT_DOWN' | 'ZOOM_IN' | 'ZOOM_OUT' | 'FOCUS_NEAR' | 'FOCUS_FAR' | 'IRIS_ENLARGE' | 'IRIS_REDUCE';
+export declare type LoadVideoChannelParams = {
+    /** 通道ID */
+    videoChannelId: string;
+};
+export declare type LoadVideoChannelResp = {
+    /** 通道号 */
+    channelNum: string;
+    /** 设备ID */
+    videoDeviceId: string;
+};

package/lib/live-player/demo/src/pages/carHistory/components/video/types/components/bill-player/index.d.ts

@@ -0,0 +1,21 @@
+/// <reference types="react" />
+import './index.less';
+import { LoadVideoInfoParams } from '@/api/types';
+interface BillPlayerProps {
+    /** 参数 */
+    params: LoadVideoInfoParams;
+    /** 宽度 */
+    width?: string | number;
+    /** 高度 */
+    height?: string | number;
+    /** 是否显示实时视频，默认为true */
+    live?: boolean;
+    /** 是否显示历史视频，默认为true */
+    history?: boolean;
+    /** 实时默认播放 */
+    defaultLivePlay?: boolean;
+    /** 历史默认播放 */
+    defaultHistoryPlay?: boolean;
+}
+export declare const BillPlayer: (props: BillPlayerProps) => JSX.Element;
+export default BillPlayer;

package/lib/live-player/demo/src/pages/carHistory/components/video/types/components/controls/index.d.ts

@@ -0,0 +1,52 @@
+/// <reference types="react" />
+import './index.less';
+import Player from '../player';
+import { CloudControlParams } from '@/api/types';
+interface VolumeControlProps {
+    container: HTMLDivElement | null;
+    player?: Player;
+    defaultValue?: number;
+}
+/** 音量控制 */
+export declare const VolumeControl: (props: VolumeControlProps) => JSX.Element;
+declare type SpeedValue = 0.5 | 1 | 2 | 4 | 8;
+interface SpeedControlProps {
+    container: HTMLDivElement | null;
+    player?: Player;
+    defaultValue?: SpeedValue;
+}
+/** 速度控制 */
+export declare const SpeedControl: (props: SpeedControlProps) => JSX.Element;
+interface ErrorStateProps {
+    /** 重试回调 */
+    onClick?: () => void;
+}
+export declare const ErrorState: (props: ErrorStateProps) => JSX.Element;
+export declare const LoadingState: () => JSX.Element;
+interface PlayerHeaderProps {
+    /** 名称 */
+    name: string;
+    /** 关闭回调 */
+    onClose: () => void;
+}
+/** 播放器头部 */
+export declare const PlayerHeader: (props: PlayerHeaderProps) => JSX.Element;
+interface TalkControlProps {
+    /** 播放器 */
+    player?: Player;
+    /** 对讲url */
+    url: string;
+}
+/**
+ * 对讲控制器
+ * @returns
+ */
+export declare const TalkControl: (props: TalkControlProps) => JSX.Element;
+export declare type CloudControlType = 'all' | 'onlyFocus' | 'onlyRotate' | 'none';
+export declare type CloudControlPanelProps = {
+    query: Omit<CloudControlParams, 'action' | 'command'>;
+    type: CloudControlType;
+};
+/** 云台控制面板 */
+export declare const CloudControlPanel: (props: CloudControlPanelProps) => JSX.Element;
+export {};

package/lib/live-player/demo/src/pages/carHistory/components/video/types/components/history-control/index.d.ts

@@ -0,0 +1,39 @@
+/// <reference types="react" />
+import './index.less';
+import { GetHistoryUrlParams } from '@/api/types';
+export declare type HistoryControlHandle = {
+    load: (channel: GetHistoryUrlParams) => void;
+};
+interface HistoryControlProps {
+    /** 宽度 */
+    width?: number;
+    /** 高度 */
+    height?: number;
+    /** 展开/收缩按钮回调 */
+    onExpandChange?: (expand: boolean) => void;
+    /** 播放器进度回调，time:YYYY-MM-DD HH:mm:ss */
+    onTimeChange?: (time: string) => void;
+}
+/**
+ * 历史视频控制器
+ */
+export declare const HistoryControl: import("react").ForwardRefExoticComponent<HistoryControlProps & import("react").RefAttributes<HistoryControlHandle>>;
+export declare type UrlsTableItemType = {
+    /** 序号 */
+    index: number;
+    /** 设备名称 */
+    deviceName: string;
+    /** 通道名称 */
+    channelName: string;
+    /** 开始时间 */
+    beginTime: string;
+    /** 结束时间 */
+    endTime: string;
+    /** 视频时长 */
+    duration: string;
+    /** 视频大小 */
+    size: string;
+    /** 地址 */
+    url: string;
+};
+export default HistoryControl;

package/lib/live-player/demo/src/pages/carHistory/components/video/types/components/history-player/index.d.ts

@@ -0,0 +1,31 @@
+/// <reference types="react" />
+import './index.less';
+import { VideoType } from '@/components/player';
+export declare type HistoryPlayerHandle = {
+    /**
+     * 跳转，目前仅支持海康视频跳转
+     */
+    seekTo: (time: string) => Promise<void>;
+};
+interface VtxPlayerProps {
+    /** 视频流地址 */
+    url: string;
+    /** 视频流格式，如果为空则根据url自行判断 */
+    type?: VideoType;
+    /** 开始时间，格式为：YYYY-MM-DD HH:mm:ss */
+    startTime: string;
+    /** 结束时间，格式为：YYYY-MM-DD HH:mm:ss  */
+    endTime: string;
+    /** 宽度 */
+    width?: number;
+    /** 高度 */
+    height?: number;
+    /** 截图文件名 */
+    captureName?: string;
+    /** 控制条bottom */
+    controlBottom?: number;
+    /** 播放器进度回调，time:YYYY-MM-DD HH:mm:ss speed:播放速率 */
+    onTimeChange?: (time: string, speed: number) => void;
+}
+export declare const HistoryPlayer: import("react").ForwardRefExoticComponent<VtxPlayerProps & import("react").RefAttributes<HistoryPlayerHandle>>;
+export default HistoryPlayer;

package/lib/live-player/demo/src/pages/carHistory/components/video/types/components/live-channel-player/index.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+interface LiveChannelPlayerProps {
+    /** 通道ID */
+    channelId: string;
+    /** 宽度 */
+    width?: number;
+    /** 高度 */
+    height?: number;
+}
+/**
+ * 基于通道ID的实时播放器
+ * @param props
+ * @returns
+ */
+export declare const LiveChannelPlayer: (props: LiveChannelPlayerProps) => JSX.Element | undefined;
+export default LiveChannelPlayer;

package/lib/live-player/demo/src/pages/carHistory/components/video/types/components/live-control/index.d.ts

@@ -0,0 +1,35 @@
+/// <reference types="react" />
+import './index.less';
+export declare type LiveControlHandle = {
+    /** 加载视频 */
+    load: (channel: ChannelType) => void;
+    /** 卸载视频，参数为通道编号 */
+    unLoad: (channelNum: string) => void;
+    /** 一次加载多个视频，适用于初始化 */
+    multiLoad: (channels: ChannelType[]) => void;
+};
+interface LiveControlProps {
+    /** 展开/收缩按钮回调 */
+    onExpandChange?: (expand: boolean) => void;
+    /** 视频关闭回调，参数为通道编号数组 */
+    onChannelChange?: (channelSNum: string[]) => void;
+    /** 宽度 */
+    width?: number | string;
+    /** 高度 */
+    height?: number | string;
+    /** 轮询频率 */
+    polling?: number | undefined;
+}
+export declare type ChannelType = {
+    /** 通道号 */
+    channelNum: string;
+    /** 设备ID */
+    deviceId?: string;
+    /** 协议 */
+    protocol?: string;
+};
+/**
+ * 实时分屏组件
+ */
+declare const LiveControl: import("react").ForwardRefExoticComponent<LiveControlProps & import("react").RefAttributes<LiveControlHandle>>;
+export default LiveControl;

package/lib/live-player/demo/src/pages/carHistory/components/video/types/components/live-player/index.d.ts

@@ -0,0 +1,22 @@
+/// <reference types="react" />
+import './index.less';
+import { CloudControlPanelProps } from '@/components/controls';
+import { VideoType } from '@/components/player';
+interface VtxPlayerProps {
+    /** 视频流地址 */
+    url: string;
+    /** 宽度 */
+    width?: number;
+    /** 高度 */
+    height?: number;
+    /** 视频流格式，如果为空则根据url自行判断 */
+    type?: VideoType;
+    /** 截图文件名 */
+    captureName?: string;
+    /** 对讲地址 */
+    talkUrl?: string;
+    /** 云台控制 */
+    cloudParams?: CloudControlPanelProps;
+}
+export declare const LivePlayer: (props: VtxPlayerProps) => JSX.Element;
+export default LivePlayer;

package/lib/live-player/demo/src/pages/carHistory/components/video/types/components/player/index.d.ts

@@ -0,0 +1,84 @@
+import moment from 'moment';
+/** 视频流格式 */
+export declare type VideoType = 'flv' | 'hls' | 'hk_ws';
+interface ConstructorParams {
+    url: string;
+    /** 渲染容器 */
+    container: HTMLDivElement;
+    /** 是否直播，flv.js需要 */
+    live?: boolean;
+    /** 视频流格式 */
+    type?: VideoType;
+    /** 开始时间，历史回放需要 */
+    startTime?: moment.MomentInput;
+    /** 结束时间，历史回放需要 */
+    endTime?: moment.MomentInput;
+}
+/**
+ * 视频播放核心类
+ */
+declare class Player {
+    /** 视频地址 */
+    url: string;
+    /** 视频流格式 */
+    type: VideoType;
+    private player;
+    private video;
+    /** 开始时间，历史回放需要 */
+    private startTime?;
+    /** 结束时间，历史回放需要 */
+    private endTime?;
+    /** 跳转时间，用于处理进度条位置 */
+    private seekTime?;
+    /** 之前的视频播放速度，用于处理海康音量控制 */
+    private preSpeed;
+    constructor(params: ConstructorParams);
+    /** 播放 */
+    play(): Promise<void>;
+    /** 回放 */
+    playBack(): Promise<void>;
+    /** 销毁 */
+    destroy(): void;
+    /** 截图 */
+    capture(captureName?: string, time?: boolean): void;
+    /** 尺寸重置 */
+    resize(): void;
+    /**
+     * 设置音量
+     * @param value
+     */
+    setVolume(value: number): void;
+    /**
+     * 设置播放速度
+     * @param speed
+     */
+    setSpeed(speed: 0.5 | 1 | 2 | 4 | 8): void;
+    /**
+     * 时间更新事件
+     * @param callback 回调函数
+     */
+    onTimeUpdate(callback: (currentTime: number, speed: number) => void): void;
+    /** 跳转到 */
+    seekTo(time: number): Promise<void>;
+    /**
+     * 暂停播放
+     * @param callback 回调函数
+     */
+    pause(callback?: () => void): void;
+    /**
+     * 恢复播放
+     * @param callback 回调函数
+     */
+    resume(callback?: () => void): void;
+    /**
+     * 开始对讲
+     * @param url 对讲地址
+     */
+    startTalk(url: string): Promise<void>;
+    /**
+     * 开始对讲
+     * @param state 状态
+     */
+    stopTalk(): Promise<void>;
+}
+export default Player;

package/lib/live-player/demo/src/pages/carHistory/components/video/types/context/index.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+export declare const PlayerThemeContext: React.Context<Context>;
+interface Context {
+    /** 主题 */
+    theme: 'light' | 'dark';
+}
+declare const PlayerThemeProvider: React.Provider<Context>;
+export default PlayerThemeProvider;

package/lib/live-player/demo/src/pages/carHistory/components/video/types/hooks/useSettings.d.ts

@@ -0,0 +1,9 @@
+/**
+ * 获取配置信息
+ * @returns
+ */
+declare const useSettings: () => {
+    theme: "light" | "dark";
+    isDark: boolean;
+};
+export default useSettings;