src/components/StupWizard/index.module.scss

@@ -40,7 +40,6 @@
   .stupWizardRight {
     flex-grow: 1;
     height: 100%;
-    position: relative;
 
     >div {
       display: flex;
@@ -59,7 +58,6 @@
       >div {
         flex-grow: 1;
         overflow-y: auto;
-        overflow-x: hidden;
         padding: 20px;
         box-sizing: border-box;
       }
@@ -73,16 +71,10 @@
     height: 296px;
     border-radius: 10px;
     overflow: hidden;
-    border: 1px #292E33 solid;
-    position: relative;
 
     >video {
       width: 100%;
       height: 100%;
-      z-index: 1;
-      position: absolute;
-      left: 0;
-      top: 0;
     }
   }
 

src/components/StupWizard/index.tsx

@@ -3,7 +3,6 @@ import ImageUrl from '@/utils/package/ImageUrl';
 import { Button, Empty, message, 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';
 const StupWizard = forwardRef((props: any, ref: any) => {
   useImperativeHandle(ref, () => ({
     changeModal: () => {
@@ -67,7 +66,6 @@ const StupWizard = forwardRef((props: any, ref: any) => {
         open={isStupWizard}
         footer={null}
         closable={false}
-        destroyOnClose={true}
         centered
         width={'70vw'}
         className='modal-padding'>
@@ -75,13 +73,10 @@ const StupWizard = forwardRef((props: any, ref: any) => {
           <div className={styles.stupWizardLeft}>
             {list.map((row: any, index: number) => {
               return (
-                <div key={index} className={`${row.active ? styles.active : ''}`} onClick={async () => {
+                <div key={index} className={`${row.active ? styles.active : ''}`} onClick={() => {
                   const newList = [...list]
                   newList.forEach(item => item.active = false)
                   newList[index].active = true;
-                  if (newList[index].title !== '视频') {
-                    await agora.stopVideoDevice('videoPreview')
-                  }
                   setList(newList)
                 }}>
                   <img src={row.active ? row.iconActive : row.icon} alt="" />
@@ -91,22 +86,10 @@ const StupWizard = forwardRef((props: any, ref: any) => {
             })}
           </div>
           <div className={styles.stupWizardRight}>
-            <CloseOutlined style={{
-              position: 'absolute',
-              color: 'white',
-              right: '20px',
-              top: '16px',
-              cursor: 'pointer'
-            }}
-              onClick={() => {
-                agora.stopVideoDevice('videoPreview')
-                setIsStupWizard(false)
-              }}
-            />
             {list[0].active ? <VideoComponents /> : null}
             {list[1].active ? <AudioComponents /> : null}
             {list[2].active ? <RecordingComponents /> : null}
-            {list[3].active ? <FileComponents /> : null}
+            {list[3].active ? <RecordingComponents /> : null}
           </div>
         </div>
       </Modal>
@@ -123,7 +106,7 @@ const VideoComponents = () => {
     getVideoDeviceList()
   }, []);
   const getVideoDeviceList = (): void => {
-    agora.getVideoDeviceManager().then(async (res) => {
+    agora.getVideoDeviceManager().then(res => {
       const { item, list } = res
       setVideoDeviceManager({
         list: list.map((row: any) => {
@@ -134,10 +117,7 @@ const VideoComponents = () => {
         }),
         item: item ? item : null,
       })
-      if (item) {
+      agora.startPreview('videoPreview')
-        await agora.stopVideoDevice('videoPreview')
-        agora.startPreview('videoPreview', item)
-      }
     })
   }
   return (
@@ -148,14 +128,7 @@ const VideoComponents = () => {
           {
             videoDeviceManager.item ?
               <div>
-                <video id='videoPreview'></video>
+                <video id='videoPreview' controls></video>
-                <LoadingOutlined style={{
-                  position: 'absolute',
-                  color: 'white',
-                  right: '50%',
-                  fontSize: '30px',
-                  top: '50%',
-                }} />
               </div> :
               <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}><Empty description={'未检测到摄像头'} /></div>
           }
@@ -165,12 +138,7 @@ const VideoComponents = () => {
               placeholder={videoDeviceManager.list.length ? '请选择设备' : '未检测到摄像头'}
               options={videoDeviceManager.list} style={{ flexGrow: 1 }}
               value={videoDeviceManager.item} onChange={(e) => {
-                setVideoDeviceManager({
+
-                  ...videoDeviceManager,
-                  item: e
-                })
-                agora.setVideoDeviceManager(e)
-                agora.startPreview('videoPreview', e)
               }} />;
           </div>
         </div>

src/utils/package/agora.ts

@@ -270,17 +270,11 @@ const agora = {
       item: rtcEngine.getVideoDeviceManager().getDevice()
     }
   },
-  // 通过设备 ID 指定视频采集设备。
-  setVideoDeviceManager: (deviceIdUTF8: string) => {
-    rtcEngine.getVideoDeviceManager().setDevice(deviceIdUTF8)
-  },
   // 开启本地视频预览
-  startPreview: async (id: string, deviceId: string): Promise<boolean> => {
+  startPreview: async (id: string): Promise<boolean> => {
     return new Promise((resolve, reject) => {
       navigator.mediaDevices.getUserMedia({
-        video: {
+        video: true,
-          deviceId: { exact: deviceId }, // 指定设备ID
-        },
         audio: true,
       }).then((stream) => {
         let dom = document.getElementById(id) as any;
@@ -294,16 +288,7 @@ const agora = {
       });
     })
   },
-  stopVideoDevice: async (id: string) => {
+
-    let dom = document.getElementById(id) as any;
-    if (dom && dom.srcObject) {
-      const tracks = dom.srcObject.getTracks();
-      tracks.forEach((track: any) => {
-        track.stop();
-      });
-      dom.srcObject = null;
-    }
-  },