视频缓存

src/App.tsx

@@ -1,25 +1,25 @@
-import {useEffect, useRef, useState} from "react";
+import { useEffect, useRef, useState } from "react";
 import '@/utils/styles/App.scss'
-import {Navigate, Route, Routes, useLocation, useNavigate} from 'react-router-dom';
+import { Navigate, Route, Routes, useLocation, useNavigate } from 'react-router-dom';
 import Home from '@/page/Home/index'
 import Index from '@/page/Home/Index/index'
 import User from '@/page/Home/User/index'
 import Login from '@/page/Login/index'
 import Meeting from '@/page/Meeting/index'
 import NotFound from '@/page/NotFound/index'
-import {storage} from '@/utils'
-import {message, Spin} from "antd";
-import {onInvitation, onInvoke, onReconnected, onStart, startSignalr} from "@/utils/package/signalr";
+import { storage } from '@/utils'
+import { message, Spin } from "antd";
+import { onInvitation, onInvoke, onReconnected, onStart, startSignalr } from "@/utils/package/signalr";
 import JoinMeetingModal from "@/components/JoinMeetingModal";
 import UpdateModal from "@/components/UpdateModal";
 import * as CryptoJS from 'crypto-js';
-import {PostLogin} from "@/api/Login";
+import { PostLogin } from "@/api/Login";
 import agora from "@/utils/package/agora";
 import QuitTips from "@/components/QuitTips";
 
 const App: React.FC = () => {
     const navigate = useNavigate();
-    const {state} = useLocation();
+    const { state } = useLocation();
     const joinMeetingModalRef = useRef<any>();
     const updateModalRef = useRef<any>();
     const quitTipsRef = useRef<any>();
@@ -120,9 +120,22 @@ const App: React.FC = () => {
         onReconnected(async () => {
             storage.setItem('reconnect', true)
         })
-        window.electron.onUpdate((e: any, data: any) => {
+        window.electron.onUpdate((_e: any, data: any) => {
             updateModalRef.current.changeModal(data)
         })
+        if (!storage.getItem('setting')) {
+            storage.setItem('setting', JSON.stringify({
+                videoDeviceId: '', //摄像头id
+                ecordingDeviceId: "", //输入设备id
+                playBackDeviceId: "", //输出设备id
+                ecordingVolume: '', //输入音量
+                playBackVolume: '', //输出音量
+                autoEcordingVolume: false, //是否自动调整麦克风音量
+                recordingFilesPath: '', //本地录制保存路径
+                shareFilesPath: '', //共享文件保存路径
+                isShareSavePath: false, //是否下载钱询问每个文件保存的位置
+            }))
+        }
     }, [])
     useEffect(() => {
         if (isState) {
@@ -173,20 +186,20 @@ const App: React.FC = () => {
     return (
         <>
             <Routes>
-                <Route path='/' element={<Home/>}/>
-                <Route path='/home' element={<Home/>}>
-                    <Route path='/home' element={<Navigate to='/home/index'/>}/>
-                    <Route path='/home/index' element={<Index/>}/>
-                    <Route path='/home/user' element={<User/>}/>
+                <Route path='/' element={<Home />} />
+                <Route path='/home' element={<Home />}>
+                    <Route path='/home' element={<Navigate to='/home/index' />} />
+                    <Route path='/home/index' element={<Index />} />
+                    <Route path='/home/user' element={<User />} />
                 </Route>
-                <Route path='/login' element={<Login/>}/>
-                <Route path='/meeting' element={<Meeting/>}/>
-                <Route path='*' element={<NotFound/>}/>
+                <Route path='/login' element={<Login />} />
+                <Route path='/meeting' element={<Meeting />} />
+                <Route path='*' element={<NotFound />} />
             </Routes>
-            <Spin spinning={spinning} fullscreen/>
-            <JoinMeetingModal ref={joinMeetingModalRef}/>
-            <UpdateModal ref={updateModalRef}/>
-            <QuitTips ref={quitTipsRef}/>
+            <Spin spinning={spinning} fullscreen />
+            <JoinMeetingModal ref={joinMeetingModalRef} />
+            <UpdateModal ref={updateModalRef} />
+            <QuitTips ref={quitTipsRef} />
         </>
     )
 }

src/components/StupWizard/index.tsx

@@ -1,6 +1,6 @@
 import styles from '@/components/StupWizard/index.module.scss'
 import ImageUrl from '@/utils/package/ImageUrl';
-import { Button, Checkbox, Empty, Input, message, Modal, Select, Slider } from 'antd';
+import { Button, Checkbox, Empty, Input, Modal, Select, Slider } from 'antd';
 import { useState, useImperativeHandle, forwardRef, useEffect } from "react";
 import agora from '@/utils/package/agora'
 import { CloseOutlined, LoadingOutlined } from '@ant-design/icons';
@@ -101,9 +101,17 @@ const VideoComponents = () => {
   useEffect(() => {
     getVideoDeviceList()
   }, []);
-  const getVideoDeviceList = (): void => {
+  const getVideoDeviceList = async (): Promise<void> => {
+    const setting = await JSON.parse(storage.getItem('setting') as string)
     agora.getVideoDeviceManager().then(async (res) => {
       const { item, list } = res
+      if ((!setting.videoDeviceId && item) || (!(list.find((item: any) => item.deviceId === setting.videoDeviceId)) && item)) {
+        setting.videoDeviceId = item
+      }
+      if (!list.length) {
+        setting.videoDeviceId = ''
+      }
+      storage.setItem('setting', JSON.stringify(setting))
       setVideoDeviceManager({
         list: list.map((row: any) => {
           return {
@@ -111,10 +119,11 @@ const VideoComponents = () => {
             label: row.deviceName
           }
         }),
-        item: item ? item : null,
+        item: setting.videoDeviceId ? setting.videoDeviceId : item || null,
       })
-      if (item) {
-        agora.startPreview('videoPreview', Number(userInfo.account))
+      if (setting.videoDeviceId && list.length) {
+        await agora.setVideoDeviceManager(setting.videoDeviceId)
+        await agora.startPreview('videoPreview', Number(userInfo.account))
       }
     })
   }
@@ -136,14 +145,21 @@ const VideoComponents = () => {
                   }} />
                 </div>
               </div> :
-              <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}><Empty description={'未检测到摄像头'} /></div>
+              <div>
+                <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
+                  <Empty description={'未检测到摄像头'} />
+                </div>
+              </div>
           }
           <div>
             <span>摄像头：</span>
             <Select
               placeholder={videoDeviceManager.list.length ? '请选择设备' : '未检测到摄像头'}
               options={videoDeviceManager.list} style={{ flexGrow: 1 }}
-              value={videoDeviceManager.item} onChange={(e) => {
+              value={videoDeviceManager.item} onChange={async (e) => {
+                const setting = await JSON.parse(storage.getItem('setting') as string)
+                setting.videoDeviceId = e;
+                storage.setItem('setting', JSON.stringify(setting))
                 setVideoDeviceManager({
                   ...videoDeviceManager,
                   item: e

src/utils/package/agora.ts

@@ -274,8 +274,8 @@ const agora = {
     }
   },
   // 通过设备 ID 指定视频采集设备。
-  setVideoDeviceManager: (deviceIdUTF8: string) => {
-    rtcEngine.getVideoDeviceManager().setDevice(deviceIdUTF8)
+  setVideoDeviceManager: async (deviceIdUTF8: string) => {
+    await rtcEngine.getVideoDeviceManager().setDevice(deviceIdUTF8)
   },
   // 开启本地视频预览
   startPreview: async (id: string, uid: number): Promise<void> => {