From f5ba7b428466df30696725556c90542e3b5e9dd5 Mon Sep 17 00:00:00 2001 From: yj <1336058017@qq.com> Date: Thu, 25 Jul 2024 11:56:46 +0800 Subject: [PATCH] =?UTF-8?q?=E8=AE=BE=E7=BD=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/icon39-active.png | Bin 0 -> 299 bytes src/assets/icon39.png | Bin 0 -> 294 bytes src/assets/icon40-active.png | Bin 0 -> 471 bytes src/assets/icon40.png | Bin 0 -> 436 bytes src/assets/icon41-active.png | Bin 0 -> 473 bytes src/assets/icon41.png | Bin 0 -> 427 bytes src/assets/icon42-active.png | Bin 0 -> 450 bytes src/assets/icon42.png | Bin 0 -> 425 bytes src/components/StupWizard/index.module.scss | 136 ++++----- src/components/StupWizard/index.tsx | 297 +++++++++----------- src/page/Home/index.tsx | 9 +- src/utils/package/agora.ts | 22 +- src/utils/package/imageUrl.ts | 16 ++ src/utils/styles/App.scss | 6 + 14 files changed, 255 insertions(+), 231 deletions(-) create mode 100644 src/assets/icon39-active.png create mode 100644 src/assets/icon39.png create mode 100644 src/assets/icon40-active.png create mode 100644 src/assets/icon40.png create mode 100644 src/assets/icon41-active.png create mode 100644 src/assets/icon41.png create mode 100644 src/assets/icon42-active.png create mode 100644 src/assets/icon42.png diff --git a/src/assets/icon39-active.png b/src/assets/icon39-active.png new file mode 100644 index 0000000000000000000000000000000000000000..0bee7b20eb0e4890e1a4b08a206cb00ddf9b6c73 GIT binary patch literal 299 zcmeAS@N?(olHy`uVBq!ia0vp^d?3uh1|;P@bT0xa&H|6fVg?3oVGw3ym^DWND9BhG z4jFMgNVGsQXTwxETG`{z5d zR;sm6^>P!U7H#{W-<$YxHM8V%$7~N5=kt%J3w6IYVKJ&}zZ$Z8k`+(4gG92C;tywz qy=!k)*ya35u{oc*(PQD~8irg(w{Rtavpzt-FnGH9xvXlt|7srqa#-kGt@-`WWw0S2pnM*R7U*t_; zo_(Nka-me7i24QI5?1vIyl+HrZTV+v=Gc?5_k((F-2LDC_qV&B2;q8j)bhSm^0oN0 zjuX5zg}pK-rQZC=7#>=BIN_j#@O+1gtcrE-gs=42r6=)hVY>1l=himgk9#zhCVACO zXV{_DwWyF+e+U1sL;0T?A8*o`y#JvAkN@9>nc8hDofEegul*{=*e))iy}{Rxjael2 m`rAbss{-{u+t^P&S;C%u#m{|ak(MFQ8w{SVelF{r5}E+rUuuZ} literal 0 HcmV?d00001 diff --git a/src/assets/icon40-active.png b/src/assets/icon40-active.png new file mode 100644 index 0000000000000000000000000000000000000000..9ad60add67d308b1c1e2683cd47f78675c6e24b1 GIT binary patch literal 471 zcmV;|0Vw{7P)=RIL~54)^K{cbrJOwkw$Y+XwTTPI80v7 zd#kD{%8yX0qvxB7Z*5m>+sn6b&$dY=$gLPkStEjZ9AxC)=m<+8WFwbqqqlN|00;h% z)?imlQMGiGd}VbANG>RxXBuiK4HvQiu2RMN!e6Dgg}z372=*;dEZBzv&quaT(IO zgNPn!xcg~4AA5Xx*TLjZ}!Sxes<*v{71O@ zwK>1}Qx(q!yRHTuEg7RfEhG2h;kGo5v8g>O8NQ=}bqq}Un6jU|e*tmdqsizpSg-&9 N002ovPDHLkV1fvD!kqvB literal 0 HcmV?d00001 diff --git a/src/assets/icon40.png b/src/assets/icon40.png new file mode 100644 index 0000000000000000000000000000000000000000..848aa9736a0c44f84c1c508e8372cc5c1228dbdc GIT binary patch literal 436 zcmV;l0ZaagP)BH;n4(ckD~MFO0dd$pBz#yb*}=1v=8pU(AvBkVfDvalWeLAlcVhF+_Q3YHTvwW|?894w}wpLjD;os*>G9jOD5YM7Bx? z1B2V-tJAk;nA}ds5WzpY+Me*;j`_f`lnw&0Wc>oNq{?KpTgT;{%~EN%*HT-({Sg|@ zTDK~6d5J?IbW83RXw*G=&Q&T1i{#RB=&gpK>;q?((vlspSZCQD_l{jXPSS?bN%9$; z%AEKHqi#`OPTk&C3We~3q^PBJ&fTh-i#BQjof@t19U1p%m^Z4_Xa8ZJcag8DNik9* P00000NkvXXu0mjflvKnY literal 0 HcmV?d00001 diff --git a/src/assets/icon41.png b/src/assets/icon41.png new file mode 100644 index 0000000000000000000000000000000000000000..61aae36a260631674d409e832b2f4d7096dc782e GIT binary patch literal 427 zcmV;c0aX5pP)S`(Zc?2(p% z*?BYX&7de(7+VS!MPamUYcj@+aUAO)2#)`P2?VzVUA-Q6M>KuS2^ z?2#1DikibPY*ke~I*zmXMIq1g?<7eq*Kif?ECGfYxDZ{_G<|^f7rd@?T|dZ05&wjKOYUq;ljaGvlwZxL8~k47 z)w-?|^nBkhQQb!TnRF`Wc8`DH#8Rh6-}gIB(`XPS&+t6&Z3a5YAs>ceB|1|lxGx%# za=~cV*mKl0jUyz;37BpSns<<}p9=E7?gs5GPS=m_BJ8K4_DH4W7pp>r9%Si&3 zO5kaYi^**{C<0r(k7YU*cGK*xeMEP9h|ueJcvR1RO~A=bWd{46f1?D9dlf>|vI+K5 zh@v1D6apBc{y}Bo%y}8OC{MZ1zQJhpd|e5%R%ei-X7|%4Fg~Ap>45vd?q&(t?yRfP z?#j1PDhk=+W*?prz(#9WNSUz;B{r(5nhHI(_6EoZ7$5_4DV-$`$|x?FfKON3sTkOp zq4U@}8K;J*18!xJwvX)#wrHFeAU9CTwbpo2B9F-2ZIck#iPKO@t*m|AHUIv|+v6V< s5jNvtxv~3iha-O&3dO}c@dN+WH;urMk`aJ2?0^oWgJ=bk3S`UQa~&Xn7NdZvE@tE!rIF@9V8@WpjqnIcR#(V#F;$Fi*BIosPQ5Iu4f zW0;cf`)fR7xZE*zI;uA`W^)aQ516(C@Vcrhhun;8gZZIb=XoC6ww=(rC<;jsgcQdV zf#|-A)+^(23+BfGcrS`#h^5rpe*s9L2$=reD04gQ&A=*wNFf60tFG(&X`Ege)>gdiv:nth-child(1) { - padding: 20px 0 0; - overflow-x: hidden; - max-height: 60vh; + .stupWizardLeft { + background-color: #0C111A; + flex-shrink: 0; + width: 154px; + height: 100%; overflow-y: auto; - >div:nth-child(1) { - color: #EEEEEE; - font-weight: bold; - font-size: 20px; - } - - >div:nth-child(2) { - >div { - display: flex; - align-items: center; - margin-top: 22px; - - >span { - flex-shrink: 0; - color: #828282; - font-size: 18px; - width: 130px; - } - } - } - - >div:nth-child(3) { - margin-top: 34px; + >div { + display: flex; + align-items: center; + cursor: pointer; + padding: 12px 16px; + box-sizing: border-box; >span { - color: #828282; - font-size: 18px; + color: #EEEEEE; + font-size: 16px; + margin-left: 10px; + } + + >img { + height: 20px; + } + } + + .active { + background-color: #131924; + + >span { + color: #5575F2; + } + } + } + + .stupWizardRight { + flex-grow: 1; + height: 100%; + + >div { + display: flex; + flex-direction: column; + height: 100%; + + >span { + flex-shrink: 0; + color: #FFFFFF; + font-size: 16px; + border-bottom: 1px solid #292E33; + padding: 10px 20px; + box-sizing: border-box; } >div { - display: flex; - align-items: center; - margin-top: 20px; - - >img { - flex-shrink: 0; - width: 36px; - margin-right: 20px; - } - - >div { - flex-grow: 1; - height: 40px; - position: relative; - - >img { - height: 100%; - } - - >div { - position: absolute; - left: 0; - top: 0; - height: 100%; - width: 0%; - overflow: hidden; - - >img { - height: 100%; - } - } - } + flex-grow: 1; + overflow-y: auto; + padding: 20px; + box-sizing: border-box; } } } +} + +.videoComponents { + >div:nth-child(1) { + width: 100%; + height: 296px; + border-radius: 10px; + overflow: hidden; + + >video { + width: 100%; + height: 100%; + } + } >div:nth-child(2) { - flex-shrink: 0; + width: 100%; + margin-top: 10px; display: flex; align-items: center; - justify-content: flex-end; - margin-top: 20px; + + >span { + color: white; + } } } \ No newline at end of file diff --git a/src/components/StupWizard/index.tsx b/src/components/StupWizard/index.tsx index fae419a..1a177d3 100644 --- a/src/components/StupWizard/index.tsx +++ b/src/components/StupWizard/index.tsx @@ -1,20 +1,45 @@ import styles from '@/components/StupWizard/index.module.scss' import ImageUrl from '@/utils/package/ImageUrl'; -import { Button, message, Modal, Select, Slider } from 'antd'; -import { useState, useImperativeHandle, forwardRef } from "react"; +import { Button, Empty, message, Modal, Select, Slider } from 'antd'; +import { useState, useImperativeHandle, forwardRef, useEffect } from "react"; import agora from '@/utils/package/agora' const StupWizard = forwardRef((props: any, ref: any) => { useImperativeHandle(ref, () => ({ - changeIsStupWizard: () => { + changeModal: () => { + agora.init() setIsStupWizard(true) - getAudioMediaList(true) - agora.startPlaybackDeviceTest() - agora.setPlaybackDeviceVolume(100) + // getAudioMediaList(true) + // agora.startPlaybackDeviceTest() + // agora.setPlaybackDeviceVolume(100) } })) + const [list, setList] = useState([ + { + title: '视频', + icon: ImageUrl.icon39, + iconActive: ImageUrl.icon39Active, + active: true, + }, + { + title: '音频', + icon: ImageUrl.icon40, + iconActive: ImageUrl.icon40Active, + active: false, + }, + { + title: '录制', + icon: ImageUrl.icon41, + iconActive: ImageUrl.icon41Active, + active: false, + }, + { + title: '共享文件', + icon: ImageUrl.icon42, + iconActive: ImageUrl.icon42Active, + active: false, + } + ]) const [isStupWizard, setIsStupWizard] = useState(false); - const [stepsStatus, setStepsStatus] = useState(1); - const [isVideoLoad, setIsVideoLoad] = useState(false); const [audioDeviceManager, setAudioDeviceManager] = useState({ currentDevices: [], currentDevice: {}, @@ -34,164 +59,122 @@ const StupWizard = forwardRef((props: any, ref: any) => { currentVolume, }) } - // 音频设置向导 - // 视频测试 return ( <> - +
-
-
音频设置向导
-
-
- 音频输出设备： - { - setAudioDeviceManager({ - ...audioDeviceManager, - currentDevice: e - }) - agora.setRecordingDevice(e); - getAudioMediaList() - }} />; - -
- {stepsStatus ?
- 调节声音大小： - { - setAudioDeviceManager({ - ...audioDeviceManager, - currentVolume: e - }) - agora.setRecordingDeviceVolume(e) - }} style={{ flexGrow: 1 }} /> -
: -
- 视频预览： - -
- } -
-
- 您可以对着麦克风说话，试听表克风的输入质量 -
- -
- -
- -
-
-
-
-
-
-
- -
-
- - -
- -
-
*/} ) }) + +const VideoComponents = () => { + const [videoDeviceManager, setVideoDeviceManager] = useState({ + list: [], + item: null, + }); + useEffect(() => { + getVideoDeviceList() + }, []); + const getVideoDeviceList = (): void => { + agora.getVideoDeviceManager().then(res => { + const { item, list } = res + setVideoDeviceManager({ + list: list.map((row: any) => { + return { + value: row.deviceId, + label: row.deviceName + } + }), + item: item ? item : null, + }) + agora.startPreview('videoPreview') + }) + } + return ( + <> +
+ 视频 +
+ { + videoDeviceManager.item ? +
+ +
: +
+ } +
+ 摄像头： +