@havue/solutions 1.0.0

package/dist/solutions.mjs

@@ -0,0 +1,2 @@
+export * from "@havue/bc-connect";
+export * from "@havue/ws-video-manager";

package/dist/solutions.umd.js

@@ -0,0 +1,18 @@
+(function(global, factory) {
+  typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("@havue/bc-connect"), require("@havue/ws-video-manager")) : typeof define === "function" && define.amd ? define(["exports", "@havue/bc-connect", "@havue/ws-video-manager"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global.solutions = {}, global.bcConnect, global.wsVideoManager));
+})(this, function(exports2, bcConnect, wsVideoManager) {
+  "use strict";
+  Object.keys(bcConnect).forEach((k) => {
+    if (k !== "default" && !Object.prototype.hasOwnProperty.call(exports2, k)) Object.defineProperty(exports2, k, {
+      enumerable: true,
+      get: () => bcConnect[k]
+    });
+  });
+  Object.keys(wsVideoManager).forEach((k) => {
+    if (k !== "default" && !Object.prototype.hasOwnProperty.call(exports2, k)) Object.defineProperty(exports2, k, {
+      enumerable: true,
+      get: () => wsVideoManager[k]
+    });
+  });
+  Object.defineProperty(exports2, Symbol.toStringTag, { value: "Module" });
+});

package/dist/types/bc-connect/src/index.d.ts

@@ -0,0 +1 @@
+export * from './manager';

package/dist/types/bc-connect/src/manager.d.ts

@@ -0,0 +1,135 @@
+/** 事件数据类型 */
+export type BcConnectSendMessageType = {
+    /** 事件类型 */
+    type: string;
+    /** 数据 */
+    data: any;
+    /** 发送事件的实例id */
+    id: number;
+    /** 消息是发送给目标实例id的 */
+    targetId?: number;
+};
+/** 事件类型 */
+export declare enum BcConnectEventTypeEnum {
+    /** 初始广播 */
+    Broadcast = "Hello world",
+    /** 回复初始广播 */
+    Broadcast_Reply = "I can hear you",
+    /** 主节点心跳 */
+    Main_Node_Hearbeat = "\u82CD\u5929\u8FD8\u5728\uFF0C\u522B\u7ACB\u9EC4\u5929",
+    /** 回复主节点心跳 */
+    Res_Main_Node_Hearbeat = "\u82CD\u5929\u5728\u4E0A\uFF0C\u53D7\u6211\u4E00\u62DC",
+    /** 长时间未收到主节点心跳，我想当主节点，你们同意吗 */
+    Req_Be_Main_Node = "\u82CD\u5929\u5DF2\u6B7B\uFF0C\u9EC4\u5929\u5F53\u7ACB",
+    /** 排资论辈，我应是主节点，不同意 */
+    Res_Be_Main_Node = "\u6211\u662F\u9EC4\u5929\uFF0C\u5C14\u7B49\u9000\u4E0B",
+    /** 当前BC节点类型更改 */
+    Node_Type_Change = "node type change",
+    /** 其他标签页BC节点id列表更新 */
+    Friend_List_Update = "friend list update"
+}
+/** 当前webview BroadcastChannel节点类型 */
+export declare enum BcConnectNodeTypeEnum {
+    Main = "main",
+    Normal = "normal"
+}
+/**
+ * 使用BroadcastChannel与其他标签页进行通信
+ */
+export declare class BroadcastChannelManager {
+    /** 通道名称 */
+    private _bcName;
+    /** BroadcastChannel实例 */
+    private _broadcastChannel;
+    /** 事件map */
+    private _eventMap;
+    /** 主节点发送心跳的interval */
+    private _mainNodeMsgInterval;
+    /** 认为主节点掉线的timeout */
+    private _mainNoceMsgTimeoutTimer;
+    /** 当前实例id */
+    id: number;
+    /** 记录的友方id数组 */
+    private _oldFrendChannelIdList;
+    /** 正在更新的右方id数组 */
+    private _friendChannelIdSet;
+    /** 当前节点类型 */
+    private _nodeType;
+    /** 是否开启调试模式，会在控制台打印相关信息 */
+    private _debug;
+    constructor(name: string, debug?: boolean);
+    get nodeType(): BcConnectNodeTypeEnum | undefined;
+    get friendList(): number[];
+    connect(): void;
+    close(): void;
+    /**
+     * 切换节点类型
+     * @param {BcConnectNodeTypeEnum} type
+     * @returns
+     */
+    private _setNodeType;
+    /** 更新友方列表 */
+    private _updateFriendList;
+    /** 绑定事件 */
+    private _bindBroadcastChannelEvent;
+    /** 监听节点类型切换事件 */
+    private _bindNodeEvent;
+    /** 获取最新的友方列表 */
+    private _getNewFriendList;
+    /**
+     * 更新当前节点类型
+     */
+    private _updataNodeType;
+    private _timeoutToBeMainNode;
+    /**
+     * 保持记录的活跃的友方id列表
+     * 清空正在记录的友方id列表
+     */
+    private _catchOldFriend;
+    /**
+     * 申请成为主节点
+     */
+    private _req_beMainNode;
+    /**
+     * 添加友方
+     * @param id 节点id
+     */
+    _addFriend(id: number): void;
+    /**
+     * 广播消息
+     * @param type 消息类型
+     * @param data 数据
+     */
+    send(type: string, data?: any): void;
+    /**
+     * 给特定id的节点发送消息
+     * @param type 消息类型
+     * @param targetId 目标节点id
+     * @param data 数据
+     */
+    sendToTarget(type: string, targetId: number, data?: any): void;
+    /**
+     * 注册事件
+     * @param { string } event 事件类型
+     * @param callback 回调
+     * @returns void
+     */
+    on(event: string, callback: (_: BcConnectSendMessageType) => void): void;
+    /**
+     * 注销事件
+     * @param { string } event 事件类型
+     * @param callback 事件回调
+     * @returns
+     */
+    off(event: string, callback?: (_: BcConnectSendMessageType) => void): void;
+    /**
+     * 触发事件
+     * @param { string } event 事件类型
+     * @param data 数据
+     */
+    emit(event: string, data: BcConnectSendMessageType): void;
+    /**
+     * 销毁
+     */
+    destroy(): void;
+}

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

