@havue/solutions 1.0.0

package/ws-video-manager/node_modules/.bin/tsc

@@ -0,0 +1,17 @@
+#!/bin/sh
+basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
+
+case `uname` in
+    *CYGWIN*) basedir=`cygpath -w "$basedir"`;;
+esac
+
+if [ -z "$NODE_PATH" ]; then
+  export NODE_PATH="/mnt/e/study/VueComponents/node_modules/.pnpm/typescript@5.8.2/node_modules/typescript/bin/node_modules:/mnt/e/study/VueComponents/node_modules/.pnpm/typescript@5.8.2/node_modules/typescript/node_modules:/mnt/e/study/VueComponents/node_modules/.pnpm/typescript@5.8.2/node_modules:/mnt/e/study/VueComponents/node_modules/.pnpm/node_modules"
+else
+  export NODE_PATH="/mnt/e/study/VueComponents/node_modules/.pnpm/typescript@5.8.2/node_modules/typescript/bin/node_modules:/mnt/e/study/VueComponents/node_modules/.pnpm/typescript@5.8.2/node_modules/typescript/node_modules:/mnt/e/study/VueComponents/node_modules/.pnpm/typescript@5.8.2/node_modules:/mnt/e/study/VueComponents/node_modules/.pnpm/node_modules:$NODE_PATH"
+fi
+if [ -x "$basedir/node" ]; then
+  exec "$basedir/node"  "$basedir/../../../../../node_modules/.pnpm/typescript@5.8.2/node_modules/typescript/bin/tsc" "$@"
+else
+  exec node  "$basedir/../../../../../node_modules/.pnpm/typescript@5.8.2/node_modules/typescript/bin/tsc" "$@"
+fi

package/ws-video-manager/node_modules/.bin/tsc.CMD

@@ -0,0 +1,12 @@
+@SETLOCAL
+@IF NOT DEFINED NODE_PATH (
+  @SET "NODE_PATH=E:\study\VueComponents\node_modules\.pnpm\typescript@5.8.2\node_modules\typescript\bin\node_modules;E:\study\VueComponents\node_modules\.pnpm\typescript@5.8.2\node_modules\typescript\node_modules;E:\study\VueComponents\node_modules\.pnpm\typescript@5.8.2\node_modules;E:\study\VueComponents\node_modules\.pnpm\node_modules"
+) ELSE (
+  @SET "NODE_PATH=E:\study\VueComponents\node_modules\.pnpm\typescript@5.8.2\node_modules\typescript\bin\node_modules;E:\study\VueComponents\node_modules\.pnpm\typescript@5.8.2\node_modules\typescript\node_modules;E:\study\VueComponents\node_modules\.pnpm\typescript@5.8.2\node_modules;E:\study\VueComponents\node_modules\.pnpm\node_modules;%NODE_PATH%"
+)
+@IF EXIST "%~dp0\node.exe" (
+  "%~dp0\node.exe"  "%~dp0\..\..\..\..\..\node_modules\.pnpm\typescript@5.8.2\node_modules\typescript\bin\tsc" %*
+) ELSE (
+  @SET PATHEXT=%PATHEXT:;.JS;=;%
+  node  "%~dp0\..\..\..\..\..\node_modules\.pnpm\typescript@5.8.2\node_modules\typescript\bin\tsc" %*
+)

package/ws-video-manager/node_modules/.bin/tsc.ps1

