视频缓存

src/App.tsx

@@ -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) {

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> => {