@havue/ws-video-manager 1.0.0

package/README.md

@@ -0,0 +1,3 @@
+# Havue websocket video manager
+
+[documents](https://happypedestrian.github.io/havue/solutions/use-ws-video.html)

package/dist/types/src/hooks/useVideoPlay.d.ts

@@ -0,0 +1,73 @@
+import type { Ref, MaybeRef } from 'vue';
+import type { RenderConstructorOptionType, VideoInfo } from '../render';
+import { type WsVideoManager } from '../manager';
+export type CanvasResizeOption = {
+    /** 是否启用自动更新canvas width 和 height属性，默认为true */
+    enable?: boolean;
+    /** 设置canvas width 和 height时，
+     * 缩放的比例，即元素实际尺寸乘以scale，
+     * 放大是为了画面更清晰
+     * 默认 1
+     */
+    scale?: number;
+    /** 限制canvas width最大值，默认1920 */
+    maxWidth?: number;
+    /** 限制canvas height最大值，默认1080 */
+    maxHeight?: number;
+};
+export type ParamsOptions = {
+    /** websocket 地址 */
+    wsUrl: MaybeRef<string | undefined>;
+    /** 是否播放视频 */
+    isReady: MaybeRef<boolean>;
+    /** 使用的WsVideoManager 实例 默认为wsVideoPlayer */
+    wsVideoPlayerIns?: WsVideoManager;
+    /** 视频渲染到的canvas元素, 不传会返回一个元素引用变量：canvasRef */
+    target?: MaybeRef<HTMLCanvasElement | undefined>;
+    /** 是否自动更新canvas width和height属性的配置， 默认为 DEFAULT_RESIZE_OPTIONS */
+    canvasResize?: MaybeRef<CanvasResizeOption | undefined>;
+    /** 视口中元素不可见时断开连接， 默认为true */
+    closeOnHidden?: MaybeRef<boolean>;
+    /** 自定义Render配置 */
+    renderOptions?: MaybeRef<Partial<RenderConstructorOptionType>>;
+};
+export declare const DEFAULT_RESIZE_OPTIONS: Readonly<{
+    enable: true;
+    scale: 1;
+    maxWidth: 1920;
+    maxHeight: 1080;
+}>;
+export type ReturnType = {
+    /** canvas引用 */
+    canvasRef: Ref<HTMLCanvasElement | undefined>;
+    /** 是否静音 */
+    isMuted: Ref<boolean>;
+    /** 是否暂停 */
+    isPaused: Ref<boolean>;
+    /** 视频信息 */
+    videoInfo: Ref<VideoInfo>;
+    /** 已经连接的WebSocket地址列表 */
+    linkedWsUrlList: Ref<string[]>;
+    /** 视频流地址是否已添加 */
+    isLinked: Ref<boolean>;
+    /** 是否达到websocket拉流数最大值 */
+    isReachConnectLimit: Ref<boolean>;
+    /** 暂停其他WebSocket视频流的音频播放 */
+    pauseOtherAudio: () => void;
+    /** 设置当前WebSocket视频流的音频是否暂停 */
+    setAudioMutedState: (muted: boolean) => void;
+    /** 暂停其他WebSocket视频流的视频播放 */
+    pauseOtherVideo: () => void;
+    /** 设置当前WebSocket视频流的视频是否暂停 */
+    setOneVideoPausedState: (paused: boolean) => void;
+    /** 设置所有WebSocket视频流的视频是否暂停 */
+    setAllVideoPausedState: (paused: boolean) => void;
+    /** 刷新当前WebSocket视频流的时间，如果连接断开会进行重连 */
+    refresh: () => void;
+};
+/**
+ * websocket视频流播放
+ * @param {ParamsOptions} options 配置项
+ * @returns
+ */
+export declare function useVideoPlay(options: ParamsOptions): ReturnType;

package/dist/types/src/index.d.ts

@@ -0,0 +1,5 @@
+export * from './manager';
+export * from './render';
+import { WsVideoManager } from './manager';
+declare const _default: WsVideoManager;
+export default _default;

package/dist/types/src/loader/index.d.ts

@@ -0,0 +1,2 @@
+import WebSocketLoader from './websocket-loader';
+export { WebSocketLoader };

package/dist/types/src/loader/websocket-loader.d.ts

@@ -0,0 +1,62 @@
+/** 心跳配置 */
+type HeartbeatConfigType = {
+    /** 只发送一次 */
+    once: boolean;
+    /** 心跳消息 */
+    message: string;
+    /** 时间间隔 */
+    interval?: number;
+};
+/** 重连配置 */
+type InterruptConfigType = {
+    /** 是否重连 */
+    reconnect: boolean;
+    /** 最大重连次数 */
+    maxReconnectTimes: number;
+    /** 每次重连延时 */
+    delay: number;
+};
+export type WebSocketOptionsType = {
+    /** WebSocket 子协议 WebSocket(url: string, protocols: string | string[]) */
+    protocols?: string | string[];
+    /** WebSocket 连接所传输二进制数据的类型 */
+    binaryType?: WebSocket['binaryType'];
+    heartbeat?: HeartbeatConfigType;
+    interrupt?: InterruptConfigType;
+};
+type EventType = {
+    open: Event;
+    message: MessageEvent;
+    close: CloseEvent;
+    error: Event;
+    reconnect: undefined;
+};
+declare class WebSocketLoader {
+    private _url;
+    private _protocols;
+    private _binaryType;
+    private _ws;
+    private _heartbeatConfig;
+    private _heartbeatTimer;
+    private _eventMap;
+    private _isManualClose;
+    private _interruptConfig;
+    private _interruptReconnectTimes;
+    private _interruptReconnectTimer;
+    constructor(url: string, options?: WebSocketOptionsType);
+    get isConnecting(): boolean;
+    private triggerEvents;
+    private bindWebSocketEvents;
+    private startHeartbeat;
+    private stopHeartbeat;
+    private innerReconnect;
+    open(): void;
+    close(): void;
+    reconnect(): void;
+    destroy(): void;
+    on<T extends keyof EventType>(eventName: T, callback: (event: EventType[T]) => void): void;
+    off<T extends keyof EventType>(eventName: T, callback: (event: EventType[T]) => void): void;
+    clear<T extends keyof EventType>(eventName: T): void;
+    sendMessage(message: string): void;
+}
+export default WebSocketLoader;

package/dist/types/src/manager/index.d.ts

@@ -0,0 +1,144 @@
+import type { WebSocketOptionsType } from '../loader/websocket-loader';
+import type { RenderConstructorOptionType, VideoInfo } from '../render';
+import { EventBus } from '@havue/shared';
+import { RenderEventsEnum, AudioState, VideoState } from '../render';
+export type WsVideoManaCstorOptionType = {
+    /** 预监流连接数量限制, 移动端默认10个，pc端默认32个 */
+    connectLimit?: number;
+    /** WebSocketLoader 实例配置 */
+    wsOptions?: WebSocketOptionsType;
+    /**
+     * websocket重连时，重新解析视频编码方式，
+     * 默认 true
+     */
+    reparseMimeOnReconnect?: boolean;
+    /** Render 实例配置 */
+    renderOptions?: Partial<RenderConstructorOptionType>;
+    /**
+     * 是否使用WebGL，
+     * 默认 false，
+     * WebGL在不同游览器，以及受限于显存，不能同时创建过多WebGL上下文，一般8-16个 */
+    useWebgl?: boolean;
+};
+export declare enum EventEnums {
+    WS_URL_CHANGE = "wsUrlChange",
+    SOCKET_CLOSE = "socketClose",
+    CONNECT_LIMIT = "connectLimit"
+}
+type Events = {
+    [EventEnums.WS_URL_CHANGE]: (urls: string[]) => void;
+    [RenderEventsEnum.AUDIO_STATE_CHANGE]: (url: string, state: AudioState) => void;
+    [RenderEventsEnum.VIDEO_INFO_UPDATE]: (url: string, info: VideoInfo) => void;
+    [RenderEventsEnum.VIDEO_STATE_CHANGE]: (url: string, state: VideoState) => void;
+    [EventEnums.SOCKET_CLOSE]: (url: string) => void;
+    [EventEnums.CONNECT_LIMIT]: () => void;
+};
+export declare const WsVideoManagerEventEnums: typeof EventEnums & typeof RenderEventsEnum;
+export declare class WsVideoManager extends EventBus<Events> {
+    /** socket连接 渲染相关对应信息 */
+    private _wsInfoMap;
+    private _option;
+    private _reqAnimationID;
+    constructor(options?: WsVideoManaCstorOptionType);
+    get linkedUrlList(): string[];
+    get connectLimit(): number;
+    private _setAnimate;
+    /**
+     * 添加socket实例
+     * @param url socket地址
+     * @returns
+     */
+    private _addSocket;
+    /**
+     * 绑定render事件
+     * @param url 连接地址
+     * @param render Render实例
+     */
+    private _bindRenderEvent;
+    /**
+     * 销毁socket实例
+     * @param url socket地址
+     */
+    private _removeSocket;
+    /**
+     * 绑定socket事件
+     * @param url 连接地址
+     * @param socket WebSocketLoader实例
+     */
+    private _bindSocketEvent;
+    private _emitWsUrlListChange;
+    /**
+     * url对应的 socket实例是否已存在
+     * @param url socket地址
+     * @returns boolean
+     */
+    private _isSocketExist;
+    /**
+     * 添加url对应socket，以及需要绘制的canvas元素
+     * @param canvas canvas元素
+     * @param url socket url地址
+     */
+    addCanvas(canvas: HTMLCanvasElement, url: string, renderOptions?: Partial<RenderConstructorOptionType>): void;
+    /**
+     * 初始化canvas背景
+     * @param canvas canvas元素
+     * @returns
+     */
+    /**
+     * 删除canvas元素
+     * @param canvas canvas元素
+     */
+    removeCanvas(canvas: HTMLCanvasElement): void;
+    /**
+     * 返回canvas是否已经添加过
+     * @param canvas canvas元素
+     * @returns boolean
+     */
+    isCanvasExist(canvas: HTMLCanvasElement): boolean;
+    /** 设置全部render静音状态 */
+    setAllVideoMutedState(muted: boolean): void;
+    /** 更新单个render实例的配置 */
+    updateRenderOptions(url: string, options?: Partial<RenderConstructorOptionType>): void;
+    /**
+     * 设置单个render静音状态
+     * @param url
+     * @param muted boolean 是否静音
+     */
+    setOneMutedState(url: string, muted: boolean): void;
+    /**
+     * 获取url对应render video元素是否静音
+     * @param url socket地址
+     */
+    getOneMutedState(url: string): boolean;
+    /**
+     * 单个解除静音，其他未静音的变成静音，只播放一个
+     * @param url socket地址
+     */
+    playOneAudio(url: string): void;
+    /**
+     * 设置单个render是否继续处理ws数据
+     * @param url
+     */
+    setOneVideoPausedState(url: string, paused: boolean): void;
+    /** 设置全部render是否继续处理ws数据 */
+    setAllVideoPausedState(paused: boolean): void;
+    /**
+     * 获取url对应render video元素是否继续播放
+     * @param url socket地址
+     */
+    getOneVideoPausedState(url: string): boolean;
+    /**
+     * 单个视频继续播放，其他暂停处理数据
+     * @param url socket地址
+     */
+    playOneVideo(url: string): void;
+    /**
+     * 刷新socket，以及播放时间
+     */
+    refresh(url?: string): void;
+    /**
+     * 销毁
+     */
+    destroy(): void;
+}
+export {};

package/dist/types/src/render/drawer.d.ts

@@ -0,0 +1,44 @@
+/**
+ * 绘制视频到canvas中
+ */
+declare class CanvasDrawer {
+    private _canvas;
+    private _useGl;
+    private _ctx2d;
+    private _gl;
+    private _program;
+    private _positionBuffer;
+    private _texCoordBuffer;
+    private _texture;
+    private _positionLocation;
+    private _texCoordLocation;
+    private _textureLocation;
+    private _glReady;
+    constructor(canvas: HTMLCanvasElement, useWebgl?: boolean);
+    private init2d;
+    /**
+     * 初始化 webgl
+     */
+    private initGl;
+    /**
+     * 创建着色器源码
+     */
+    private createShaderSource;
+    /**
+     * 创建着色器
+     */
+    private createShader;
+    /**
+     * 创建着色器程序
+     */
+    private createProgram;
+    /**
+     * 绘制
+     */
+    draw(video: HTMLVideoElement): void;
+    /**
+     * 销毁
+     */
+    destroy(): void;
+}
+export { CanvasDrawer };

package/dist/types/src/render/index.d.ts

@@ -0,0 +1,105 @@
+import { EventBus } from '@havue/shared';
+export type RenderConstructorOptionType = {
+    /** 当前播放currentTime和最新视频时长最多相差 秒数，默认0.3s */
+    liveMaxLatency: number;
+    /** 最多缓存ws传输的未处理的buffer数据大小, 默认200kb */
+    maxCacheBufByte: number;
+    /** 最多存储的时间，用于清除在currentTime之前x秒时间节点前的buffer数据, 默认10s */
+    maxCache: number;
+};
+export declare const WS_VIDEO_RENDER_DEFAULT_OPTIONS: Readonly<{
+    liveMaxLatency: 0.3;
+    maxCacheBufByte: number;
+    maxCache: 10;
+}>;
+export declare enum AudioState {
+    NOTMUTED = "notmuted",
+    MUTED = "muted"
+}
+export declare enum VideoState {
+    PLAY = "play",
+    PAUSE = "pause"
+}
+export type VideoInfo = {
+    width: number;
+    height: number;
+};
+export declare enum RenderEventsEnum {
+    AUDIO_STATE_CHANGE = "audioStateChange",
+    VIDEO_STATE_CHANGE = "videoStateChange",
+    VIDEO_INFO_UPDATE = "videoInfoUpdate"
+}
+export type RenderEvents = {
+    [RenderEventsEnum.AUDIO_STATE_CHANGE]: (s: AudioState) => void;
+    [RenderEventsEnum.VIDEO_STATE_CHANGE]: (s: VideoState) => void;
+    [RenderEventsEnum.VIDEO_INFO_UPDATE]: (info: VideoInfo) => void;
+};
+export declare class Render extends EventBus<RenderEvents> {
+    /** video元素 */
+    private _videoEl;
+    /** pixi.js 实例 */
+    /** mp4box 实例 */
+    private _mp4box;
+    /** 接收到的socket消息 视频数据buffer数组 */
+    private _bufsQueue;
+    /** MediaSource 实例 */
+    private _mediaSource;
+    /** SourceBuffer 实例 */
+    private _sourceBuffer;
+    /** 用于MediaSource的mimeType */
+    private _mimeType;
+    /** 是否暂停播放 */
+    private _paused;
+    private _options;
+    private _cacheAnimationID;
+    constructor(options?: Partial<RenderConstructorOptionType>);
+    get muted(): boolean;
+    set muted(val: boolean);
+    set paused(paused: boolean);
+    get paused(): boolean;
+    get videoEl(): HTMLVideoElement | undefined;
+    /** 更新实例配置 */
+    updateOptions(option?: Partial<RenderConstructorOptionType>): void;
+    /**
+     * 添加视频流buffer数据
+     * @param buf
+     */
+    appendMediaBuffer(bufs: Array<ArrayBuffer & {
+        fileStart: number;
+    }>): void;
+    /**
+     * mp4box解析完成
+     * @param info mp4box解析信息
+     */
+    private _onMp4boxReady;
+    /**
+     * 初始化视频元素
+     */
+    private _setupVideo;
+    /**
+     * 是否支持Media Source Extention
+     * @returns boolean
+     */
+    isSupportMSE(): boolean;
+    /**
+     * 初始化MSE
+     * @returns
+     */
+    private _setupMSE;
+    /**
+     * 将_bufsQueue中的数据添加到SourceBuffer中
+     * @returns
+     */
+    private _cache;
+    /**
+     * 刷新播放时间为最新
+     */
+    refresh(): void;
+    /** 重置解析的视频mime type */
+    resetMimeType(): void;
+    private destroyMediaSource;
+    /**
+     * 销毁
+     */
+    destroy(): void;
+}