feat: 记录素材信息

.eslintrc.js

@@ -19,7 +19,8 @@ module.exports = {
     'eslint:recommended',
     'plugin:import/recommended',
     'plugin:vue/vue3-recommended',
-    '@vue/eslint-config-typescript',
+    // '@vue/eslint-config-typescript', // 启用这个规则后，vscode保存文件时格式化很慢
+    '@vue/eslint-config-typescript/recommended', // 启用这个规则后，vscode保存文件时格式化很慢
     '@vue/eslint-config-prettier',
   ],
   parserOptions: {

.prettierrc.js

@@ -1,9 +1,9 @@
-console.log(
-  '\x1B[0;37;44m INFO \x1B[0m',
-  '\x1B[0;;34m ' +
-    `读取了: ${__filename.slice(__dirname.length + 1)}` +
-    ' \x1B[0m'
-);
+// console.log(
+//   '\x1B[0;37;44m INFO \x1B[0m',
+//   '\x1B[0;;34m ' +
+//     `读取了: ${__filename.slice(__dirname.length + 1)}` +
+//     ' \x1B[0m'
+// );
 
 module.exports = {
   bracketSpacing: true, // 默认为true。即要求：{ foo: bar }；可改为false，即要求{foo: bar}

src/components/AudioRoomTip/index.vue

@@ -1,28 +0,0 @@
-<template>
-  <div
-    v-if="
-      appCacheStore.allTrack.length > 0 &&
-      appCacheStore.getTrackInfo().video === 0
-    "
-    class="audio-room-tip-wrap"
-  >
-    当前是语音房
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { useAppCacheStore } from '@/store/cache';
-
-const appCacheStore = useAppCacheStore();
-</script>
-
-<style lang="scss" scoped>
-.audio-room-tip-wrap {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  color: $theme-color-gold;
-  font-size: 40px;
-}
-</style>

src/hooks/use-pull.ts

@@ -95,17 +95,17 @@ export function usePull({
     const { width, height } = await startFlvPlay({
       flvurl: flvurl.value,
     });
+    const size = { width, height };
     const initCanvas = videoToCanvas({
       videoEl: flvVideoEl.value!,
-      size: {
-        width,
-        height,
-      },
+      size,
     });
     stopDrawingArr.value.push(initCanvas.stopDrawing);
     canvasRef.value!.appendChild(initCanvas.canvas);
     flvPlayer.value!.on(mpegts.Events.MEDIA_INFO, () => {
-      initCanvas.videoEl = flvVideoEl.value!;
+      console.log('数据变了');
+      size.width = flvVideoEl.value!.videoWidth!;
+      size.height = flvVideoEl.value!.videoHeight!;
     });
     videoLoading.value = false;
   }

src/hooks/use-push.ts

@@ -14,7 +14,6 @@ import {
 } from '@/interface';
 import { WsMsgTypeEnum } from '@/network/webSocket';
 import { useAppStore } from '@/store/app';
-import { useAppCacheStore } from '@/store/cache';
 import { useNetworkStore } from '@/store/network';
 import { useUserStore } from '@/store/user';
 import { createVideo, generateBase64 } from '@/utils';
@@ -35,7 +34,6 @@ export function usePush({
   const route = useRoute();
   const router = useRouter();
   const appStore = useAppStore();
-  const appCacheStore = useAppCacheStore();
   const userStore = useUserStore();
   const networkStore = useNetworkStore();
 
@@ -192,12 +190,9 @@ export function usePush({
       return;
     }
     if (!roomNameIsOk()) return;
-    if (appCacheStore.allTrack.length <= 0) {
-      window.$message.warning('请选择一个素材！');
-      return;
-    }
+
     isLiving.value = true;
-    const el = appCacheStore.allTrack.find((item) => {
+    const el = appStore.allTrack.find((item) => {
       if (item.video === 1) {
         return true;
       }

src/hooks/use-ws.ts

@@ -27,14 +27,12 @@ import {
   prettierReceiveWebsocket,
 } from '@/network/webSocket';
 import { AppRootState, useAppStore } from '@/store/app';
-import { useAppCacheStore } from '@/store/cache';
 import { useNetworkStore } from '@/store/network';
 import { useUserStore } from '@/store/user';
 import { createVideo } from '@/utils';
 
 export const useWs = () => {
   const appStore = useAppStore();
-  const appCacheStore = useAppCacheStore();
   const userStore = useUserStore();
   const networkStore = useNetworkStore();
   const loopHeartbeatTimer = ref();
@@ -155,9 +153,9 @@ export const useWs = () => {
   const damuList = ref<IDanmu[]>([]);
 
   watch(
-    () => appCacheStore.allTrack,
+    () => appStore.allTrack,
     (newTrack, oldTrack) => {
-      console.log('appCacheStore.allTrack变了');
+      console.log('appStore.allTrack变了', newTrack, oldTrack);
       const mixedStream = new MediaStream();
       newTrack.forEach((item) => {
         if (item.track) {
@@ -198,7 +196,7 @@ export const useWs = () => {
           });
         });
       } else {
-        appCacheStore.allTrack.forEach((info) => {
+        appStore.allTrack.forEach((info) => {
           info.track?.applyConstraints({
             frameRate: { max: currentMaxFramerate.value },
             height: newVal,
@@ -229,7 +227,7 @@ export const useWs = () => {
           });
         });
       } else {
-        appCacheStore.allTrack.forEach((info) => {
+        appStore.allTrack.forEach((info) => {
           info.track?.applyConstraints({
             frameRate: { max: newVal },
             height: currentResolutionRatio.value,
@@ -269,7 +267,7 @@ export const useWs = () => {
           ?.getSenders()
           .find((sender) => sender.track?.id === addTrackInfo.track?.id);
         if (!sender) {
-          console.log('pc添加track-1', addTrackInfo.track?.id);
+          console.log('pc添加track-开播后中途添加', addTrackInfo.track?.id);
           // vel.srcObject = destination.stream;
           // canvasVideoStream.value!.getAudioTracks()[0] =
           //   destination.stream.getAudioTracks()[0];
@@ -278,7 +276,7 @@ export const useWs = () => {
           rtc.peerConnection
             ?.getSenders()
             ?.find((sender) => sender.track?.kind === 'audio')
-            ?.replaceTrack(canvasVideoStream.value?.getAudioTracks()[0]!);
+            ?.replaceTrack(canvasVideoStream.value!.getAudioTracks()[0]);
           const vel = createVideo({});
           vel.srcObject = canvasVideoStream.value!;
           document.body.appendChild(vel);
@@ -293,7 +291,7 @@ export const useWs = () => {
       });
     }
     const mixedStream = new MediaStream();
-    appCacheStore.allTrack.forEach((item) => {
+    appStore.allTrack.forEach((item) => {
       if (item.track) {
         mixedStream.addTrack(item.track);
       }
@@ -347,7 +345,7 @@ export const useWs = () => {
       });
     }
     const mixedStream = new MediaStream();
-    appCacheStore.allTrack.forEach((item) => {
+    appStore.allTrack.forEach((item) => {
       if (item.track) {
         mixedStream.addTrack(item.track);
       }
@@ -590,7 +588,7 @@ export const useWs = () => {
           track.id,
           localStream.value?.id
         );
-        console.log('pc添加track-2', track.kind, track.id);
+        console.log('pc添加track-srs', track.kind, track.id);
         rtc.peerConnection?.addTrack(track, localStream.value!);
       });
 
@@ -620,7 +618,7 @@ export const useWs = () => {
           //   streams: [localStream.value!],
           //   direction: 'sendonly',
           // });
-          console.log('pc添加track-3');
+          console.log('pc添加track-原生');
           rtc.peerConnection?.addTrack(track, localStream.value!);
         });
       }

src/network/webRTC.ts

@@ -2,8 +2,7 @@ import { getRandomString } from 'billd-utils';
 import browserTool from 'browser-tool';
 
 import { ICandidate, MediaTypeEnum } from '@/interface';
-import { AppRootState } from '@/store/app';
-import { useAppCacheStore } from '@/store/cache';
+import { AppRootState, useAppStore } from '@/store/app';
 import { useNetworkStore } from '@/store/network';
 
 import { WsMsgTypeEnum } from './webSocket';
@@ -86,24 +85,24 @@ export class WebRTCClass {
     console.log('原本旧track的视频轨', this.localStream?.getVideoTracks());
     console.log('原本旧track的音频轨', this.localStream?.getAudioTracks());
 
-    const appCacheStore = useAppCacheStore();
+    const appStore = useAppStore();
     if (isCb) {
       stream.onremovetrack = (event) => {
         console.log('onremovetrack事件', event);
-        const res = appCacheStore.allTrack.filter((info) => {
+        const res = appStore.allTrack.filter((info) => {
           if (info.track?.id === event.track.id) {
             return false;
           }
           return true;
         });
-        appCacheStore.setAllTrack(res);
+        appStore.setAllTrack(res);
       };
     }
 
     const addTrack: AppRootState['allTrack'] = [];
 
     this.localStream?.getVideoTracks().forEach((track) => {
-      if (!appCacheStore.allTrack.find((info) => info.track?.id === track.id)) {
+      if (!appStore.allTrack.find((info) => info.track?.id === track.id)) {
         addTrack.push({
           id: getRandomString(8),
           track,
@@ -118,7 +117,7 @@ export class WebRTCClass {
       }
     });
     this.localStream?.getAudioTracks().forEach((track) => {
-      if (!appCacheStore.allTrack.find((info) => info.track?.id === track.id)) {
+      if (!appStore.allTrack.find((info) => info.track?.id === track.id)) {
         addTrack.push({
           id: getRandomString(8),
           track,
@@ -133,7 +132,7 @@ export class WebRTCClass {
       }
     });
     stream.getVideoTracks().forEach((track) => {
-      if (!appCacheStore.allTrack.find((info) => info.track?.id === track.id)) {
+      if (!appStore.allTrack.find((info) => info.track?.id === track.id)) {
         addTrack.push({
           id: getRandomString(8),
           track,
@@ -148,7 +147,7 @@ export class WebRTCClass {
       }
     });
     stream.getAudioTracks().forEach((track) => {
-      if (!appCacheStore.allTrack.find((info) => info.track?.id === track.id)) {
+      if (!appStore.allTrack.find((info) => info.track?.id === track.id)) {
         addTrack.push({
           id: getRandomString(8),
           track,
@@ -163,7 +162,7 @@ export class WebRTCClass {
       }
     });
     if (addTrack.length) {
-      appCacheStore.setAllTrack([...appCacheStore.allTrack, ...addTrack]);
+      appStore.setAllTrack([...appStore.allTrack, ...addTrack]);
     }
     this.localStream = stream;
 

src/store/app/index.ts

@@ -16,11 +16,15 @@ export type AppRootState = {
     type: MediaTypeEnum;
     track?: MediaStreamTrack;
     stream?: MediaStream;
-    streamid: string;
-    trackid: string;
-    canvasDom?: fabric.Image;
-    initScale?: number;
+    streamid?: string;
+    trackid?: string;
+    canvasDom?: fabric.Image | fabric.Text;
     hidden?: boolean;
+    muted?: boolean;
+    videoEl?: HTMLVideoElement;
+    txtInfo?: { txt: string; color: string };
+    rect?: { top: number; left: number };
+    scaleInfo?: { scaleX: number; scalcY: number };
   }[];
 };
 

src/store/cache/index.ts

@@ -1,52 +1,23 @@
 import { defineStore } from 'pinia';
 
-import { MediaTypeEnum } from '@/interface';
+import { AppRootState } from '@/store/app';
 
-export type AppCacheRootState = {
-  allTrack: {
-    /** 1开启；2关闭 */
-    audio: number;
-    /** 1开启；2关闭 */
-    video: number;
-    id: string;
-    mediaName: string;
-    type: MediaTypeEnum;
-    muted?: boolean;
-    track?: MediaStreamTrack;
-    stream?: MediaStream;
-    streamid: string;
-    trackid: string;
-    canvasDom?: fabric.Image;
-    initScale?: number;
-    hidden?: boolean;
-  }[];
+export type ResourceCacheRootState = {
+  list: AppRootState['allTrack'];
 };
-export const useAppCacheStore = defineStore('appCache', {
+
+export const useResourceCacheStore = defineStore('resource-cache', {
   persist: {
-    key: 'appCache',
+    key: 'resource-cache',
   },
-  state: (): AppCacheRootState => {
+  state: (): ResourceCacheRootState => {
     return {
-      allTrack: [], // 当前是否横屏
+      list: [],
     };
   },
   actions: {
-    setAllTrack(res: AppCacheRootState['allTrack']) {
-      this.allTrack = res;
-    },
-    getTrackInfo() {
-      const res = { audio: 0, video: 0 };
-      this.allTrack.forEach((item) => {
-        // if (item.stream) {
-        if (item.audio === 1) {
-          res.audio += 1;
-        }
-        if (item.video === 1) {
-          res.video += 1;
-        }
-        // }
-      });
-      return res;
+    setList(res: ResourceCacheRootState['list']) {
+      this.list = res;
     },
   },
 });

src/utils/index.ts

@@ -45,6 +45,7 @@ export const createVideo = ({ muted = true, autoplay = true }) => {
   videoEl.autoplay = autoplay;
   videoEl.muted = muted;
   videoEl.playsInline = true;
+  videoEl.loop = true;
   videoEl.setAttribute('webkit-playsinline', 'true');
   videoEl.setAttribute('x5-video-player-type', 'h5');
   videoEl.setAttribute('x5-video-player-fullscreen', 'true');

src/views/h5/room/index.vue

@@ -34,7 +34,7 @@
       <div
         ref="canvasRef"
         class="media-list"
-        :class="{ item: appCacheStore.allTrack.length > 1 }"
+        :class="{ item: appStore.allTrack.length > 1 }"
       ></div>
       <div
         v-if="showPlayBtn"
@@ -107,10 +107,10 @@ import { fetchFindLiveRoom } from '@/api/liveRoom';
 import { usePull } from '@/hooks/use-pull';
 import { DanmuMsgTypeEnum, LiveRoomTypeEnum, liveTypeEnum } from '@/interface';
 import router, { mobileRouterName } from '@/router';
-import { useAppCacheStore } from '@/store/cache';
+import { useAppStore } from '@/store/app';
 
 const route = useRoute();
-const appCacheStore = useAppCacheStore();
+const appStore = useAppStore();
 
 const bottomRef = ref<HTMLDivElement>();
 const containerRef = ref<HTMLDivElement>();

src/views/pull/index.vue

@@ -45,9 +45,8 @@
             <div
               ref="canvasRef"
               class="media-list"
-              :class="{ item: appCacheStore.allTrack.length > 1 }"
+              :class="{ item: appStore.allTrack.length > 1 }"
             ></div>
-            <AudioRoomTip></AudioRoomTip>
             <VideoControls></VideoControls>
           </div>
         </div>
@@ -189,14 +188,14 @@ import {
   IGoods,
   liveTypeEnum,
 } from '@/interface';
-import { useAppCacheStore } from '@/store/cache';
+import { useAppStore } from '@/store/app';
 import { useUserStore } from '@/store/user';
 
 import RechargeCpt from './recharge/index.vue';
 
 const route = useRoute();
 const userStore = useUserStore();
-const appCacheStore = useAppCacheStore();
+const appStore = useAppStore();
 const giftGoodsList = ref<IGoods[]>([]);
 const height = ref(0);
 const giftLoading = ref(false);

src/views/push/index.vue

@@ -9,14 +9,13 @@
         class="container"
       >
         <div class="video-wrap">
-          <AudioRoomTip></AudioRoomTip>
           <div
             ref="localVideoRef"
             class="media-list"
-            :class="{ item: appCacheStore.allTrack.length > 1 }"
+            :class="{ item: appStore.allTrack.length > 1 }"
           ></div>
           <div
-            v-if="!appCacheStore.allTrack || appCacheStore.allTrack.length <= 0"
+            v-if="!appStore.allTrack || appStore.allTrack.length <= 0"
             class="add-wrap"
           >
             <n-space>
@@ -160,7 +159,7 @@
         <div class="title">素材列表</div>
         <div class="list">
           <div
-            v-for="(item, index) in appCacheStore.allTrack"
+            v-for="(item, index) in appStore.allTrack"
             :key="index"
             class="item"
           >
@@ -264,7 +263,6 @@ import { useRoute } from 'vue-router';
 import { usePush } from '@/hooks/use-push';
 import { DanmuMsgTypeEnum, MediaTypeEnum, liveTypeEnum } from '@/interface';
 import { AppRootState, useAppStore } from '@/store/app';
-import { useAppCacheStore } from '@/store/cache';
 import { useUserStore } from '@/store/user';
 
 import MediaModalCpt from './mediaModal/index.vue';
@@ -273,7 +271,6 @@ import SelectMediaModalCpt from './selectMediaModal/index.vue';
 const route = useRoute();
 const userStore = useUserStore();
 const appStore = useAppStore();
-const appCacheStore = useAppCacheStore();
 const currentMediaType = ref(MediaTypeEnum.camera);
 const showSelectMediaModalCpt = ref(false);
 const showMediaModalCpt = ref(false);
@@ -367,7 +364,7 @@ async function addMediaOk(val: {
     if (audio.length) {
       if (
         isSRS &&
-        appCacheStore.allTrack.filter((item) => item.audio === 1).length >= 1
+        appStore.allTrack.filter((item) => item.audio === 1).length >= 1
       ) {
         window.$message.error('srs模式最多只能有一个音频');
         return;
@@ -383,22 +380,18 @@ async function addMediaOk(val: {
         stream: event,
         streamid: event.id,
       };
-      appCacheStore.setAllTrack([
-        ...appCacheStore.allTrack,
-        videoTrack,
-        audioTrack,
-      ]);
+      appStore.setAllTrack([...appStore.allTrack, videoTrack, audioTrack]);
       addTrack(videoTrack);
       addTrack(audioTrack);
     } else {
       if (
         isSRS &&
-        appCacheStore.allTrack.filter((item) => item.video === 1).length >= 1
+        appStore.allTrack.filter((item) => item.video === 1).length >= 1
       ) {
         window.$message.error('srs模式最多只能有一个视频');
         return;
       }
-      appCacheStore.setAllTrack([...appCacheStore.allTrack, videoTrack]);
+      appStore.setAllTrack([...appStore.allTrack, videoTrack]);
       addTrack(videoTrack);
     }
 
@@ -414,7 +407,7 @@ async function addMediaOk(val: {
     });
     if (
       isSRS &&
-      appCacheStore.allTrack.filter((item) => item.video === 1).length >= 1
+      appStore.allTrack.filter((item) => item.video === 1).length >= 1
     ) {
       window.$message.error('srs模式最多只能有一个视频');
       return;
@@ -430,7 +423,7 @@ async function addMediaOk(val: {
       stream: event,
       streamid: event.id,
     };
-    appCacheStore.setAllTrack([...appCacheStore.allTrack, track]);
+    appStore.setAllTrack([...appStore.allTrack, track]);
     addTrack(track);
     console.log('获取摄像头成功');
   } else if (val.type === MediaTypeEnum.microphone) {
@@ -440,7 +433,7 @@ async function addMediaOk(val: {
     });
     if (
       isSRS &&
-      appCacheStore.allTrack.filter((item) => item.audio === 1).length >= 1
+      appStore.allTrack.filter((item) => item.audio === 1).length >= 1
     ) {
       window.$message.error('srs模式最多只能有一个音频');
       return;
@@ -456,7 +449,7 @@ async function addMediaOk(val: {
       stream: event,
       streamid: event.id,
     };
-    appCacheStore.setAllTrack([...appCacheStore.allTrack, track]);
+    appStore.setAllTrack([...appStore.allTrack, track]);
     addTrack(track);
     console.log('获取麦克风成功');
   }
@@ -464,8 +457,8 @@ async function addMediaOk(val: {
 
 function handleDelTrack(item: AppRootState['allTrack'][0]) {
   console.log('handleDelTrack', item);
-  const res = appCacheStore.allTrack.filter((iten) => iten.id !== item.id);
-  appCacheStore.setAllTrack(res);
+  const res = appStore.allTrack.filter((iten) => iten.id !== item.id);
+  appStore.setAllTrack(res);
   delTrack(item);
 }
 

src/views/push/mediaModal/index.vue

@@ -44,12 +44,12 @@
 import { defineEmits, defineProps, onMounted, ref, withDefaults } from 'vue';
 
 import { MediaTypeEnum } from '@/interface';
-import { useAppCacheStore } from '@/store/cache';
+import { useAppStore } from '@/store/app';
 import { useNetworkStore } from '@/store/network';
 
 const mediaName = ref('');
 const networkStore = useNetworkStore();
-const appCacheStore = useAppCacheStore();
+const appStore = useAppStore();
 
 const props = withDefaults(
   defineProps<{
@@ -95,9 +95,8 @@ async function init() {
       type: MediaTypeEnum.microphone,
     };
     mediaName.value = `麦克风-${
-      appCacheStore.allTrack.filter(
-        (item) => item.type === MediaTypeEnum.microphone
-      ).length + 1
+      appStore.allTrack.filter((item) => item.type === MediaTypeEnum.microphone)
+        .length + 1
     }`;
   } else if (props.mediaType === MediaTypeEnum.camera) {
     res.forEach((item) => {
@@ -114,9 +113,8 @@ async function init() {
       type: MediaTypeEnum.camera,
     };
     mediaName.value = `摄像头-${
-      appCacheStore.allTrack.filter(
-        (item) => item.type === MediaTypeEnum.camera
-      ).length + 1
+      appStore.allTrack.filter((item) => item.type === MediaTypeEnum.camera)
+        .length + 1
     }`;
   } else if (props.mediaType === MediaTypeEnum.screen) {
     currentInput.value = {
@@ -124,9 +122,8 @@ async function init() {
       type: MediaTypeEnum.screen,
     };
     mediaName.value = `窗口-${
-      appCacheStore.allTrack.filter(
-        (item) => item.type === MediaTypeEnum.screen
-      ).length + 1
+      appStore.allTrack.filter((item) => item.type === MediaTypeEnum.screen)
+        .length + 1
     }`;
   }
 }

src/views/pushByCanvas/mediaModal/index.vue

@@ -91,11 +91,11 @@ import { InputInst, UploadFileInfo } from 'naive-ui';
 import { defineEmits, defineProps, onMounted, ref, withDefaults } from 'vue';
 
 import { MediaTypeEnum } from '@/interface';
-import { useAppCacheStore } from '@/store/cache';
+import { useAppStore } from '@/store/app';
 
 const inputInstRef = ref<InputInst | null>(null);
 const mediaName = ref('');
-const appCacheStore = useAppCacheStore();
+const appStore = useAppStore();
 
 const props = withDefaults(
   defineProps<{
@@ -180,9 +180,8 @@ async function init() {
       type: MediaTypeEnum.microphone,
     };
     mediaName.value = `麦克风-${
-      appCacheStore.allTrack.filter(
-        (item) => item.type === MediaTypeEnum.microphone
-      ).length + 1
+      appStore.allTrack.filter((item) => item.type === MediaTypeEnum.microphone)
+        .length + 1
     }`;
   } else if (props.mediaType === MediaTypeEnum.camera) {
     res.forEach((item) => {
@@ -199,9 +198,8 @@ async function init() {
       type: MediaTypeEnum.camera,
     };
     mediaName.value = `摄像头-${
-      appCacheStore.allTrack.filter(
-        (item) => item.type === MediaTypeEnum.camera
-      ).length + 1
+      appStore.allTrack.filter((item) => item.type === MediaTypeEnum.camera)
+        .length + 1
     }`;
   } else if (props.mediaType === MediaTypeEnum.screen) {
     currentInput.value = {
@@ -209,9 +207,8 @@ async function init() {
       type: MediaTypeEnum.screen,
     };
     mediaName.value = `窗口-${
-      appCacheStore.allTrack.filter(
-        (item) => item.type === MediaTypeEnum.screen
-      ).length + 1
+      appStore.allTrack.filter((item) => item.type === MediaTypeEnum.screen)
+        .length + 1
     }`;
   } else if (props.mediaType === MediaTypeEnum.txt) {
     currentInput.value = {
@@ -220,7 +217,7 @@ async function init() {
     };
     txtInfo.value = { txt: '', color: 'rgba(255,215,0,1)' };
     mediaName.value = `文字-${
-      appCacheStore.allTrack.filter((item) => item.type === MediaTypeEnum.txt)
+      appStore.allTrack.filter((item) => item.type === MediaTypeEnum.txt)
         .length + 1
     }`;
     setTimeout(() => {
@@ -233,7 +230,7 @@ async function init() {
     };
     imgInfo.value = [];
     mediaName.value = `图片-${
-      appCacheStore.allTrack.filter((item) => item.type === MediaTypeEnum.img)
+      appStore.allTrack.filter((item) => item.type === MediaTypeEnum.img)
         .length + 1
     }`;
   } else if (props.mediaType === MediaTypeEnum.media) {
@@ -243,7 +240,7 @@ async function init() {
     };
     mediaInfo.value = [];
     mediaName.value = `视频-${
-      appCacheStore.allTrack.filter((item) => item.type === MediaTypeEnum.media)
+      appStore.allTrack.filter((item) => item.type === MediaTypeEnum.media)
         .length + 1
     }`;
   }