Merge branch 'master' of https://gitea.23544.com/marking/WGShare.Client.Electron

src/components/StupWizard/index.module.scss

@@ -40,6 +40,7 @@
   .stupWizardRight {
     flex-grow: 1;
     height: 100%;
+    position: relative;
 
     >div {
       display: flex;
@@ -58,6 +59,7 @@
       >div {
         flex-grow: 1;
         overflow-y: auto;
+        overflow-x: hidden;
         padding: 20px;
         box-sizing: border-box;
       }
@@ -71,10 +73,16 @@
     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,6 +3,7 @@ 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: () => {
@@ -66,6 +67,7 @@ const StupWizard = forwardRef((props: any, ref: any) => {
         open={isStupWizard}
         footer={null}
         closable={false}
+        destroyOnClose={true}
         centered
         width={'70vw'}
         className='modal-padding'>
@@ -73,10 +75,13 @@ 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={() => {
+                <div key={index} className={`${row.active ? styles.active : ''}`} onClick={async () => {
                   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="" />
@@ -86,10 +91,22 @@ 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 ? <RecordingComponents /> : null}
+            {list[3].active ? <FileComponents /> : null}
           </div>
         </div>
       </Modal>
@@ -106,7 +123,7 @@ const VideoComponents = () => {
     getVideoDeviceList()
   }, []);
   const getVideoDeviceList = (): void => {
-    agora.getVideoDeviceManager().then(res => {
+    agora.getVideoDeviceManager().then(async (res) => {
       const { item, list } = res
       setVideoDeviceManager({
         list: list.map((row: any) => {
@@ -117,7 +134,10 @@ const VideoComponents = () => {
         }),
         item: item ? item : null,
       })
-      agora.startPreview('videoPreview')
+      if (item) {
+        await agora.stopVideoDevice('videoPreview')
+        agora.startPreview('videoPreview', item)
+      }
     })
   }
   return (
@@ -128,7 +148,14 @@ const VideoComponents = () => {
           {
             videoDeviceManager.item ?
               <div>
-                <video id='videoPreview' controls></video>
+                <video id='videoPreview'></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>
           }
@@ -138,7 +165,12 @@ 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,11 +270,17 @@ const agora = {
       item: rtcEngine.getVideoDeviceManager().getDevice()
     }
   },
+  // 通过设备 ID 指定视频采集设备。
+  setVideoDeviceManager: (deviceIdUTF8: string) => {
+    rtcEngine.getVideoDeviceManager().setDevice(deviceIdUTF8)
+  },
   // 开启本地视频预览
-  startPreview: async (id: string): Promise<boolean> => {
+  startPreview: async (id: string, deviceId: string): Promise<boolean> => {
     return new Promise((resolve, reject) => {
       navigator.mediaDevices.getUserMedia({
-        video: true,
+        video: {
+          deviceId: { exact: deviceId }, // 指定设备ID
+        },
         audio: true,
       }).then((stream) => {
         let dom = document.getElementById(id) as any;
@@ -288,7 +294,16 @@ 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;
+    }
+  },