@vtx/player 0.0.1 → 0.0.4

package/src/components/player/index.ts

@@ -1,293 +0,0 @@
-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

@@ -1,13 +0,0 @@
-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

@@ -1,14 +0,0 @@
-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

@@ -1,27 +0,0 @@
-.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);
-    }
-}