matrix_components 2.0.319 → 2.0.320

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "matrix_components",
-  "version": "2.0.319",
+  "version": "2.0.320",
   "private": false,
   "type": "module",
   "files": [

package/dist/ComponentDemo/VideoDemo copy 2.vue

@@ -1,268 +0,0 @@
-<script setup lang="ts">
-import { onMounted, reactive, ref } from 'vue'
-import { VideoCanvasDrawer } from './videoCanvasDrawer.js'
-
-const nsVideoRef = ref()
-
-// 视频信息
-const videoData = reactive({
-  // videoModel: 'hk',
-  // hkPath: '/martrix/cdn/h5player',
-  // 显示视频关闭按钮
-  showClose: false,
-  // 显示树
-  showTree: true,
-  // 树数据
-  treeData: [
-    {
-      id: '1',
-      label: '分组1',
-      children: [
-        {
-          id: '11',
-          label: '分组1-1',
-          children: [
-            {
-              videoModel: 'easyplayer',
-              id: '111',
-              label: '视频A--1视频A--1视频A--1',
-              url: 'http://199.10.9.192:30200/rtp/34020000001110000001_34020000001320000001/hls.m3u8',
-              deviceId: 'a1',
-              channelId: 'a11',
-              icontype: 'on',
-            },
-            {
-              id: 'D',
-              label: '视频A--2',
-              url: 'ws://199.10.9.192:30200/rtp/34020000001110000001_34020000001320000013.live.flv',
-              deviceId: 'b1',
-              channelId: 'b11',
-              icontype: 'off',
-            },
-          ],
-        },
-        {
-          id: 'b',
-          label: '分组b',
-          children: [
-            {
-              id: 'b1',
-              label: '视频A--1视频A--1视频A--1视频A--1视频A--1视频A--1视频A--1视频A--1视频A--1视频A--1视频A--1视频A--1视频A--1视频A--1视频A--1视频A--1视频A--1',
-              url: 'ws://199.10.9.192:30200/rtp/34020000001110000001_34020000001320000003.live.flv',
-              deviceId: 'a1',
-              channelId: 'a11',
-              icontype: 'on',
-            },
-            {
-              id: 'b2',
-              label: '视频A--2',
-              url: 'ws://199.10.9.192:30200/rtp/34020000001110000001_34020000001320000015.live.flv',
-              deviceId: 'b1',
-              channelId: 'b11',
-              icontype: 'off',
-            },
-            {
-              id: 'b3',
-              label: '视频A--3',
-              url: 'ws://199.10.9.192:30200/rtp/34020000001110000001_34020000001320000009.live.flv',
-              deviceId: 'c1',
-              channelId: 'c11',
-            },
-          ],
-        },
-      ],
-
-    },
-    {
-      id: 'xxx2',
-      label: '视频Zxxxx2',
-      url: 'ws://199.10.9.192:30200/rtp/34020000001110000001_34020000001320000009.live.flv',
-      deviceId: '34020000001110000001',
-      channelId: '34020000001320000003',
-    },
-  ],
-  // 树节点对应的key(！！！用于改变选中后的颜色)
-  treeNodeKey: 'id',
-  // 树节点展开的key
-  treeExpandedKeys: ['11'],
-  // 树节点属性 (videoUrlKey值要和treeData中的播放地址key一致, 默认为url)
-  treeOptions: {
-    icontype: 'icontype',
-    background: 'background',
-    videoUrlKey: 'url',
-    children: 'children',
-    label: 'label',
-  },
-  // 获取、设置打开的播放视频信息
-  videoInfos: [
-    {
-      index: 0,
-      url: 'https://sf3-ttcdn-tos.pstatp.com/obj/developer/bytdance.flv',
-      info: {
-        videoModel: 'easyplayer',
-        id: 'xxx2',
-        url: 'https://sf3-ttcdn-tos.pstatp.com/obj/developer/bytdance.flv',
-        deviceId: 'c1',
-        channelId: 'c11',
-      },
-    },
-    // 其他注释掉的代码保持不变
-  ],
-  // ！！！ 单点播放
-  videoSingleUrl: false,
-  // ！！！ 已经在播放的是否关闭后再点击打开(需要单点播 videoSingleUrl:true)
-  videoSingleClose: false,
-  // 回调函数后是否继续执行默认播放操作
-  callbackContinueExecute: true,
-  // 播放模式: 1: 单击,2: 双击
-  videoPlayModel: 1,
-  // 分屏模式: 1: 单屏, 2: 四屏, 3: 九屏
-  videoSplitType: 1,
-  // 显示分屏按钮
-  showVideoSplit: true,
-  // 分屏使用图标
-  // videoSplitUseIcon: true,
-  // 显示方向控制按钮
-  showVideoCtrls: false,
-  // 禁止控制按钮默认请求行为(默认false，true则不使用组件的发送请求仅调用自定义回调函数)
-  stopVideoCtrlMethods: true,
-  // 单个视频错误最大次数
-  videoErrorMaxCount: 3,
-  // easyplayer配置 (默认一般不需要配置, 加载不出来的时候修改)
-  videoConfig: {
-    MSE: true,
-    WCS: true,
-    WASM:true,
-    WASMSIMD: true,
-    isLive: true,
-    hasAudio: false,
-    stretch: false
-  },
-})
-
-// 绘图相关引用
-const drawW = ref('0')
-const drawH = ref('0')
-const videoPlayerCoverRef = ref()
-const videoDrawRef = ref()
-const videoCanvasRef = ref()
-
-// 创建绘图工具实例
-const canvasDrawer = new VideoCanvasDrawer()
-
-// 视频操作事件
-const videoEvent = {
-  videoOriginalInfo: (info: any) => {
-    console.log('===============>视频原始信息:', info)
-    const coverEle = videoPlayerCoverRef.value;
-    const currentVideoInfo = info?.[0]
-    if(coverEle && currentVideoInfo?.width && currentVideoInfo?.height){
-      // 使用绘图工具计算尺寸
-      const size = canvasDrawer.calculateDrawSize(
-        coverEle.clientWidth,
-        coverEle.clientHeight,
-        currentVideoInfo.width,
-        currentVideoInfo.height
-      );
-      drawW.value = size.width;
-      drawH.value = size.height;
-
-      setTimeout(() => {
-        const videoDrawEle = videoDrawRef.value;
-        if (videoDrawEle && videoCanvasRef.value) {
-          // 初始化画布
-          canvasDrawer.initCanvas(videoCanvasRef.value, videoDrawEle);
-          // 设置画布可点击
-          const coverEle = videoPlayerCoverRef.value;
-          if (coverEle) {
-            coverEle.style.pointerEvents = 'auto';
-          }
-        }
-      }, 1000)
-    }
-  },
-}
-
-onMounted(() => {
-  // 添加键盘事件监听，使用绘图工具的方法
-  document.addEventListener('keydown', canvasDrawer.handleKeyDown.bind(canvasDrawer));
-
-  // 在组件卸载时移除事件监听
-  const cleanup = () => {
-    document.removeEventListener('keydown', canvasDrawer.handleKeyDown.bind(canvasDrawer));
-  };
-
-  // 组件卸载时清理
-  const vm = getCurrentInstance();
-  if (vm && vm.proxy) {
-    (vm.proxy as any).__unmount = cleanup;
-  }
-
-  // 或者使用生命周期钩子
-  import('vue').then(({ onBeforeUnmount }) => {
-    onBeforeUnmount(cleanup);
-  });
-})
-
-function changeSplitHandler(num: number) {
-  console.log('分屏模式：如1,2,3代表单屏，四屏，九屏', num)
-}
-
-// 为了确保TypeScript正确识别getCurrentInstance
-import { getCurrentInstance } from 'vue';
-</script>
-<template>
-  <div class="video-demo">
-    <h1 class="title" style="color: #fff" v-sline>视频组件(国标28181 + 海康威视)</h1>
-    <NsVideo class="nsvideo" ref="nsVideoRef" v-bind="videoData" v-on="videoEvent" @changeSplit='changeSplitHandler'>
-      <template #video-player-cover>
-        <div class="video-player-cover" ref="videoPlayerCoverRef">
-          <div class="video-draw" ref="videoDrawRef">
-            <canvas
-              ref="videoCanvasRef"
-              width="100%"
-              height="100%"
-              class="video-canvas"
-              @click="canvasDrawer.handleCanvasClick"
-              @dblclick="canvasDrawer.handleCanvasDoubleClick"
-            ></canvas>
-          </div>
-        </div>
-      </template>
-    </NsVideo>
-  </div>
-</template>
-<style scoped lang="scss">
-.video-demo {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  background-color: #0f2a3b;
-  .title {
-    margin-bottom: 10px;
-  }
-  .video-player-cover {
-    pointer-events: none;
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    // background-color: rgba(255, 0, 0, 0.3);
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    .video-draw {
-      width: v-bind(drawW);
-      height: v-bind(drawH);
-      // background-color: rgba(238, 255, 0, 0.1);
-      .video-canvas {
-          width: 100%;
-          height: 100%;
-          background-color: transparent;
-          cursor: crosshair;
-        }
-    }
-  }
-}
-</style>

package/dist/ComponentDemo/VideoDemo copy 3.vue

@@ -1,356 +0,0 @@
-<script setup lang="ts">
-import { onMounted, reactive, ref, nextTick } from 'vue'
-import { useVideoDraw } from '../hooks/videoDraw'
-
-const nsVideoRef = ref()
-
-// 视频信息
-const videoData = reactive({
-  // videoModel: 'hk',
-  // hkPath: '/martrix/cdn/h5player',
-  // 显示视频关闭按钮
-  showClose: false,
-  // 显示树
-  showTree: true,
-  // 树数据
-  treeData: [
-    {
-      id: '1',
-      label: '分组1',
-      children: [
-        {
-          id: '11',
-          label: '分组1-1',
-          children: [
-            {
-              videoModel: 'easyplayer',
-              id: '111',
-              label: '视频A--1视频A--1视频A--1',
-              url: 'http://199.10.9.192:30200/rtp/34020000001110000001_34020000001320000001/hls.m3u8',
-              deviceId: 'a1',
-              channelId: 'a11',
-              icontype: 'on',
-            },
-            {
-              id: 'D',
-              label: '视频A--2',
-              url: 'ws://199.10.9.192:30200/rtp/34020000001110000001_34020000001320000013.live.flv',
-              deviceId: 'b1',
-              channelId: 'b11',
-              icontype: 'off',
-            },
-          ],
-        },
-        {
-          id: 'b',
-          label: '分组b',
-          children: [
-            {
-              id: 'b1',
-              label: '视频A--1视频A--1视频A--1视频A--1视频A--1视频A--1视频A--1视频A--1视频A--1视频A--1视频A--1视频A--1视频A--1视频A--1视频A--1视频A--1',
-              url: 'ws://199.10.9.192:30200/rtp/34020000001110000001_34020000001320000003.live.flv',
-              deviceId: 'a1',
-              channelId: 'a11',
-              icontype: 'on',
-            },
-            {
-              id: 'b2',
-              label: '视频A--2',
-              url: 'ws://199.10.9.192:30200/rtp/34020000001110000001_34020000001320000015.live.flv',
-              deviceId: 'b1',
-              channelId: 'b11',
-              icontype: 'off',
-            },
-            {
-              id: 'b3',
-              label: '视频A--3',
-              url: 'ws://199.10.9.192:30200/rtp/34020000001110000001_34020000001320000009.live.flv',
-              deviceId: 'c1',
-              channelId: 'c11',
-            },
-          ],
-        },
-      ],
-
-    },
-    {
-      id: 'xxx2',
-      label: '视频Zxxxx2',
-      url: 'ws://199.10.9.192:30200/rtp/34020000001110000001_34020000001320000009.live.flv',
-      deviceId: '34020000001110000001',
-      channelId: '34020000001320000003',
-    },
-  ],
-  // 树节点对应的key(！！！用于改变选中后的颜色)
-  treeNodeKey: 'id',
-  // 树节点展开的key
-  treeExpandedKeys: ['11'],
-  // 树节点属性 (videoUrlKey值要和treeData中的播放地址key一致, 默认为url)
-  treeOptions: {
-    icontype: 'icontype',
-    background: 'background',
-    videoUrlKey: 'url',
-    children: 'children',
-    label: 'label',
-  },
-  // 获取、设置打开的播放视频信息
-  videoInfos: [
-    {
-      index: 0,
-      url: 'https://sf3-ttcdn-tos.pstatp.com/obj/developer/bytdance.flv',
-      info: {
-        videoModel: 'easyplayer',
-        id: 'xxx2',
-        url: 'https://sf3-ttcdn-tos.pstatp.com/obj/developer/bytdance.flv',
-        deviceId: 'c1',
-        channelId: 'c11',
-      },
-    },
-  ],
-  // ！！！ 单点播放
-  videoSingleUrl: false,
-  // ！！！ 已经在播放的是否关闭后再点击打开(需要单点播 videoSingleUrl:true)
-  videoSingleClose: false,
-  // 回调函数后是否继续执行默认播放操作
-  callbackContinueExecute: true,
-  // 播放模式: 1: 单击,2: 双击
-  videoPlayModel: 1,
-  // 分屏模式: 1: 单屏, 2: 四屏, 3: 九屏
-  videoSplitType: 1,
-  // 显示分屏按钮
-  showVideoSplit: true,
-  // 分屏使用图标
-  // videoSplitUseIcon: true,
-  // 显示方向控制按钮
-  showVideoCtrls: false,
-  // 禁止控制按钮默认请求行为(默认false，true则不使用组件的发送请求仅调用自定义回调函数)
-  stopVideoCtrlMethods: true,
-  // 单个视频错误最大次数
-  videoErrorMaxCount: 3,
-  // easyplayer配置 (默认一般不需要配置, 加载不出来的时候修改)
-  videoConfig: {
-    MSE: true,
-    WCS: true,
-    WASM:true,
-    WASMSIMD: true,
-    isLive: true,
-    hasAudio: false,
-    stretch: false
-  },
-})
-
-const drawW = ref('0')
-const drawH = ref('0')
-const videoPlayerCoverRef = ref()
-const videoDrawRef = ref()
-const canvasRef = ref()
-
-// 使用画布绘图功能
-const {
-  initCanvas,
-  clearCanvas,
-  drawFromCoordinates,
-  getState,
-  points,
-  areaCoordinates,
-  isDrawing,
-  isComplete
-} = useVideoDraw()
-
-// 视频操作事件
-const videoEvent = {
-  videoOriginalInfo: (info: any) => {
-    console.log('===============>视频原始信息:', info)
-    const coverEle = videoPlayerCoverRef.value;
-    const currentVideoInfo = info?.[0]
-    if(coverEle && currentVideoInfo?.width && currentVideoInfo?.height){
-      let _w = coverEle.clientWidth
-      let _h = coverEle.clientHeight
-      if(currentVideoInfo.width > currentVideoInfo.height){
-        _h = _w * (currentVideoInfo.height / currentVideoInfo.width)
-      }else{
-        _w = _h * (currentVideoInfo.width / currentVideoInfo.height)
-      }
-      drawW.value = _w + 'px'
-      drawH.value = _h + 'px'
-      
-      // 初始化画布绘图功能
-      nextTick(() => {
-        if (canvasRef.value && videoDrawRef.value) {
-          // 确保canvas尺寸正确
-          canvasRef.value.width = videoDrawRef.value.clientWidth
-          canvasRef.value.height = videoDrawRef.value.clientHeight
-          
-          initCanvas(canvasRef.value, videoDrawRef.value)
-          console.log('画布绘图功能已初始化，尺寸:', videoDrawRef.value.clientWidth, 'x', videoDrawRef.value.clientHeight)
-        }
-      })
-    }
-  },
-}
-
-// 显示绘图状态和坐标
-const showDrawInfo = () => {
-  const state = getState()
-  console.log('当前绘图状态:', state)
-  
-  if (state.points.length > 0) {
-    console.log('所有点坐标:', state.points)
-    console.log('区域信息:', state.areaCoordinates)
-    
-    // 可以在这里处理坐标数据，比如发送到后端或保存到本地
-    localStorage.setItem('videoCanvasCoordinates', JSON.stringify(state.points))
-    
-    alert(`已获取 ${state.points.length} 个点的坐标，数据已保存到控制台和localStorage`)
-  } else {
-    alert('当前没有绘制任何点')
-  }
-}
-
-// 测试回显功能
-const testDrawFromCoordinates = () => {
-  const testCoordinates = [
-    { x: 100, y: 100 },
-    { x: 200, y: 50 },
-    { x: 300, y: 150 },
-    { x: 250, y: 250 },
-    { x: 150, y: 200 }
-  ]
-  drawFromCoordinates(testCoordinates)
-}
-
-onMounted(() => {
-  // 示例：可以在这里添加一些初始化逻辑
-})
-
-function changeSplitHandler(num: number) {
-  console.log('分屏模式：如1,2,3代表单屏，四屏，九屏', num)
-}
-</script>
-
-<template>
-  <div class="video-demo">
-    <h1 class="title" style="color: #fff" v-sline>视频组件(国标28181 + 海康威视)</h1>
-    
-    <!-- 画布控制面板 -->
-    <div class="canvas-controls" v-if="isDrawing || isComplete">
-      <div class="canvas-status">
-        <span>绘图状态: {{ isDrawing ? '绘制中' : isComplete ? '已完成' : '未开始' }}</span>
-        <span>点数: {{ points.length }}</span>
-        <span v-if="areaCoordinates">区域: {{ areaCoordinates.width }} × {{ areaCoordinates.height }}</span>
-      </div>
-      <div class="canvas-buttons">
-        <button @click="clearCanvas" class="btn-clear">清除画布</button>
-        <button @click="testDrawFromCoordinates" class="btn-test">测试回显</button>
-        <button @click="showDrawInfo" class="btn-info">显示坐标</button>
-      </div>
-    </div>
-
-    <NsVideo class="nsvideo" ref="nsVideoRef" v-bind="videoData" v-on="videoEvent" @changeSplit='changeSplitHandler'>
-      <template #video-player-cover>
-        <div class="video-player-cover" ref="videoPlayerCoverRef">
-          <div class="video-draw" ref="videoDrawRef">
-            <canvas ref="canvasRef" width="100%" height="100%" class="video-canvas"></canvas>
-          </div>
-        </div>
-      </template>
-    </NsVideo>
-  </div>
-</template>
-
-<style scoped lang="scss">
-.video-demo {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  background-color: #0f2a3b;
-  
-  .title {
-    margin-bottom: 10px;
-  }
-  
-  // 画布控制面板样式
-  .canvas-controls {
-    background: rgba(255, 255, 255, 0.1);
-    padding: 10px;
-    border-radius: 4px;
-    margin-bottom: 10px;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    
-    .canvas-status {
-      display: flex;
-      gap: 15px;
-      color: #fff;
-      font-size: 14px;
-    }
-    
-    .canvas-buttons {
-      display: flex;
-      gap: 10px;
-      
-      button {
-        padding: 6px 12px;
-        border: none;
-        border-radius: 4px;
-        cursor: pointer;
-        font-size: 12px;
-        transition: background-color 0.3s;
-        
-        &.btn-clear {
-          background: #ff6b6b;
-          color: white;
-          
-          &:hover {
-            background: #ff5252;
-          }
-        }
-        
-        &.btn-test {
-          background: #4ecdc4;
-          color: white;
-          
-          &:hover {
-            background: #26a69a;
-          }
-        }
-        
-        &.btn-info {
-          background: #45b7d1;
-          color: white;
-          
-          &:hover {
-            background: #3498db;
-          }
-        }
-      }
-    }
-  }
-  
-  .video-player-cover {
-    pointer-events: none;
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    
-    .video-draw {
-      pointer-events: auto;
-      width: v-bind(drawW);
-      height: v-bind(drawH);
-      
-      .video-canvas {
-        width: 100%;
-        height: 100%;
-        background-color: rgba(0, 255, 234, 0.1);
-        cursor: crosshair;
-      }
-    }
-  }
-}
-</style>