@vtx/player 0.0.1

package/src/typings/h5player.d.ts

@@ -0,0 +1,133 @@
+import { CSSProperties } from 'react';
+
+declare global {
+    declare class JSPlugin {
+        constructor(params: JSPluginConstructorParams);
+        /** 设置回调方法 */
+        JS_SetWindowControlCallback(params: JSPluginCallbackParams);
+        /**
+         * 开始播放
+         * @param url 流媒体地址
+         * @param config 播放参数
+         * @param windowIndex 当前窗口下标
+         * @param startTime 开始时间
+         * @param endTime 结束时间
+         */
+        JS_Play(
+            url: string,
+            config: PlayConfig,
+            windowIndex: number,
+            startTime?: string,
+            endTime?: string
+        ): Promise<void>;
+
+        /**
+         * 停止播放
+         * @param windowIndex 窗口下标
+         */
+        JS_Stop(windowIndex: number): Promise<void>;
+        /**
+         * 截图
+         * @param windowIndex 当前窗口
+         * @param fileName 文件名称
+         * @param fileType 文件类型
+         * @param callback 回调
+         */
+        JS_CapturePicture(
+            windowIndex: number,
+            fileName: string,
+            fileType: 'JPEG' | 'PNG',
+            callback?: () => void
+        );
+        /**
+         * 设置窗口大小
+         * @param iWidth 宽度
+         * @param iHeight 高度
+         */
+        JS_Resize(iWidth?: number, iHeight?: number);
+        /**
+         * 设置音量
+         * @param windowIndex 当前窗口
+         * @param value 音量
+         */
+        JS_SetVolume(windowIndex: number, value: number);
+        /**
+         * 跳转到
+         * @param windowIndex 当前窗口
+         * @param startTime 开始时间
+         * @param endTime 结束时间
+         */
+        JS_Seek(windowIndex: number, startTime: string, endTime: string): Promise<void>;
+        /**
+         * 暂停播放
+         * @param windowIndex 当前窗口
+         */
+        JS_Pause(windowIndex: number): Promise<void>;
+        /**
+         * 恢复播放
+         * @param windowIndex 当前窗口
+         */
+        JS_Resume(windowIndex: number): Promise<void>;
+        /**
+         * 调节播放倍速为当前播放速度的2倍，最大为8倍
+         * @param windowIndex 当前窗口
+         */
+        JS_Fast(windowIndex: number): Promise<void>;
+        /**
+         * 调节播放倍速为当前播放速度的1/2倍，最小为1/8倍
+         * @param windowIndex 当前窗口
+         */
+        JS_Slow(windowIndex: number): Promise<void>;
+        /**
+         * 开始对讲
+         * @param url 对讲地址
+         */
+        JS_StartTalk(url: string): Promise<void>;
+        /** 结束对讲 */
+        JS_StopTalk(): Promise<void>;
+    }
+}
+type JSPluginConstructorParams = {
+    /** 容器ID */
+    szId: string;
+    /** h5player.min.js引用路径 */
+    szBasePath: string;
+    /** 最大分屏数 */
+    iMaxSplit: number;
+    /** 当前分屏数 */
+    iCurrentSplit: number;
+    /** 开启调试模式 */
+    openDebug?: boolean;
+    /** 样式 */
+    oStyle?: CSSProperties;
+    /** 宽度 */
+    iWidth?: number;
+    /** 高度 */
+    iHeight?: number;
+};
+
+type JSPluginCallbackParams = {
+    /** 插件选中窗口回调 */
+    windowEventSelect: (index: number) => void;
+    /** 插件错误回调 */
+    pluginErrorHandler: (index: number, code: string, error: object) => void;
+    /** 鼠标移过回调 */
+    windowEventOver: (index: number) => void;
+    /** 鼠标移出回调 */
+    windowEventOut: (index: number) => void;
+    /** 鼠标mouseup事件回调 */
+    windowEventUp: (index: number) => void;
+    /** 全屏切换回调 */
+    windowFullCcreenChange: (full: boolean) => void;
+    /** 首帧显示回调 */
+    firstFrameDisplay: (index: number, width: number, height: number) => void;
+    /** 性能不足回调 */
+    performanceLack: () => void;
+};
+
+type PlayConfig = {
+    /** 播放地址 */
+    playURL: string;
+    /** 0=普通模式; 1=高级模式 默认为0 */
+    mode: 0 | 1;
+};

package/src/utils/index.ts

