@vtx/player 0.0.1

package/src/components/player/index.ts

@@ -0,0 +1,293 @@
+import FlvJs from 'flv.js';
+import Hls from 'hls.js';
+import moment from 'moment';
+
+import { getHKTimeString, getPlayerParams } from '@/utils';
+
+/** 视频流格式 */
+export type VideoType = 'flv' | 'hls' | 'hk_ws';
+interface ConstructorParams {
+    url: string;
+    /** 渲染容器 */
+    container: HTMLDivElement;
+    /** 是否直播，flv.js需要 */
+    live?: boolean;
+    /** 视频流格式 */
+    type?: VideoType;
+    /** 开始时间，历史回放需要 */
+    startTime?: moment.MomentInput;
+    /** 结束时间，历史回放需要 */
+    endTime?: moment.MomentInput;
+}
+/**
+ * 视频播放核心类
+ */
+class Player {
+    /** 视频地址 */
+    public url: string;
+    /** 视频流格式 */
+    public type: VideoType;
+    private player: FlvJs.Player | Hls | JSPlugin | null = null;
+    private video: HTMLVideoElement;
+    /** 开始时间，历史回放需要 */
+    private startTime?: moment.MomentInput;
+    /** 结束时间，历史回放需要 */
+    private endTime?: moment.MomentInput;
+    /** 跳转时间，用于处理进度条位置 */
+    private seekTime?: moment.Moment;
+    /** 之前的视频播放速度，用于处理海康音量控制 */
+    private preSpeed = 1;
+    constructor(params: ConstructorParams) {
+        const { url, container, live = true, type, startTime, endTime } = params;
+        const playerParams = getPlayerParams(url, live, startTime, endTime);
+        this.type = type || playerParams.type; // 如果不传递type，则通过url解析type值
+        this.url = playerParams.url;
+        this.startTime = startTime;
+        this.endTime = endTime;
+
+        const video = document.createElement('video'); // 生成video元素
+        video.className = 'vtx-player-video';
+        video.muted = true; //设置静音
+        this.video = video as HTMLVideoElement;
+
+        if (this.type === 'flv' && FlvJs.isSupported() && video) {
+            container.appendChild(video);
+            this.player = FlvJs.createPlayer({
+                type: 'flv',
+                isLive: live,
+                url: this.url,
+            });
+            this.player.attachMediaElement(this.video);
+            this.player.load();
+        }
+        // 处理hls格式视频
+        if (this.type === 'hls' && Hls.isSupported() && video) {
+            container.appendChild(video);
+            this.player = new Hls();
+            this.player.loadSource(this.url);
+            this.player.attachMedia(this.video);
+        }
+        // 处理海康视频
+        if (this.type === 'hk_ws') {
+            this.player = new JSPlugin({
+                szId: container.id,
+                szBasePath: '/',
+                iMaxSplit: 1,
+                iCurrentSplit: 1,
+            });
+            const video = document.getElementById(`${container.id}_playVideo0`) as HTMLVideoElement;
+            this.video = video;
+        }
+    }
+    /** 播放 */
+    play() {
+        if (this.type === 'flv') {
+            const player = this.player as FlvJs.Player;
+            return player.play() as Promise<void>;
+        }
+        if (this.type === 'hls') {
+            return this.video.play();
+        }
+        if (this.type === 'hk_ws') {
+            const player = this.player as JSPlugin;
+            return player.JS_Play(this.url, { playURL: this.url, mode: 0 }, 1);
+        }
+        return Promise.resolve();
+    }
+    /** 回放 */
+    playBack() {
+        if (this.type === 'hk_ws') {
+            const player = this.player as JSPlugin;
+
+            return player.JS_Play(
+                this.url,
+                { playURL: this.url, mode: 0 },
+                1,
+                getHKTimeString(this.startTime),
+                getHKTimeString(this.endTime)
+            );
+        } else {
+            return this.play();
+        }
+    }
+    /** 销毁 */
+    destroy() {
+        if (this.type === 'flv') {
+            const player = this.player as FlvJs.Player;
+            player.destroy();
+            this.player = null;
+            this.video.remove();
+        }
+        if (this.type === 'hls') {
+            const player = this.player as Hls;
+            player.destroy();
+            this.player = null;
+            this.video.remove();
+        }
+        if (this.type === 'hk_ws') {
+            const player = this.player as JSPlugin;
+            player.JS_Stop(1);
+        }
+    }
+    /** 截图 */
+    capture(captureName = '视频截图', time = true) {
+        let name = captureName;
+        if (time) name += `-${moment().format('YYYYMMDDHHmmss')}`;
+        if (this.type === 'hk_ws') {
+            const player = this.player as JSPlugin;
+            if (player) player.JS_CapturePicture(1, name, 'JPEG');
+        } else {
+            Capture(this.video, name);
+        }
+    }
+    /** 尺寸重置 */
+    resize() {
+        if (this.type === 'hk_ws') {
+            const player = this.player as JSPlugin;
+            player.JS_Resize();
+        }
+    }
+    /**
+     * 设置音量
+     * @param value
+     */
+    setVolume(value: number) {
+        if (this.type === 'flv') {
+            const player = this.player as FlvJs.Player;
+            player.volume = value / 100;
+        }
+        if (this.type === 'hls') {
+            this.video.volume = value / 100;
+        }
+        if (this.type === 'hk_ws') {
+            const player = this.player as JSPlugin;
+            player.JS_SetVolume(1, value);
+        }
+    }
+    /**
+     * 设置播放速度
+     * @param speed
+     */
+    setSpeed(speed: 0.5 | 1 | 2) {
+        if (this.type === 'hk_ws') {
+            const player = this.player as JSPlugin;
+            if (this.preSpeed / speed === 2) {
+                player.JS_Slow(1);
+            }
+            if (this.preSpeed / speed === 4) {
+                player.JS_Slow(1).then(() => player.JS_Slow(1));
+            }
+            if (speed / this.preSpeed === 2) {
+                player.JS_Fast(1);
+            }
+            if (speed / this.preSpeed === 4) {
+                player.JS_Fast(1).then(() => player.JS_Fast(1));
+            }
+            this.preSpeed = speed;
+        } else {
+            this.video.playbackRate = speed;
+        }
+    }
+    /**
+     * 时间更新事件
+     * @param callback 回调函数
+     */
+    onTimeUpdate(callback: (currentTime: number) => void) {
+        this.video.addEventListener('timeupdate', () => {
+            let currentTime = this.video.currentTime;
+            if (this.type === 'hk_ws' && this.seekTime)
+                currentTime = currentTime + this.seekTime.diff(this.startTime, 'seconds');
+            callback(currentTime);
+        });
+    }
+    /** 跳转到 */
+    async seekTo(time: number) {
+        if (this.type === 'hk_ws') {
+            const player = this.player as JSPlugin;
+            const seekTime = moment(this.startTime)?.add(time, 'seconds');
+            await player.JS_Seek(1, getHKTimeString(seekTime), getHKTimeString(this.endTime));
+            this.seekTime = seekTime;
+        } else {
+            this.video.currentTime = time;
+            return Promise.resolve();
+        }
+    }
+    /**
+     * 暂停播放
+     * @param callback 回调函数
+     */
+    pause(callback?: () => void) {
+        if (this.type === 'hk_ws') {
+            const player = this.player as JSPlugin;
+            player.JS_Pause(1).then(() => callback && callback());
+        } else {
+            this.video.pause();
+            callback && callback();
+        }
+    }
+    /**
+     * 恢复播放
+     * @param callback 回调函数
+     */
+    resume(callback?: () => void) {
+        if (this.type === 'hk_ws') {
+            const player = this.player as JSPlugin;
+            player.JS_Resume(1).then(() => callback && callback());
+        } else {
+            this.video.play();
+            callback && callback();
+        }
+    }
+    /**
+     * 开始对讲
+     * @param url 对讲地址
+     */
+    startTalk(url: string) {
+        if (this.type === 'hk_ws') {
+            const player = this.player as JSPlugin;
+            return player.JS_StartTalk(url);
+        }
+        return Promise.reject();
+    }
+    /**
+     * 开始对讲
+     * @param state 状态
+     */
+    stopTalk() {
+        if (this.type === 'hk_ws') {
+            const player = this.player as JSPlugin;
+            return player.JS_StopTalk();
+        }
+        return Promise.reject();
+    }
+}
+
+/**
+ * 截图
+ * @param video
+ */
+const Capture = (video: HTMLVideoElement, name: string) => {
+    const canvas = document.createElement('canvas');
+    canvas.width = video.videoWidth;
+    canvas.height = video.videoHeight;
+    const context = canvas.getContext('2d');
+    if (context) {
+        context.drawImage(video, 0, 0, canvas.width, canvas.height);
+        let dataURL;
+        canvas.toBlob((blob) => {
+            if (blob) {
+                dataURL = URL.createObjectURL(blob);
+                const link = document.createElement('a');
+                link.href = dataURL;
+                link.download = `${name}.png`;
+                link.style.display = 'none';
+                document.body.appendChild(link);
+                link.click();
+                document.body.removeChild(link);
+                URL.revokeObjectURL(dataURL);
+            }
+        });
+    }
+};
+
+export default Player;

package/src/context/index.ts

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

package/src/hooks/useSettings.tsx

@@ -0,0 +1,14 @@
+import { useContext } from 'react';
+
+import { PlayerThemeContext } from '@/context';
+
+/**
+ * 获取配置信息
+ * @returns
+ */
+const useSettings = () => {
+    const { theme } = useContext(PlayerThemeContext);
+    return { theme, isDark: theme === 'light' };
+};
+
+export default useSettings;

package/src/icons/index.less

@@ -0,0 +1,27 @@
+.control-icon {
+    cursor: pointer;
+    fill: rgb(255 255 255 / 65%);
+
+    > svg {
+        transition: fill 0.3s;
+    }
+
+    &:hover {
+        fill: #40a9ff;
+    }
+
+    &.active {
+        fill: #1890ff;
+    }
+}
+
+.close-icon {
+    width: 14px;
+    cursor: pointer;
+    fill: rgb(255 255 255 / 65%);
+    transition: transform 0.3s;
+
+    &:hover {
+        transform: rotate(180deg);
+    }
+}