@@ -0,0 +1,41 @@
+#!/usr/bin/env pwsh
+$basedir=Split-Path $MyInvocation.MyCommand.Definition -Parent
+
+$exe=""
+$pathsep=":"
+$env_node_path=$env:NODE_PATH
+$new_node_path="E:\study\VueComponents\node_modules\.pnpm\typescript@5.8.2\node_modules\typescript\bin\node_modules;E:\study\VueComponents\node_modules\.pnpm\typescript@5.8.2\node_modules\typescript\node_modules;E:\study\VueComponents\node_modules\.pnpm\typescript@5.8.2\node_modules;E:\study\VueComponents\node_modules\.pnpm\node_modules"
+if ($PSVersionTable.PSVersion -lt "6.0" -or $IsWindows) {
+  # Fix case when both the Windows and Linux builds of Node
+  # are installed in the same directory
+  $exe=".exe"
+  $pathsep=";"
+} else {
+  $new_node_path="/mnt/e/study/VueComponents/node_modules/.pnpm/typescript@5.8.2/node_modules/typescript/bin/node_modules:/mnt/e/study/VueComponents/node_modules/.pnpm/typescript@5.8.2/node_modules/typescript/node_modules:/mnt/e/study/VueComponents/node_modules/.pnpm/typescript@5.8.2/node_modules:/mnt/e/study/VueComponents/node_modules/.pnpm/node_modules"
+}
+if ([string]::IsNullOrEmpty($env_node_path)) {
+  $env:NODE_PATH=$new_node_path
+} else {
+  $env:NODE_PATH="$new_node_path$pathsep$env_node_path"
+}
+
+$ret=0
+if (Test-Path "$basedir/node$exe") {
+  # Support pipeline input
+  if ($MyInvocation.ExpectingInput) {
+    $input | & "$basedir/node$exe"  "$basedir/../../../../../node_modules/.pnpm/typescript@5.8.2/node_modules/typescript/bin/tsc" $args
+  } else {
+    & "$basedir/node$exe"  "$basedir/../../../../../node_modules/.pnpm/typescript@5.8.2/node_modules/typescript/bin/tsc" $args
+  }
+  $ret=$LASTEXITCODE
+} else {
+  # Support pipeline input
+  if ($MyInvocation.ExpectingInput) {
+    $input | & "node$exe"  "$basedir/../../../../../node_modules/.pnpm/typescript@5.8.2/node_modules/typescript/bin/tsc" $args
+  } else {
+    & "node$exe"  "$basedir/../../../../../node_modules/.pnpm/typescript@5.8.2/node_modules/typescript/bin/tsc" $args
+  }
+  $ret=$LASTEXITCODE
+}
+$env:NODE_PATH=$env_node_path
+exit $ret

package/ws-video-manager/node_modules/.bin/tsserver

@@ -0,0 +1,17 @@
+#!/bin/sh
+basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
+
+case `uname` in
+    *CYGWIN*) basedir=`cygpath -w "$basedir"`;;
+esac
+
+if [ -z "$NODE_PATH" ]; then
+  export NODE_PATH="/mnt/e/study/VueComponents/node_modules/.pnpm/typescript@5.8.2/node_modules/typescript/bin/node_modules:/mnt/e/study/VueComponents/node_modules/.pnpm/typescript@5.8.2/node_modules/typescript/node_modules:/mnt/e/study/VueComponents/node_modules/.pnpm/typescript@5.8.2/node_modules:/mnt/e/study/VueComponents/node_modules/.pnpm/node_modules"
+else
+  export NODE_PATH="/mnt/e/study/VueComponents/node_modules/.pnpm/typescript@5.8.2/node_modules/typescript/bin/node_modules:/mnt/e/study/VueComponents/node_modules/.pnpm/typescript@5.8.2/node_modules/typescript/node_modules:/mnt/e/study/VueComponents/node_modules/.pnpm/typescript@5.8.2/node_modules:/mnt/e/study/VueComponents/node_modules/.pnpm/node_modules:$NODE_PATH"
+fi
+if [ -x "$basedir/node" ]; then
+  exec "$basedir/node"  "$basedir/../../../../../node_modules/.pnpm/typescript@5.8.2/node_modules/typescript/bin/tsserver" "$@"
+else
+  exec node  "$basedir/../../../../../node_modules/.pnpm/typescript@5.8.2/node_modules/typescript/bin/tsserver" "$@"
+fi

package/ws-video-manager/node_modules/.bin/tsserver.CMD