@@ -0,0 +1,177 @@
+import { Base64 } from 'js-base64';
+import moment from 'moment';
+
+import { GetHistoryUrlResp } from '@/api/types';
+import { UrlsTableItemType } from '@/components/history-control';
+import { VideoType } from '@/components/player';
+
+/** 时间格式枚举 */
+export enum TimeFormat {
+    default = 'YYYY-MM-DDTHH:mm:ss',
+    params = 'YYYY-MM-DD HH:mm:ss',
+    url = 'YYYYMMDDTHHmmss',
+}
+
+/** 生成随机ID */
+export const guidGenerator = () => {
+    const S4 = function () {
+        return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
+    };
+    return S4() + S4() + '-' + S4() + '-' + S4() + '-' + S4() + '-' + S4() + S4() + S4();
+};
+
+type PlayerParams = {
+    /** 视频流地址 */
+    url: string;
+    /** 视频流格式 */
+    type: VideoType;
+};
+/**
+ * 获取视频直播地址及格式
+ * @param url
+ * @returns
+ */
+export const getPlayerParams = (
+    url: string,
+    live: boolean,
+    startTime?: moment.MomentInput,
+    endTime?: moment.MomentInput
+): PlayerParams => {
+    let playerUrl = url;
+    let playerType: VideoType = 'flv';
+    if (url.startsWith('ws://')) {
+        playerType = 'hk_ws';
+        if (live) {
+            playerUrl = url;
+        } else {
+            playerUrl = url.split('?')[0];
+        }
+    }
+    if (url.startsWith('rtsp://')) {
+        playerType = 'flv';
+        if (live) {
+            playerUrl = `https://kanbandev.cloudhw.cn:8446/cloud/vic/convert/flv/live.flv?url=${Base64.encode(
+                url
+            )}`;
+        } else {
+            playerUrl = `https://kanbandev.cloudhw.cn:8446/cloud/vic/convert/flv/live.flv?url=${Base64.encode(
+                getFlvListUrl(url, startTime, endTime)
+            )}`;
+        }
+    }
+    if (url.endsWith('live.m3u8')) {
+        playerUrl = url;
+        playerType = 'hls';
+    }
+    return { url: playerUrl, type: playerType };
+};
+
+/**
+ * 获取历史回放表格数据
+ * @param data
+ * @returns
+ */
+export const getUrlTableData = (data: GetHistoryUrlResp): UrlsTableItemType[] => {
+    const result: UrlsTableItemType[] = data.list.map((item, i) => {
+        const beginTime = moment(item.beginTime);
+        const endTime = moment(item.endTime);
+        const totalSeconds = moment(endTime).diff(moment(beginTime), 'seconds');
+        return {
+            index: i + 1,
+            deviceName: data.deviceName,
+            channelName: data.channelName,
+            beginTime: beginTime.format(TimeFormat.params),
+            endTime: endTime.format(TimeFormat.params),
+            size: bytesToMegaBytes(item.size),
+            duration: secondsToString(totalSeconds),
+            downloadUrl: '',
+            url: item.playbackUrl || '',
+        };
+    });
+    return result;
+};
+
+/**
+ * bytes转换mb
+ * @param bytes
+ * @returns
+ */
+const bytesToMegaBytes = (bytes: number) => `${(bytes / 1024 ** 2).toFixed(2)}MB`;
+
+/**
+ * 秒数=>0时0分0秒
+ * @param total
+ * @returns
+ */
+const secondsToString = (total: number) => {
+    const hour = Math.floor(total / 3600);
+    const minute = Math.floor((total % 3600) / 60);
+    const second = Math.floor(total % 60);
+    const result = `${hour > 0 ? hour + '小时' : ''}${minute > 0 ? minute + '分' : ''}${
+        second > 0 ? second + '秒' : ''
+    }`;
+    return result;
+};
+
+/**
+ * 秒数=>00:00:00
+ * @param total
+ * @returns
+ */
+export const secondsToTime = (total: number) => {
+    const hour = Math.floor(total / 3600);
+    const minute = Math.floor((total % 3600) / 60);
+    const second = Math.floor(total % 60);
+    const result = `${hour >= 10 ? hour : '0' + hour}:${minute >= 10 ? minute : '0' + minute}:${
+        second >= 10 ? second : '0' + second
+    }`;
+    return result;
+};
+
+/**
+ * 获取海康时间参数
+ * @param time 时间
+ * @returns
+ */
+export const getHKTimeString = (time: moment.MomentInput) => {
+    return moment(time).format(TimeFormat.default) + 'Z';
+};
+
+/**
+ * 获取海康分段播放地址
+ * @param totalUrl 总播放地址
+ * @param startTime 开始时间
+ * @param endTime 结束时间
+ * @returns
+ */
+export const getHKListUrl = (
+    totalUrl: string,
+    startTime: moment.MomentInput,
+    endTime: moment.MomentInput
+) => {
+    const [url, query] = totalUrl.split('?');
+    const urlParams = new URLSearchParams(query);
+    urlParams.set('beginTime', getHKTimeString(startTime));
+    urlParams.set('endTime', getHKTimeString(endTime));
+    return `${url}?${urlParams.toString()}`;
+};
+
+/**
+ *
+ * 获取flv格式分段播放地址
+ * @param totalUrl 总播放地址
+ * @param startTime 开始时间
+ * @param endTime 结束时间
+ * @returns
+ */
+export const getFlvListUrl = (
+    totalUrl: string,
+    startTime: moment.MomentInput,
+    endTime: moment.MomentInput
+) => {
+    const [url, query] = totalUrl.split('?');
+    const urlParams = new URLSearchParams(query);
+    urlParams.set('beginTime', moment(startTime).format(TimeFormat.url));
+    urlParams.set('endTime', moment(endTime).format(TimeFormat.url));
+    return `${url}?${urlParams.toString()}`;
+};

package/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

package/tsconfig.json

@@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "module": "esnext",
+    "jsx": "react-jsx",
+    "declaration": true,
+    "declarationDir": "types",
+    "sourceMap": true,
+    "outDir": "dist",
+    "strict": true,
+    "moduleResolution": "node",
+    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "downlevelIteration": true,
+    "emitDeclarationOnly": true,
+    "baseUrl": "./",
+    "paths": {
+      "@/*": ["src/*"]
+    }
+  },
+  "exclude": ["src/**/*.stories.tsx"],
+}