@havue/use-ws-video 1.0.0

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

@@ -0,0 +1,72 @@
+import type { Ref, MaybeRef } from 'vue';
+import type { RenderConstructorOptionType, VideoInfo, WsVideoManager } from '@havue/ws-video-manager';
+export type UseWsVideoCanvasResizeOption = {
+    /** 是否启用自动更新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 UseWsVideoParamsOptions = {
+    /** websocket 地址 */
+    wsUrl: MaybeRef<string | undefined>;
+    /** 是否播放视频 */
+    isReady: MaybeRef<boolean>;
+    /** 使用的WsVideoManager 实例 默认为wsVideoPlayer */
+    wsVideoPlayerIns?: WsVideoManager;
+    /** 视频渲染到的canvas元素, 不传会返回一个元素引用变量：canvasRef */
+    target?: MaybeRef<HTMLCanvasElement | undefined>;
+    /** 是否自动更新canvas width和height属性的配置， 默认为 USE_WS_VIDEO_DEFAULT_RESIZE_OPTIONS */
+    canvasResize?: MaybeRef<UseWsVideoCanvasResizeOption | undefined>;
+    /** 视口中元素不可见时断开连接， 默认为true */
+    closeOnHidden?: MaybeRef<boolean>;
+    /** 自定义Render配置 */
+    renderOptions?: MaybeRef<Partial<RenderConstructorOptionType>>;
+};
+export declare const USE_WS_VIDEO_DEFAULT_RESIZE_OPTIONS: Readonly<{
+    enable: true;
+    scale: 1;
+    maxWidth: 1920;
+    maxHeight: 1080;
+}>;
+export type UseWsVideoReturnType = {
+    /** 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 {UseWsVideoParamsOptions} options 配置项
+ * @returns
+ */
+export declare function useWsVideo(options: UseWsVideoParamsOptions): UseWsVideoReturnType;

package/dist/use-ws-video.mjs

@@ -0,0 +1,206 @@
+import { ref, computed, toValue, isRef, watch, onBeforeUnmount } from "vue";
+import { useElementVisibility, useResizeObserver } from "@vueuse/core";
+import wsVideoPlayer, { WsVideoManagerEventEnums, AudioState, VideoState } from "@havue/ws-video-manager";
+const USE_WS_VIDEO_DEFAULT_RESIZE_OPTIONS = Object.freeze({
+  enable: true,
+  scale: 1,
+  maxWidth: 1920,
+  maxHeight: 1080
+});
+function useWsVideo(options) {
+  let canvasRef = ref();
+  const {
+    wsUrl,
+    isReady,
+    target,
+    wsVideoPlayerIns = wsVideoPlayer,
+    canvasResize,
+    closeOnHidden,
+    renderOptions
+  } = options;
+  if (target) {
+    canvasRef = computed(() => {
+      return isRef(target) ? toValue(target) : target;
+    });
+  }
+  const _isReady = computed(() => {
+    return isRef(isReady) ? toValue(isReady) : isReady;
+  });
+  const previewWsUrl = computed(() => {
+    const url = wsUrl;
+    const _wsUrl = (isRef(url) ? toValue(url) : url) || "";
+    return _wsUrl;
+  });
+  const _canvasResizeOpt = computed(() => {
+    const canvasResizeOpt = isRef(canvasResize) ? toValue(canvasResize) : canvasResize || {};
+    const opt = Object.assign({}, USE_WS_VIDEO_DEFAULT_RESIZE_OPTIONS, canvasResizeOpt || {});
+    return opt;
+  });
+  const _closeOnHidden = computed(() => {
+    const closeOpt = isRef(closeOnHidden) ? toValue(closeOnHidden) : closeOnHidden;
+    return closeOpt === void 0 ? true : closeOpt;
+  });
+  const _renderOptions = computed(() => {
+    const renderOpt = isRef(renderOptions) ? toValue(renderOptions) : renderOptions || void 0;
+    return renderOpt;
+  });
+  const isMuted = ref(true);
+  const isPaused = ref(false);
+  const videoInfo = ref({
+    width: 0,
+    height: 0
+  });
+  const lastPreviewUrl = ref();
+  const linkedWsUrlList = ref([...wsVideoPlayer.linkedUrlList]);
+  const isLinked = computed(() => {
+    return linkedWsUrlList.value.includes(previewWsUrl.value);
+  });
+  const connectLimit = wsVideoPlayer.connectLimit;
+  const isReachConnectLimit = computed(() => {
+    return linkedWsUrlList.value.length >= connectLimit;
+  });
+  function handleWsUrlChange(urls) {
+    linkedWsUrlList.value = [...urls];
+  }
+  function handleAudioStateChange(url, state) {
+    if (url === previewWsUrl.value) {
+      console.log("音频状态更改", url, state);
+      isMuted.value = state === AudioState.MUTED;
+    }
+  }
+  function handleVideoStateChange(url, state) {
+    if (url === previewWsUrl.value) {
+      console.log("视频状态更改", url, state);
+      isPaused.value = state === VideoState.PAUSE;
+    }
+  }
+  function handleVideoInfoUpdate(url, info) {
+    if (url === previewWsUrl.value) {
+      videoInfo.value = {
+        ...info
+      };
+    }
+  }
+  wsVideoPlayer.on(WsVideoManagerEventEnums.WS_URL_CHANGE, handleWsUrlChange);
+  wsVideoPlayer.on(WsVideoManagerEventEnums.AUDIO_STATE_CHANGE, handleAudioStateChange);
+  wsVideoPlayer.on(WsVideoManagerEventEnums.VIDEO_STATE_CHANGE, handleVideoStateChange);
+  wsVideoPlayer.on(WsVideoManagerEventEnums.VIDEO_INFO_UPDATE, handleVideoInfoUpdate);
+  const canvasIsVisible = useElementVisibility(canvasRef);
+  let stopResizeObserver = () => {
+  };
+  watch(
+    _canvasResizeOpt,
+    (val) => {
+      stopResizeObserver && stopResizeObserver();
+      if (val.enable) {
+        const { stop } = useResizeObserver(canvasRef, (entries) => {
+          if (!canvasRef.value) {
+            return;
+          }
+          const [entry] = entries;
+          const { width, height } = entry.contentRect;
+          const { scale, maxWidth, maxHeight } = _canvasResizeOpt.value;
+          let comWidth = width * scale;
+          let comHeight = height * scale;
+          const canvasRate = width / height;
+          if (comWidth > maxWidth || comHeight > maxHeight) {
+            const optionRate = maxWidth / maxHeight;
+            comWidth = canvasRate > optionRate ? maxWidth : maxHeight * canvasRate;
+            comHeight = canvasRate > optionRate ? maxWidth / canvasRate : maxHeight;
+          }
+          canvasRef.value.width = comWidth;
+          canvasRef.value.height = comHeight;
+        });
+        stopResizeObserver = stop;
+      }
+    },
+    {
+      immediate: true,
+      deep: true
+    }
+  );
+  watch(
+    _renderOptions,
+    () => {
+      if (_renderOptions.value && isLinked.value) {
+        wsVideoPlayerIns.updateRenderOptions(previewWsUrl.value, _renderOptions.value);
+      }
+    },
+    {
+      deep: true
+    }
+  );
+  onBeforeUnmount(() => {
+    stopResizeObserver();
+    wsVideoPlayer.off(WsVideoManagerEventEnums.WS_URL_CHANGE, handleWsUrlChange);
+    wsVideoPlayer.off(WsVideoManagerEventEnums.AUDIO_STATE_CHANGE, handleAudioStateChange);
+    wsVideoPlayer.off(WsVideoManagerEventEnums.VIDEO_STATE_CHANGE, handleVideoStateChange);
+    wsVideoPlayer.off(WsVideoManagerEventEnums.VIDEO_INFO_UPDATE, handleVideoInfoUpdate);
+    if (!canvasRef.value) return;
+    wsVideoPlayerIns.removeCanvas(canvasRef.value);
+    isMuted.value = true;
+  });
+  const canPreview = computed(() => {
+    if (_closeOnHidden.value) {
+      return canvasIsVisible.value && _isReady.value && previewWsUrl.value;
+    }
+    return _isReady.value && previewWsUrl.value;
+  });
+  watch([canvasRef, canPreview, linkedWsUrlList, previewWsUrl], () => {
+    if (!canvasRef.value) {
+      return;
+    }
+    if (canPreview.value) {
+      if (lastPreviewUrl.value && previewWsUrl.value !== lastPreviewUrl.value && wsVideoPlayerIns.isCanvasExist(canvasRef.value)) {
+        wsVideoPlayerIns.removeCanvas(canvasRef.value);
+      }
+      if (!wsVideoPlayerIns.isCanvasExist(canvasRef.value)) {
+        wsVideoPlayerIns.addCanvas(canvasRef.value, previewWsUrl.value, _renderOptions.value);
+        lastPreviewUrl.value = previewWsUrl.value;
+      }
+    } else {
+      if (wsVideoPlayerIns.isCanvasExist(canvasRef.value)) {
+        wsVideoPlayerIns.removeCanvas(canvasRef.value);
+        isMuted.value = true;
+        isPaused.value = false;
+      }
+    }
+  });
+  function pauseOtherAudio() {
+    wsVideoPlayer.playOneAudio(previewWsUrl.value);
+  }
+  function setAudioMutedState(muted) {
+    wsVideoPlayer.setOneMutedState(previewWsUrl.value, muted);
+  }
+  function pauseOtherVideo() {
+    wsVideoPlayer.playOneVideo(previewWsUrl.value);
+  }
+  function setOneVideoPausedState(paused) {
+    wsVideoPlayer.setOneVideoPausedState(previewWsUrl.value, paused);
+  }
+  function setAllVideoPausedState(paused) {
+    wsVideoPlayer.setAllVideoPausedState(paused);
+  }
+  const refresh = () => {
+    wsVideoPlayer.refresh(previewWsUrl.value);
+  };
+  return {
+    canvasRef,
+    isMuted,
+    isPaused,
+    videoInfo,
+    linkedWsUrlList,
+    isLinked,
+    isReachConnectLimit,
+    pauseOtherAudio,
+    setAudioMutedState,
+    pauseOtherVideo,
+    setOneVideoPausedState,
+    setAllVideoPausedState,
+    refresh
+  };
+}
+export {
+  USE_WS_VIDEO_DEFAULT_RESIZE_OPTIONS,
+  useWsVideo
+};

package/dist/use-ws-video.umd.js

@@ -0,0 +1,207 @@
+(function(global, factory) {
+  typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("vue"), require("@vueuse/core"), require("@havue/ws-video-manager")) : typeof define === "function" && define.amd ? define(["exports", "vue", "@vueuse/core", "@havue/ws-video-manager"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global["use-ws-video"] = {}, global.Vue, global.core, global.wsVideoPlayer));
+})(this, function(exports2, vue, core, wsVideoPlayer) {
+  "use strict";
+  const USE_WS_VIDEO_DEFAULT_RESIZE_OPTIONS = Object.freeze({
+    enable: true,
+    scale: 1,
+    maxWidth: 1920,
+    maxHeight: 1080
+  });
+  function useWsVideo(options) {
+    let canvasRef = vue.ref();
+    const {
+      wsUrl,
+      isReady,
+      target,
+      wsVideoPlayerIns = wsVideoPlayer,
+      canvasResize,
+      closeOnHidden,
+      renderOptions
+    } = options;
+    if (target) {
+      canvasRef = vue.computed(() => {
+        return vue.isRef(target) ? vue.toValue(target) : target;
+      });
+    }
+    const _isReady = vue.computed(() => {
+      return vue.isRef(isReady) ? vue.toValue(isReady) : isReady;
+    });
+    const previewWsUrl = vue.computed(() => {
+      const url = wsUrl;
+      const _wsUrl = (vue.isRef(url) ? vue.toValue(url) : url) || "";
+      return _wsUrl;
+    });
+    const _canvasResizeOpt = vue.computed(() => {
+      const canvasResizeOpt = vue.isRef(canvasResize) ? vue.toValue(canvasResize) : canvasResize || {};
+      const opt = Object.assign({}, USE_WS_VIDEO_DEFAULT_RESIZE_OPTIONS, canvasResizeOpt || {});
+      return opt;
+    });
+    const _closeOnHidden = vue.computed(() => {
+      const closeOpt = vue.isRef(closeOnHidden) ? vue.toValue(closeOnHidden) : closeOnHidden;
+      return closeOpt === void 0 ? true : closeOpt;
+    });
+    const _renderOptions = vue.computed(() => {
+      const renderOpt = vue.isRef(renderOptions) ? vue.toValue(renderOptions) : renderOptions || void 0;
+      return renderOpt;
+    });
+    const isMuted = vue.ref(true);
+    const isPaused = vue.ref(false);
+    const videoInfo = vue.ref({
+      width: 0,
+      height: 0
+    });
+    const lastPreviewUrl = vue.ref();
+    const linkedWsUrlList = vue.ref([...wsVideoPlayer.linkedUrlList]);
+    const isLinked = vue.computed(() => {
+      return linkedWsUrlList.value.includes(previewWsUrl.value);
+    });
+    const connectLimit = wsVideoPlayer.connectLimit;
+    const isReachConnectLimit = vue.computed(() => {
+      return linkedWsUrlList.value.length >= connectLimit;
+    });
+    function handleWsUrlChange(urls) {
+      linkedWsUrlList.value = [...urls];
+    }
+    function handleAudioStateChange(url, state) {
+      if (url === previewWsUrl.value) {
+        console.log("音频状态更改", url, state);
+        isMuted.value = state === wsVideoPlayer.AudioState.MUTED;
+      }
+    }
+    function handleVideoStateChange(url, state) {
+      if (url === previewWsUrl.value) {
+        console.log("视频状态更改", url, state);
+        isPaused.value = state === wsVideoPlayer.VideoState.PAUSE;
+      }
+    }
+    function handleVideoInfoUpdate(url, info) {
+      if (url === previewWsUrl.value) {
+        videoInfo.value = {
+          ...info
+        };
+      }
+    }
+    wsVideoPlayer.on(wsVideoPlayer.WsVideoManagerEventEnums.WS_URL_CHANGE, handleWsUrlChange);
+    wsVideoPlayer.on(wsVideoPlayer.WsVideoManagerEventEnums.AUDIO_STATE_CHANGE, handleAudioStateChange);
+    wsVideoPlayer.on(wsVideoPlayer.WsVideoManagerEventEnums.VIDEO_STATE_CHANGE, handleVideoStateChange);
+    wsVideoPlayer.on(wsVideoPlayer.WsVideoManagerEventEnums.VIDEO_INFO_UPDATE, handleVideoInfoUpdate);
+    const canvasIsVisible = core.useElementVisibility(canvasRef);
+    let stopResizeObserver = () => {
+    };
+    vue.watch(
+      _canvasResizeOpt,
+      (val) => {
+        stopResizeObserver && stopResizeObserver();
+        if (val.enable) {
+          const { stop } = core.useResizeObserver(canvasRef, (entries) => {
+            if (!canvasRef.value) {
+              return;
+            }
+            const [entry] = entries;
+            const { width, height } = entry.contentRect;
+            const { scale, maxWidth, maxHeight } = _canvasResizeOpt.value;
+            let comWidth = width * scale;
+            let comHeight = height * scale;
+            const canvasRate = width / height;
+            if (comWidth > maxWidth || comHeight > maxHeight) {
+              const optionRate = maxWidth / maxHeight;
+              comWidth = canvasRate > optionRate ? maxWidth : maxHeight * canvasRate;
+              comHeight = canvasRate > optionRate ? maxWidth / canvasRate : maxHeight;
+            }
+            canvasRef.value.width = comWidth;
+            canvasRef.value.height = comHeight;
+          });
+          stopResizeObserver = stop;
+        }
+      },
+      {
+        immediate: true,
+        deep: true
+      }
+    );
+    vue.watch(
+      _renderOptions,
+      () => {
+        if (_renderOptions.value && isLinked.value) {
+          wsVideoPlayerIns.updateRenderOptions(previewWsUrl.value, _renderOptions.value);
+        }
+      },
+      {
+        deep: true
+      }
+    );
+    vue.onBeforeUnmount(() => {
+      stopResizeObserver();
+      wsVideoPlayer.off(wsVideoPlayer.WsVideoManagerEventEnums.WS_URL_CHANGE, handleWsUrlChange);
+      wsVideoPlayer.off(wsVideoPlayer.WsVideoManagerEventEnums.AUDIO_STATE_CHANGE, handleAudioStateChange);
+      wsVideoPlayer.off(wsVideoPlayer.WsVideoManagerEventEnums.VIDEO_STATE_CHANGE, handleVideoStateChange);
+      wsVideoPlayer.off(wsVideoPlayer.WsVideoManagerEventEnums.VIDEO_INFO_UPDATE, handleVideoInfoUpdate);
+      if (!canvasRef.value) return;
+      wsVideoPlayerIns.removeCanvas(canvasRef.value);
+      isMuted.value = true;
+    });
+    const canPreview = vue.computed(() => {
+      if (_closeOnHidden.value) {
+        return canvasIsVisible.value && _isReady.value && previewWsUrl.value;
+      }
+      return _isReady.value && previewWsUrl.value;
+    });
+    vue.watch([canvasRef, canPreview, linkedWsUrlList, previewWsUrl], () => {
+      if (!canvasRef.value) {
+        return;
+      }
+      if (canPreview.value) {
+        if (lastPreviewUrl.value && previewWsUrl.value !== lastPreviewUrl.value && wsVideoPlayerIns.isCanvasExist(canvasRef.value)) {
+          wsVideoPlayerIns.removeCanvas(canvasRef.value);
+        }
+        if (!wsVideoPlayerIns.isCanvasExist(canvasRef.value)) {
+          wsVideoPlayerIns.addCanvas(canvasRef.value, previewWsUrl.value, _renderOptions.value);
+          lastPreviewUrl.value = previewWsUrl.value;
+        }
+      } else {
+        if (wsVideoPlayerIns.isCanvasExist(canvasRef.value)) {
+          wsVideoPlayerIns.removeCanvas(canvasRef.value);
+          isMuted.value = true;
+          isPaused.value = false;
+        }
+      }
+    });
+    function pauseOtherAudio() {
+      wsVideoPlayer.playOneAudio(previewWsUrl.value);
+    }
+    function setAudioMutedState(muted) {
+      wsVideoPlayer.setOneMutedState(previewWsUrl.value, muted);
+    }
+    function pauseOtherVideo() {
+      wsVideoPlayer.playOneVideo(previewWsUrl.value);
+    }
+    function setOneVideoPausedState(paused) {
+      wsVideoPlayer.setOneVideoPausedState(previewWsUrl.value, paused);
+    }
+    function setAllVideoPausedState(paused) {
+      wsVideoPlayer.setAllVideoPausedState(paused);
+    }
+    const refresh = () => {
+      wsVideoPlayer.refresh(previewWsUrl.value);
+    };
+    return {
+      canvasRef,
+      isMuted,
+      isPaused,
+      videoInfo,
+      linkedWsUrlList,
+      isLinked,
+      isReachConnectLimit,
+      pauseOtherAudio,
+      setAudioMutedState,
+      pauseOtherVideo,
+      setOneVideoPausedState,
+      setAllVideoPausedState,
+      refresh
+    };
+  }
+  exports2.USE_WS_VIDEO_DEFAULT_RESIZE_OPTIONS = USE_WS_VIDEO_DEFAULT_RESIZE_OPTIONS;
+  exports2.useWsVideo = useWsVideo;
+  Object.defineProperty(exports2, Symbol.toStringTag, { value: "Module" });
+});

package/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "@havue/use-ws-video",
+  "version": "1.0.0",
+  "description": "Ws video manager hook for Vue3",
+  "keywords": [
+    "havue",
+    "hook",
+    "ws",
+    "video",
+    "fmp4",
+    "vue3"
+  ],
+  "license": "MIT",
+  "homepage": "https://happypedestrian.github.io/havue/guide/",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/HappyPedestrian/havue.git"
+  },
+  "dependencies": {
+    "@vueuse/core": "^11.0.3",
+    "@havue/ws-video-manager": "^1.0.0"
+  },
+  "devDependencies": {
+    "vue": "^3.3.0"
+  },
+  "peerDependencies": {
+    "vue": "^3.3.0"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "files": [
+    "dist"
+  ],
+  "main": "./dist/use-ws-video.umd.js",
+  "module": "./dist/use-ws-video.mjs",
+  "types": "./dist/types/src/index.d.ts",
+  "exports": {
+    ".": {
+      "require": "./dist/use-ws-video.umd.js",
+      "import": "./dist/use-ws-video.mjs",
+      "types": "./dist/types/src/index.d.ts"
+    }
+  },
+  "scripts": {
+    "build": "vite build --mode package"
+  }
+}