@@ -0,0 +1,2 @@
+export * from '@havue/bc-connect';
+export * from '@havue/ws-video-manager';

package/dist/types/ws-video-manager/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/ws-video-manager/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/ws-video-manager/src/loader/index.d.ts

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

package/dist/types/ws-video-manager/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/ws-video-manager/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/ws-video-manager/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/ws-video-manager/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;
+}

package/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "@havue/solutions",
+  "version": "1.0.0",
+  "description": "Javascript class for special scene",
+  "keywords": [
+    "havue",
+    "js",
+    "class",
+    "solutions",
+    "scene"
+  ],
+  "license": "MIT",
+  "homepage": "https://happypedestrian.github.io/havue/guide/",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/HappyPedestrian/havue.git"
+  },
+  "dependencies": {
+    "lodash": "^4.17.21",
+    "@havue/shared": "^1.0.0",
+    "@havue/bc-connect": "^1.0.0",
+    "@havue/ws-video-manager": "^1.0.0"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "main": "./dist/solutions.umd.js",
+  "module": "./dist/solutions.mjs",
+  "types": "./dist/types/src/index.d.ts",
+  "exports": {
+    ".": {
+      "require": "./dist/solutions.umd.js",
+      "import": "./dist/solutions.mjs",
+      "types": "./dist/types/src/index.d.ts"
+    }
+  },
+  "scripts": {
+    "build:package": "vite build --mode package",
+    "build:full": "vite build --mode full",
+    "build:full-min": "vite build --mode full-min",
+    "build": "pnpm run build:package && pnpm run build:full && pnpm run build:full-min"
+  }
+}

package/src/index.ts

@@ -0,0 +1,2 @@
+export * from '@havue/bc-connect'
+export * from '@havue/ws-video-manager'

package/vite.config.ts

@@ -0,0 +1,4 @@
+import { defineConfig } from 'vite'
+import { getConfig } from '../../internal/build/src'
+
+export default defineConfig(({ mode }) => getConfig(mode))

package/ws-video-manager/README.md

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