marking
/
WGShare.Client.Electron
18
0
Fork 0
Code Pull Requests 1 Actions Releases 4 Activity

优化

This commit is contained in:
yj 2024-08-14 16:19:11 +08:00
parent 043e86ed08
commit 8e0bfa8ce8
4 changed files with 152 additions and 122 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/JoinMeetingModal/index.tsx
View File

@ -1,9 +1,7 @@
import { GetCheckoutRoomNum, GetRoomInfo, GetRoomRtcToken } from '@/api/Home/Index';
import styles from '@/components/JoinMeetingModal/index.module.scss' import styles from '@/components/JoinMeetingModal/index.module.scss'
import ImageUrl from '@/utils/package/ImageUrl'; import ImageUrl from '@/utils/package/ImageUrl';
import { Modal, message } from 'antd'; import { Modal, message } from 'antd';
import { useState, useImperativeHandle, forwardRef, useRef } from "react"; import { useState, useImperativeHandle, forwardRef, useRef } from "react";
import { useNavigate } from 'react-router-dom';
import Avatar from '@/components/Avatar'; import Avatar from '@/components/Avatar';
import JoinSetting from '../JoinSetting'; import JoinSetting from '../JoinSetting';
const JoinMeetingModal = forwardRef((props: any, ref: any) => { const JoinMeetingModal = forwardRef((props: any, ref: any) => {

1
src/components/JoinSetting/index.tsx
View File

@ -21,6 +21,7 @@ const JoinSetting = forwardRef((_props: any, ref: any) => {
}) })
if (location.hash.indexOf('/meeting') === -1) { if (location.hash.indexOf('/meeting') === -1) {
agora.init() agora.init()
agora.setDeviceManager()
} }
getDeviceList() getDeviceList()
} }

112
src/components/StupWizard/index.tsx
View File