@@ -0,0 +1,12 @@
+@SETLOCAL
+@IF NOT DEFINED NODE_PATH (
+  @SET "NODE_PATH=E:\study\VueComponents\node_modules\.pnpm\typescript@5.8.2\node_modules\typescript\bin\node_modules;E:\study\VueComponents\node_modules\.pnpm\typescript@5.8.2\node_modules\typescript\node_modules;E:\study\VueComponents\node_modules\.pnpm\typescript@5.8.2\node_modules;E:\study\VueComponents\node_modules\.pnpm\node_modules"
+) ELSE (
+  @SET "NODE_PATH=E:\study\VueComponents\node_modules\.pnpm\typescript@5.8.2\node_modules\typescript\bin\node_modules;E:\study\VueComponents\node_modules\.pnpm\typescript@5.8.2\node_modules\typescript\node_modules;E:\study\VueComponents\node_modules\.pnpm\typescript@5.8.2\node_modules;E:\study\VueComponents\node_modules\.pnpm\node_modules;%NODE_PATH%"
+)
+@IF EXIST "%~dp0\node.exe" (
+  "%~dp0\node.exe"  "%~dp0\..\..\..\..\..\node_modules\.pnpm\typescript@5.8.2\node_modules\typescript\bin\tsserver" %*
+) ELSE (
+  @SET PATHEXT=%PATHEXT:;.JS;=;%
+  node  "%~dp0\..\..\..\..\..\node_modules\.pnpm\typescript@5.8.2\node_modules\typescript\bin\tsserver" %*
+)

package/ws-video-manager/node_modules/.bin/tsserver.ps1

@@ -0,0 +1,41 @@
+#!/usr/bin/env pwsh
+$basedir=Split-Path $MyInvocation.MyCommand.Definition -Parent
+
+$exe=""
+$pathsep=":"
+$env_node_path=$env:NODE_PATH
+$new_node_path="E:\study\VueComponents\node_modules\.pnpm\typescript@5.8.2\node_modules\typescript\bin\node_modules;E:\study\VueComponents\node_modules\.pnpm\typescript@5.8.2\node_modules\typescript\node_modules;E:\study\VueComponents\node_modules\.pnpm\typescript@5.8.2\node_modules;E:\study\VueComponents\node_modules\.pnpm\node_modules"
+if ($PSVersionTable.PSVersion -lt "6.0" -or $IsWindows) {
+  # Fix case when both the Windows and Linux builds of Node
+  # are installed in the same directory
+  $exe=".exe"
+  $pathsep=";"
+} else {
+  $new_node_path="/mnt/e/study/VueComponents/node_modules/.pnpm/typescript@5.8.2/node_modules/typescript/bin/node_modules:/mnt/e/study/VueComponents/node_modules/.pnpm/typescript@5.8.2/node_modules/typescript/node_modules:/mnt/e/study/VueComponents/node_modules/.pnpm/typescript@5.8.2/node_modules:/mnt/e/study/VueComponents/node_modules/.pnpm/node_modules"
+}
+if ([string]::IsNullOrEmpty($env_node_path)) {
+  $env:NODE_PATH=$new_node_path
+} else {
+  $env:NODE_PATH="$new_node_path$pathsep$env_node_path"
+}
+
+$ret=0
+if (Test-Path "$basedir/node$exe") {
+  # Support pipeline input
+  if ($MyInvocation.ExpectingInput) {
+    $input | & "$basedir/node$exe"  "$basedir/../../../../../node_modules/.pnpm/typescript@5.8.2/node_modules/typescript/bin/tsserver" $args
+  } else {
+    & "$basedir/node$exe"  "$basedir/../../../../../node_modules/.pnpm/typescript@5.8.2/node_modules/typescript/bin/tsserver" $args
+  }
+  $ret=$LASTEXITCODE
+} else {
+  # Support pipeline input
+  if ($MyInvocation.ExpectingInput) {
+    $input | & "node$exe"  "$basedir/../../../../../node_modules/.pnpm/typescript@5.8.2/node_modules/typescript/bin/tsserver" $args
+  } else {
+    & "node$exe"  "$basedir/../../../../../node_modules/.pnpm/typescript@5.8.2/node_modules/typescript/bin/tsserver" $args
+  }
+  $ret=$LASTEXITCODE
+}
+$env:NODE_PATH=$env_node_path
+exit $ret

package/ws-video-manager/package.json

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

package/ws-video-manager/src/hooks/useVideoPlay.ts

@@ -0,0 +1,357 @@
+import type { Ref, MaybeRef } from 'vue'
+import type { RenderConstructorOptionType, VideoInfo } from '../render'
+import { WsVideoManagerEventEnums, type WsVideoManager } from '../manager'
+import { ref, computed, onBeforeUnmount, toValue, isRef, watch } from 'vue'
+import { useElementVisibility, useResizeObserver } from '@vueuse/core'
+import wsVideoPlayer from '../index'
+import { AudioState, VideoState } from '../render'
+
+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>>
+}
+
+// canvasResize 默认值
+export const DEFAULT_RESIZE_OPTIONS = Object.freeze({
+  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 function useVideoPlay(options: ParamsOptions): ReturnType {
+  let canvasRef: Ref<HTMLCanvasElement | undefined> = ref<HTMLCanvasElement>()
+
+  const {
+    wsUrl,
+    isReady,
+    target,
+    wsVideoPlayerIns = wsVideoPlayer,
+    canvasResize,
+    closeOnHidden,
+    renderOptions
+  } = options
+
+  if (target) {
+    canvasRef = computed<HTMLCanvasElement | undefined>(() => {
+      return isRef(target) ? toValue(target) : target
+    })
+  }
+
+  /** 是否可添加到WsViderPlayer中 */
+  const _isReady = computed<boolean>(() => {
+    return isRef(isReady) ? toValue(isReady) : isReady
+  })
+
+  /** 预监WebSocket地址 */
+  const previewWsUrl = computed<string>(() => {
+    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({}, DEFAULT_RESIZE_OPTIONS, canvasResizeOpt || {})
+    return opt
+  })
+
+  const _closeOnHidden = computed<boolean>(() => {
+    const closeOpt = isRef(closeOnHidden) ? toValue(closeOnHidden) : closeOnHidden
+    return closeOpt === undefined ? true : closeOpt
+  })
+
+  const _renderOptions = computed<Partial<RenderConstructorOptionType> | undefined>(() => {
+    const renderOpt = isRef(renderOptions) ? toValue(renderOptions) : renderOptions || undefined
+
+    return renderOpt
+  })
+
+  /** 是否静音 */
+  const isMuted = ref(true)
+  /** 视频是否暂停播放 */
+  const isPaused = ref(false)
+  const videoInfo = ref<VideoInfo>({
+    width: 0,
+    height: 0
+  })
+  /** 上一次播放使用的url */
+  const lastPreviewUrl = ref<string>()
+  /** 已连接的websocket地址 */
+  const linkedWsUrlList = ref<string[]>([...wsVideoPlayer.linkedUrlList])
+
+  /** 预监地址是否已添加 */
+  const isLinked = computed(() => {
+    return linkedWsUrlList.value.includes(previewWsUrl.value)
+  })
+
+  const connectLimit = wsVideoPlayer.connectLimit
+
+  /** 达到websocket拉流数最大值 */
+  const isReachConnectLimit = computed(() => {
+    return linkedWsUrlList.value.length >= connectLimit
+  })
+
+  function handleWsUrlChange(urls: string[]) {
+    linkedWsUrlList.value = [...urls]
+  }
+
+  function handleAudioStateChange(url: string, state: AudioState) {
+    if (url === previewWsUrl.value) {
+      console.log('音频状态更改', url, state)
+      isMuted.value = state === AudioState.MUTED
+    }
+  }
+
+  function handleVideoStateChange(url: string, state: VideoState) {
+    if (url === previewWsUrl.value) {
+      console.log('视频状态更改', url, state)
+      isPaused.value = state === VideoState.PAUSE
+    }
+  }
+
+  function handleVideoInfoUpdate(url: string, info: VideoInfo) {
+    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)
+
+  /** canvas在视口中 */
+  const canvasIsVisible = useElementVisibility(canvasRef)
+
+  let stopResizeObserver: () => void = () => {}
+
+  watch(
+    _canvasResizeOpt,
+    (val) => {
+      stopResizeObserver && stopResizeObserver()
+      if (val.enable) {
+        /** 监听尺寸变化，更新canvas width/height */
+        const { stop } = useResizeObserver(canvasRef, (entries) => {
+          if (!canvasRef.value) {
+            return
+          }
+          const [entry] = entries
+          const { width, height } = entry.contentRect
+          const { scale, maxWidth, maxHeight } = _canvasResizeOpt.value
+
+          // 乘以scale
+          let comWidth = width * scale
+          let comHeight = height * scale
+
+          /**
+           * 如果超出最大值，设置为
+           * 能被maxWidth*maxHeight的矩形中能包含的
+           * 最大矩形宽高， (保持canvas宽高比)
+           */
+          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
+    // 删除收集的 canvas
+    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) {
+      // 如果预监地址更改，移除canvas
+      if (
+        lastPreviewUrl.value &&
+        previewWsUrl.value !== lastPreviewUrl.value &&
+        wsVideoPlayerIns.isCanvasExist(canvasRef.value)
+      ) {
+        wsVideoPlayerIns.removeCanvas(canvasRef.value)
+      }
+
+      if (!wsVideoPlayerIns.isCanvasExist(canvasRef.value)) {
+        // 新增canvas
+        wsVideoPlayerIns.addCanvas(canvasRef.value, previewWsUrl.value, _renderOptions.value)
+        lastPreviewUrl.value = previewWsUrl.value
+      }
+    } else {
+      if (wsVideoPlayerIns.isCanvasExist(canvasRef.value)) {
+        // 移除canvas
+        wsVideoPlayerIns.removeCanvas(canvasRef.value)
+        isMuted.value = true
+        isPaused.value = false
+      }
+    }
+  })
+
+  /** 播放当前音乐，静音其他音乐 */
+  function pauseOtherAudio() {
+    wsVideoPlayer.playOneAudio(previewWsUrl.value)
+  }
+
+  /**
+   * 设置当前视频音乐静音状态
+   * @param muted 是否静音
+   */
+  function setAudioMutedState(muted: boolean) {
+    wsVideoPlayer.setOneMutedState(previewWsUrl.value, muted)
+  }
+
+  /**
+   * 只播放此视频，其他暂停
+   */
+  function pauseOtherVideo() {
+    wsVideoPlayer.playOneVideo(previewWsUrl.value)
+  }
+
+  /**
+   * 设置此视频是否暂停播放
+   * @param {boolean} paused 是否暂停播放
+   */
+  function setOneVideoPausedState(paused: boolean) {
+    wsVideoPlayer.setOneVideoPausedState(previewWsUrl.value, paused)
+  }
+
+  /**
+   * 设置所有视频是否暂停播放
+   * @param {boolean} paused 是否暂停播放
+   */
+  function setAllVideoPausedState(paused: boolean) {
+    wsVideoPlayer.setAllVideoPausedState(paused)
+  }
+
+  const refresh = () => {
+    wsVideoPlayer.refresh(previewWsUrl.value)
+  }
+
+  return {
+    canvasRef,
+    isMuted,
+    isPaused,
+    videoInfo,
+    linkedWsUrlList,
+    isLinked,
+    isReachConnectLimit,
+    pauseOtherAudio,
+    setAudioMutedState,
+    pauseOtherVideo,
+    setOneVideoPausedState,
+    setAllVideoPausedState,
+    refresh
+  }
+}

package/ws-video-manager/src/index.ts

@@ -0,0 +1,6 @@
+export * from './manager'
+export * from './render'
+
+import { WsVideoManager } from './manager'
+
+export default new WsVideoManager()

package/ws-video-manager/src/loader/index.ts

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