@ -1,20 +1,28 @@
import styles from '@/components/StupWizard/index.module.scss' import styles from '@/components/StupWizard/index.module.scss'
import ImageUrl from '@/utils/package/ImageUrl'; import ImageUrl from '@/utils/package/ImageUrl';
import {Button, Checkbox, Empty, Input, message, Modal, Popover, Radio, Select, Slider} from 'antd'; import { Button, Checkbox, Empty, Input, message, Modal, Popover, Radio, Select, Slider } from 'antd';
import {forwardRef, useEffect, useImperativeHandle, useState} from "react"; import { forwardRef, useEffect, useImperativeHandle, useState } from "react";
import agora from '@/utils/package/agora' import agora from '@/utils/package/agora'
import {CloseOutlined, LoadingOutlined, QuestionCircleOutlined} from '@ant-design/icons'; import { CloseOutlined, LoadingOutlined, QuestionCircleOutlined } from '@ant-design/icons';
import {storage} from '@/utils'; import { storage } from '@/utils';
import path from 'path'; import path from 'path';
const fs = require('fs').promises; const fs = require('fs').promises;
const {exec} = require('child_process'); const { exec } = require('child_process');
const StupWizard = forwardRef((props: any, ref: any) => { const StupWizard = forwardRef((props: any, ref: any) => {
useImperativeHandle(ref, () => ({ useImperativeHandle(ref, () => ({
changeModal: () => { changeModal: () => {
if (location.hash.indexOf('/meeting') === -1) { if (location.hash.indexOf('/meeting') === -1) {
agora.init() agora.init()
agora.setDeviceManager()
} }
setList((res: any) => {
res.forEach((item: any) => {
item.active = false
});
res[0].active = true;
return res
})
setIsStupWizard(true) setIsStupWizard(true)
} }
})) }))
@ -74,7 +82,7 @@ const StupWizard = forwardRef((props: any, ref: any) => {
agora.stopPlaybackDeviceTest() agora.stopPlaybackDeviceTest()
agora.stopRecordingDeviceTest() agora.stopRecordingDeviceTest()
}}> }}>
<img src={row.active ? row.iconActive : row.icon} alt=""/> <img src={row.active ? row.iconActive : row.icon} alt="" />
<span>{row.title}</span> <span>{row.title}</span>
</div> </div>
) )
@ -95,11 +103,11 @@ const StupWizard = forwardRef((props: any, ref: any) => {
setIsStupWizard(false) setIsStupWizard(false)
}} }}
/> />
{list[0].active ? <CurrencyComponents/> : null} {list[0].active ? <CurrencyComponents /> : null}
{list[1].active ? <VideoComponents/> : null} {list[1].active ? <VideoComponents /> : null}
{list[2].active ? <AudioComponents/> : null} {list[2].active ? <AudioComponents /> : null}
{list[3].active ? <RecordingComponents/> : null} {list[3].active ? <RecordingComponents /> : null}
{list[4].active ? <FileComponents/> : null} {list[4].active ? <FileComponents /> : null}
</div> </div>
</div> </div>
</Modal> </Modal>
@ -124,7 +132,7 @@ const CurrencyComponents = () => {
setting.closeSetting = e.target.value; setting.closeSetting = e.target.value;
storage.setItem('setting', JSON.stringify(setting)) storage.setItem('setting', JSON.stringify(setting))
setOperationValue(e.target.value) setOperationValue(e.target.value)
}} style={{flexShrink: 0, margin: '10px 0'}} value={optionsValue}> }} style={{ flexShrink: 0, margin: '10px 0' }} value={optionsValue}>
<Radio value={'quit'}>退出主程序</Radio> <Radio value={'quit'}>退出主程序</Radio>
<Radio value={'hide'}>不退出程序，最小化到托盘</Radio> <Radio value={'hide'}>不退出程序，最小化到托盘</Radio>
</Radio.Group> </Radio.Group>
@ -147,14 +155,7 @@ const VideoComponents = () => {
const getVideoDeviceList = async (): Promise<void> => { const getVideoDeviceList = async (): Promise<void> => {
const userInfo = JSON.parse(storage.getItem('user') as string) const userInfo = JSON.parse(storage.getItem('user') as string)
agora.getVideoDeviceManager().then(async (res) => { agora.getVideoDeviceManager().then(async (res) => {
const {item, list} = 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({ setVideoDeviceManager({
list: list.map((row: any) => { list: list.map((row: any) => {
return { return {
@ -185,12 +186,12 @@ const VideoComponents = () => {
right: '50%', right: '50%',
fontSize: '30px', fontSize: '30px',
top: '50%', top: '50%',
}}/> }} />
</div> </div>
</div> : </div> :
<div> <div>
<div style={{display: 'flex', justifyContent: 'center', alignItems: 'center'}}> <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
<Empty description={'未检测到摄像头'}/> <Empty description={'未检测到摄像头'} />
</div> </div>
</div> </div>
} }
@ -211,11 +212,11 @@ const VideoComponents = () => {
color: 'white', color: 'white',
cursor: 'pointer', cursor: 'pointer',
marginRight: '10px' marginRight: '10px'
}}/> }} />
</Popover> </Popover>
<Select <Select
placeholder={videoDeviceManager.list.length ? '请选择设备' : '未检测到摄像头'} placeholder={videoDeviceManager.list.length ? '请选择设备' : '未检测到摄像头'}
options={videoDeviceManager.list} style={{flexGrow: 1, marginRight: '10px'}} options={videoDeviceManager.list} style={{ flexGrow: 1, marginRight: '10px' }}
value={videoDeviceManager.item} onChange={async (e) => { value={videoDeviceManager.item} onChange={async (e) => {
setting.videoDeviceId = e; setting.videoDeviceId = e;
storage.setItem('setting', JSON.stringify(setting)) storage.setItem('setting', JSON.stringify(setting))
@ -224,7 +225,7 @@ const VideoComponents = () => {
item: e item: e
}) })
agora.setVideoDeviceManager(e) agora.setVideoDeviceManager(e)
}}/> }} />
</div> </div>
</div> </div>
@ -260,29 +261,14 @@ const AudioComponents = () => {
const { const {
playBackList, playBackList,
ecordingList, ecordingList,
playBackItem,
ecordingItem,
ecordingVolume ecordingVolume
} = await agora.getAudioMediaList(); } = await agora.getAudioMediaList();
if ((!setting.ecordingDeviceId && ecordingItem.deviceId) || (!(ecordingList.find((item: any) => item.deviceId === setting.ecordingDeviceId)) && ecordingItem.deviceId)) {
setting.ecordingDeviceId = ecordingItem.deviceId
}
if ((!setting.playBackDeviceId && playBackItem.deviceId) || (!(playBackList.find((item: any) => item.deviceId === setting.playBackDeviceId)) && playBackItem.deviceId)) {
setting.playBackDeviceId = playBackItem.deviceId
}
if (!ecordingList.length) {
setting.ecordingDeviceId = ''
}
if (!playBackList.length) {
setting.playBackDeviceId = ''
}
if (!setting.ecordingVolume) { if (!setting.ecordingVolume) {
setting.ecordingVolume = ecordingVolume; setting.ecordingVolume = ecordingVolume;
} }
if (!setting.playBackVolume) { if (!setting.playBackVolume) {
setting.playBackVolume = 127; setting.playBackVolume = 127;
} }
storage.setItem('setting', JSON.stringify(setting))
setAudioDeviceManager({ setAudioDeviceManager({
...audioDeviceManager, ...audioDeviceManager,
playBackList: playBackList.map((row: any) => { playBackList: playBackList.map((row: any) => {
@ -297,8 +283,8 @@ const AudioComponents = () => {
label: row.deviceName label: row.deviceName
} }
}), }),
playBackItem: setting.playBackDeviceId ? setting.playBackDeviceId : playBackItem.deviceId || null, playBackItem: setting.playBackDeviceId,
ecordingItem: setting.ecordingDeviceId ? setting.ecordingDeviceId : ecordingItem.deviceId || null, ecordingItem: setting.ecordingDeviceId,
ecordingVolume: setting.ecordingVolume, ecordingVolume: setting.ecordingVolume,
playBackVolume: setting.playBackVolume, playBackVolume: setting.playBackVolume,
autoEcordingVolume: setting.autoEcordingVolume autoEcordingVolume: setting.autoEcordingVolume
@ -314,7 +300,7 @@ const AudioComponents = () => {
<span>麦克风：</span> <span>麦克风：</span>
<Select <Select
placeholder={audioDeviceManager.ecordingList.length ? '请选择设备' : '未检测到麦克风'} placeholder={audioDeviceManager.ecordingList.length ? '请选择设备' : '未检测到麦克风'}
options={audioDeviceManager.ecordingList} style={{flexGrow: 1}} options={audioDeviceManager.ecordingList} style={{ flexGrow: 1 }}
value={audioDeviceManager.ecordingItem} onChange={async (e) => { value={audioDeviceManager.ecordingItem} onChange={async (e) => {
setting.ecordingDeviceId = e; setting.ecordingDeviceId = e;
storage.setItem('setting', JSON.stringify(setting)) storage.setItem('setting', JSON.stringify(setting))
@ -323,7 +309,7 @@ const AudioComponents = () => {
ecordingItem: e ecordingItem: e
}) })
agora.setRecordingDevice(e) agora.setRecordingDevice(e)
}}/>; }} />;
{audioDeviceManager.ecordingActive ? <div onClick={() => { {audioDeviceManager.ecordingActive ? <div onClick={() => {
agora.stopRecordingDeviceTest() agora.stopRecordingDeviceTest()
setAudioDeviceManager({ setAudioDeviceManager({
@ -342,17 +328,17 @@ const AudioComponents = () => {
}}>测试</div>} }}>测试</div>}
</div> </div>
{audioDeviceManager.ecordingActive ? <div className={styles.audioComponentsVolume}> {audioDeviceManager.ecordingActive ? <div className={styles.audioComponentsVolume}>
<img src={ImageUrl.icon36} alt=""/> <img src={ImageUrl.icon36} alt="" />
<div> <div>
<img src={ImageUrl.icon34} alt=""/> <img src={ImageUrl.icon34} alt="" />
<div id='deviceTest'> <div id='deviceTest'>
<img src={ImageUrl.icon35} alt=""/> <img src={ImageUrl.icon35} alt="" />
</div> </div>
</div> </div>
</div> : null} </div> : null}
<div className={styles.audioComponentsSlider}> <div className={styles.audioComponentsSlider}>
<span>输入音量：</span> <span>输入音量：</span>
<Slider value={audioDeviceManager.ecordingVolume} style={{flexGrow: 1}} max={255} <Slider value={audioDeviceManager.ecordingVolume} style={{ flexGrow: 1 }} max={255}
onChange={async (e) => { onChange={async (e) => {
setting.ecordingVolume = e; setting.ecordingVolume = e;
storage.setItem('setting', JSON.stringify(setting)) storage.setItem('setting', JSON.stringify(setting))
@ -361,7 +347,7 @@ const AudioComponents = () => {
...audioDeviceManager, ...audioDeviceManager,
ecordingVolume: e, ecordingVolume: e,
}) })
}} disabled={!audioDeviceManager.ecordingItem}/> }} disabled={!audioDeviceManager.ecordingItem} />
</div> </div>
<div> <div>
<Checkbox onChange={async (e) => { <Checkbox onChange={async (e) => {
@ -379,7 +365,7 @@ const AudioComponents = () => {
<span>扬声器：</span> <span>扬声器：</span>
<Select <Select
placeholder={audioDeviceManager.playBackList.length ? '请选择设备' : '未检测到麦克风'} placeholder={audioDeviceManager.playBackList.length ? '请选择设备' : '未检测到麦克风'}
options={audioDeviceManager.playBackList} style={{flexGrow: 1}} options={audioDeviceManager.playBackList} style={{ flexGrow: 1 }}
value={audioDeviceManager.playBackItem} onChange={async (e) => { value={audioDeviceManager.playBackItem} onChange={async (e) => {
setting.playBackDeviceId = e; setting.playBackDeviceId = e;
storage.setItem('setting', JSON.stringify(setting)) storage.setItem('setting', JSON.stringify(setting))
@ -388,7 +374,7 @@ const AudioComponents = () => {
playBackItem: e playBackItem: e
}) })
agora.setPlaybackDevice(e) agora.setPlaybackDevice(e)
}}/>; }} />;
{audioDeviceManager.playBackActive ? <div onClick={() => { {audioDeviceManager.playBackActive ? <div onClick={() => {
agora.stopPlaybackDeviceTest() agora.stopPlaybackDeviceTest()
setAudioDeviceManager({ setAudioDeviceManager({
@ -407,17 +393,17 @@ const AudioComponents = () => {
}}>测试</div>} }}>测试</div>}
</div> </div>
{audioDeviceManager.playBackActive ? <div className={styles.audioComponentsVolume}> {audioDeviceManager.playBackActive ? <div className={styles.audioComponentsVolume}>
<img src={ImageUrl.icon36} alt=""/> <img src={ImageUrl.icon36} alt="" />
<div> <div>
<img src={ImageUrl.icon34} alt=""/> <img src={ImageUrl.icon34} alt="" />
<div id='deviceTest'> <div id='deviceTest'>
<img src={ImageUrl.icon35} alt=""/> <img src={ImageUrl.icon35} alt="" />
</div> </div>
</div> </div>
</div> : null} </div> : null}
<div className={styles.audioComponentsSlider}> <div className={styles.audioComponentsSlider}>
<span>输出音量：</span> <span>输出音量：</span>
<Slider value={audioDeviceManager.playBackVolume} style={{flexGrow: 1}} max={255} <Slider value={audioDeviceManager.playBackVolume} style={{ flexGrow: 1 }} max={255}
onChange={async (e) => { onChange={async (e) => {
setting.playBackVolume = e; setting.playBackVolume = e;
storage.setItem('setting', JSON.stringify(setting)) storage.setItem('setting', JSON.stringify(setting))
@ -426,7 +412,7 @@ const AudioComponents = () => {
...audioDeviceManager, ...audioDeviceManager,
playBackVolume: e, playBackVolume: e,
}) })
}} disabled={!audioDeviceManager.playBackItem}/> }} disabled={!audioDeviceManager.playBackItem} />
</div> </div>
</div> </div>
</div> </div>
@ -469,7 +455,7 @@ const RecordingComponents = () => {
<Input <Input
disabled={true} disabled={true}
placeholder="请填入文件路径" placeholder="请填入文件路径"
style={{margin: '0 14px', flexGrow: 1}} style={{ margin: '0 14px', flexGrow: 1 }}
value={filePath} value={filePath}
onChange={async (e) => { onChange={async (e) => {
setting.recordingFilesPath = e.target.value; setting.recordingFilesPath = e.target.value;
@ -481,7 +467,7 @@ const RecordingComponents = () => {
window.electron.selectFilePath({ window.electron.selectFilePath({
key: 'recordingFilesPath', key: 'recordingFilesPath',
}) })
}} style={{backgroundColor: '#31353A', marginRight: '10px'}}>选择保存目录</Button> }} style={{ backgroundColor: '#31353A', marginRight: '10px' }}>选择保存目录</Button>
<Button type="primary" onClick={async () => { <Button type="primary" onClick={async () => {
try { try {
await fs.access(filePath, fs.constants.F_OK); await fs.access(filePath, fs.constants.F_OK);
@ -497,7 +483,7 @@ const RecordingComponents = () => {
message.error(error) message.error(error)
} }
} }
}} style={{backgroundColor: '#31353A'}}>打开</Button> }} style={{ backgroundColor: '#31353A' }}>打开</Button>
</div> </div>
</div> </div>
</div> </div>
@ -541,7 +527,7 @@ const FileComponents = () => {
<Input <Input
disabled={true} disabled={true}
placeholder="请填入保存目录" placeholder="请填入保存目录"
style={{margin: '0 14px', flexGrow: 1}} style={{ margin: '0 14px', flexGrow: 1 }}
value={filePath} value={filePath}
onChange={async (e) => { onChange={async (e) => {
setting.shareFilesPath = e.target.value; setting.shareFilesPath = e.target.value;
@ -553,7 +539,7 @@ const FileComponents = () => {
window.electron.selectFilePath({ window.electron.selectFilePath({
key: 'shareFilesPath', key: 'shareFilesPath',
}) })
}} style={{backgroundColor: '#31353A', marginRight: '10px'}}>选择保存目录</Button> }} style={{ backgroundColor: '#31353A', marginRight: '10px' }}>选择保存目录</Button>
<Button type="primary" onClick={async () => { <Button type="primary" onClick={async () => {
try { try {
await fs.access(filePath, fs.constants.F_OK); await fs.access(filePath, fs.constants.F_OK);
@ -569,7 +555,7 @@ const FileComponents = () => {
message.error(error) message.error(error)
} }
} }
}} style={{backgroundColor: '#31353A'}}>打开</Button> }} style={{ backgroundColor: '#31353A' }}>打开</Button>
</div> </div>
<div> <div>
<Checkbox onChange={async (e) => { <Checkbox onChange={async (e) => {

69
src/utils/package/agora.ts
View File

@ -26,24 +26,69 @@ const agora = {
}); });
if (bool) { if (bool) {
const setting = JSON.parse(storage.getItem('setting') as string) const setting = JSON.parse(storage.getItem('setting') as string)
if (setting.videoDeviceId) { if (setting.videoDeviceId) agora.setVideoDeviceManager(setting.videoDeviceId) //指定摄像头头采集设备
agora.getVideoDeviceManager().then(async (res) => {
let item = res.list.find((item: any) => item.deviceId === setting.videoDeviceId);
if (item) {
agora.setVideoDeviceManager(setting.videoDeviceId) //通过设备 ID 指定视频采集设备。
} else {
agora.setVideoDeviceManager(rtcEngine.getVideoDeviceManager().getDevice())
}
})
} else {
agora.setVideoDeviceManager(rtcEngine.getVideoDeviceManager().getDevice())
}
if (setting.playBackDeviceId) agora.setPlaybackDevice(setting.playBackDeviceId) //指定播放设备 if (setting.playBackDeviceId) agora.setPlaybackDevice(setting.playBackDeviceId) //指定播放设备
if (setting.playBackVolume) agora.setPlaybackDeviceVolume(setting.playBackVolume) // 设置播放设备音量 if (setting.playBackVolume) agora.setPlaybackDeviceVolume(setting.playBackVolume) // 设置播放设备音量
if (setting.ecordingDeviceId) agora.setRecordingDevice(setting.ecordingDeviceId) // 设置音频采集设备 if (setting.ecordingDeviceId) agora.setRecordingDevice(setting.ecordingDeviceId) // 设置音频采集设备
if (setting.ecordingVolume) agora.setRecordingDeviceVolume(setting.ecordingVolume) // 设置音频设备音量 if (setting.ecordingVolume) agora.setRecordingDeviceVolume(setting.ecordingVolume) // 设置音频设备音量
} }
}, },
// 获取当前设备是否存在不存在就获取默认设备
setDeviceManager: async () => {
const setting = JSON.parse(storage.getItem('setting') as string)
// 摄像头
if (setting.videoDeviceId) {
agora.getVideoDeviceManager().then(async (res) => {
let item = res.list.find((item: any) => item.deviceId === setting.videoDeviceId);
if (item) {
agora.setVideoDeviceManager(setting.videoDeviceId)
} else {
agora.setVideoDeviceManager(rtcEngine.getVideoDeviceManager().getDevice())
setting.videoDeviceId = rtcEngine.getVideoDeviceManager().getDevice()
}
})
} else {
agora.setVideoDeviceManager(rtcEngine.getVideoDeviceManager().getDevice())
setting.videoDeviceId = rtcEngine.getVideoDeviceManager().getDevice()
}
// 播放设备
if (setting.playBackDeviceId) {
agora.getAudioMediaList().then(async (res) => {
let item = res.playBackList.find((item: any) => item.deviceId === setting.playBackDeviceId);
if (item) {
agora.setPlaybackDevice(setting.playBackDeviceId)
} else {
agora.setPlaybackDevice(res.playBackItem.deviceId)
setting.playBackDeviceId = res.playBackItem.deviceId
}
})
} else {
let deviceId = rtcEngine.getAudioDeviceManager().getPlaybackDefaultDevice().deviceId;
agora.setPlaybackDevice(deviceId)
setting.playBackDeviceId = deviceId
}
// 音频设备
if (setting.ecordingDeviceId) {
agora.getAudioMediaList().then(async (res) => {
let item = res.ecordingList.find((item: any) => item.deviceId === setting.ecordingDeviceId);
if (item) {
agora.setRecordingDevice(setting.ecordingDeviceId)
} else {
agora.setRecordingDevice(res.ecordingItem.deviceId)
setting.ecordingDeviceId = res.ecordingItem.deviceId
}
})
} else {
let deviceId = rtcEngine.getAudioDeviceManager().getRecordingDefaultDevice().deviceId;
agora.setRecordingDevice(deviceId)
setting.ecordingDeviceId = deviceId
}
setTimeout(() => {
storage.setItem('setting', JSON.stringify(setting))
}, 1000);
},
// 事件回调 // 事件回调
registerEventHandler: ({ onJoinChannelSuccess, onUserJoined, onUserOffline, onAudioVolumeIndication }: any) => { registerEventHandler: ({ onJoinChannelSuccess, onUserJoined, onUserOffline, onAudioVolumeIndication }: any) => {
rtcEngine.registerEventHandler({ rtcEngine.registerEventHandler({