This commit is contained in:
yj 2024-07-26 15:57:06 +08:00
parent c37edce16d
commit e285e9f22c
4 changed files with 116 additions and 43 deletions

View File

@ -130,10 +130,10 @@ const App: React.FC = () => {
playBackDeviceId: "", //输出设备id playBackDeviceId: "", //输出设备id
ecordingVolume: '', //输入音量 ecordingVolume: '', //输入音量
playBackVolume: '', //输出音量 playBackVolume: '', //输出音量
autoEcordingVolume: false, //是否自动调整麦克风音量 autoEcordingVolume: true, //是否自动调整麦克风音量
recordingFilesPath: '', //本地录制保存路径 recordingFilesPath: '', //本地录制保存路径
shareFilesPath: '', //共享文件保存路径 shareFilesPath: '', //共享文件保存路径
isShareSavePath: false, //是否下载钱询问每个文件保存的位置 isShareSavePath: true, //是否下载钱询问每个文件保存的位置
})) }))
} }
}, []) }, [])

View File

@ -5,6 +5,7 @@ import { useState, useImperativeHandle, forwardRef, useEffect } from "react";
import agora from '@/utils/package/agora' import agora from '@/utils/package/agora'
import { CloseOutlined, LoadingOutlined } from '@ant-design/icons'; import { CloseOutlined, LoadingOutlined } from '@ant-design/icons';
import { storage } from '@/utils'; import { storage } from '@/utils';
const os = require('os')
let userInfo = JSON.parse(storage.getItem('user') as string) let userInfo = JSON.parse(storage.getItem('user') as string)
const StupWizard = forwardRef((props: any, ref: any) => { const StupWizard = forwardRef((props: any, ref: any) => {
useImperativeHandle(ref, () => ({ useImperativeHandle(ref, () => ({
@ -178,10 +179,11 @@ const AudioComponents = () => {
ecordingList: [], ecordingList: [],
playBackItem: null, playBackItem: null,
ecordingItem: null, ecordingItem: null,
playBackVolume: 127, playBackVolume: 0,
playBackActive: false, playBackActive: false,
ecordingActive: false, ecordingActive: false,
ecordingVolume: 0, ecordingVolume: 0,
autoEcordingVolume: true,
}); });
useEffect(() => { useEffect(() => {
getAudioMediaList() getAudioMediaList()
@ -194,8 +196,28 @@ const AudioComponents = () => {
} }
}) })
}, []); }, []);
const getAudioMediaList = (): void => { const getAudioMediaList = async (): Promise<void> => {
const { playBackList, ecordingList, playBackItem, ecordingItem, ecordingVolume } = agora.getAudioMediaList(); const { playBackList, ecordingList, playBackItem, ecordingItem, ecordingVolume } = await agora.getAudioMediaList();
const setting = await JSON.parse(storage.getItem('setting') as string)
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) {
setting.ecordingVolume = ecordingVolume;
}
if (!setting.playBackVolume) {
setting.playBackVolume = 127;
}
storage.setItem('setting', JSON.stringify(setting))
setAudioDeviceManager({ setAudioDeviceManager({
...audioDeviceManager, ...audioDeviceManager,
playBackList: playBackList.map((row: any) => { playBackList: playBackList.map((row: any) => {
@ -210,9 +232,11 @@ const AudioComponents = () => {
label: row.deviceName label: row.deviceName
} }
}), }),
playBackItem: playBackItem.deviceId ? playBackItem.deviceId : null, playBackItem: setting.playBackDeviceId ? setting.playBackDeviceId : playBackItem.deviceId || null,
ecordingItem: ecordingItem.deviceId ? ecordingItem.deviceId : null, ecordingItem: setting.ecordingDeviceId ? setting.ecordingDeviceId : ecordingItem.deviceId || null,
ecordingVolume, ecordingVolume: setting.ecordingVolume,
playBackVolume: setting.playBackVolume,
autoEcordingVolume: setting.autoEcordingVolume
}) })
} }
return ( return (
@ -226,7 +250,10 @@ const AudioComponents = () => {
<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={(e) => { value={audioDeviceManager.ecordingItem} onChange={async (e) => {
const setting = await JSON.parse(storage.getItem('setting') as string)
setting.ecordingDeviceId = e;
storage.setItem('setting', JSON.stringify(setting))
setAudioDeviceManager({ setAudioDeviceManager({
...audioDeviceManager, ...audioDeviceManager,
ecordingItem: e ecordingItem: e
@ -261,8 +288,11 @@ const AudioComponents = () => {
</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} onChange={(e) => { <Slider value={audioDeviceManager.ecordingVolume} style={{ flexGrow: 1 }} max={255} onChange={async (e) => {
agora.setRecordingDeviceVolume(e) const setting = await JSON.parse(storage.getItem('setting') as string)
setting.ecordingVolume = e;
storage.setItem('setting', JSON.stringify(setting))
await agora.setRecordingDeviceVolume(e)
setAudioDeviceManager({ setAudioDeviceManager({
...audioDeviceManager, ...audioDeviceManager,
ecordingVolume: e, ecordingVolume: e,
@ -270,9 +300,15 @@ const AudioComponents = () => {
}} disabled={!audioDeviceManager.ecordingItem} /> }} disabled={!audioDeviceManager.ecordingItem} />
</div> </div>
<div> <div>
<Checkbox onChange={() => { <Checkbox onChange={async (e) => {
const setting = await JSON.parse(storage.getItem('setting') as string)
}}></Checkbox> setting.autoEcordingVolume = e.target.checked;
storage.setItem('setting', JSON.stringify(setting))
setAudioDeviceManager({
...audioDeviceManager,
autoEcordingVolume: e.target.checked
})
}} checked={audioDeviceManager.autoEcordingVolume}></Checkbox>
</div> </div>
</div> </div>
<div> <div>
@ -281,7 +317,10 @@ const AudioComponents = () => {
<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={(e) => { value={audioDeviceManager.playBackItem} onChange={async (e) => {
const setting = await JSON.parse(storage.getItem('setting') as string)
setting.playBackDeviceId = e;
storage.setItem('setting', JSON.stringify(setting))
setAudioDeviceManager({ setAudioDeviceManager({
...audioDeviceManager, ...audioDeviceManager,
playBackItem: e playBackItem: e
@ -316,7 +355,10 @@ const AudioComponents = () => {
</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} onChange={(e) => { <Slider value={audioDeviceManager.playBackVolume} style={{ flexGrow: 1 }} max={255} onChange={async (e) => {
const setting = await JSON.parse(storage.getItem('setting') as string)
setting.playBackVolume = e;
storage.setItem('setting', JSON.stringify(setting))
agora.setPlaybackDeviceVolume(e) agora.setPlaybackDeviceVolume(e)
setAudioDeviceManager({ setAudioDeviceManager({
...audioDeviceManager, ...audioDeviceManager,
@ -332,6 +374,16 @@ const AudioComponents = () => {
} }
const RecordingComponents = () => { const RecordingComponents = () => {
const [filePath, setFilePath] = useState('') const [filePath, setFilePath] = useState('')
useEffect(() => {
const setting = JSON.parse(storage.getItem('setting') as string)
if (!setting.recordingFilesPath) {
setting.recordingFilesPath = `${os.homedir()}\\Desktop\\`
setFilePath(setting.recordingFilesPath)
storage.setItem('setting', JSON.stringify(setting))
} else {
setFilePath(setting.recordingFilesPath);
}
}, [])
return ( return (
<> <>
<div> <div>
@ -344,7 +396,10 @@ const RecordingComponents = () => {
placeholder="请填入文件路径" placeholder="请填入文件路径"
style={{ margin: '0 14px', flexGrow: 1 }} style={{ margin: '0 14px', flexGrow: 1 }}
value={filePath} value={filePath}
onChange={(e) => { onChange={async (e) => {
const setting = await JSON.parse(storage.getItem('setting') as string)
setting.recordingFilesPath = e.target.value;
storage.setItem('setting', JSON.stringify(setting))
setFilePath(e.target.value) setFilePath(e.target.value)
}} }}
/> />
@ -357,6 +412,18 @@ const RecordingComponents = () => {
} }
const FileComponents = () => { const FileComponents = () => {
const [filePath, setFilePath] = useState('') const [filePath, setFilePath] = useState('')
const [isShareSavePath, setIsShareSavePath] = useState(true)
useEffect(() => {
const setting = JSON.parse(storage.getItem('setting') as string)
if (!setting.shareFilesPath) {
setting.shareFilesPath = `${os.homedir()}\\Desktop\\`
setFilePath(setting.shareFilesPath)
storage.setItem('setting', JSON.stringify(setting))
} else {
setFilePath(setting.shareFilesPath);
}
setIsShareSavePath(setting.isShareSavePath)
}, [])
return ( return (
<> <>
<div> <div>
@ -369,16 +436,22 @@ const FileComponents = () => {
placeholder="请填入保存目录" placeholder="请填入保存目录"
style={{ margin: '0 14px', flexGrow: 1 }} style={{ margin: '0 14px', flexGrow: 1 }}
value={filePath} value={filePath}
onChange={(e) => { onChange={async (e) => {
const setting = await JSON.parse(storage.getItem('setting') as string)
setting.shareFilesPath = e.target.value;
storage.setItem('setting', JSON.stringify(setting))
setFilePath(e.target.value) setFilePath(e.target.value)
}} }}
/> />
<Button type="primary" onClick={() => { }} style={{ backgroundColor: '#31353A' }}></Button> <Button type="primary" onClick={() => { }} style={{ backgroundColor: '#31353A' }}></Button>
</div> </div>
<div> <div>
<Checkbox onChange={() => { <Checkbox onChange={async (e) => {
const setting = await JSON.parse(storage.getItem('setting') as string)
}}></Checkbox> setting.isShareSavePath = e.target.checked;
storage.setItem('setting', JSON.stringify(setting))
setIsShareSavePath(e.target.checked)
}} checked={isShareSavePath}></Checkbox>
</div> </div>
</div> </div>
</div> </div>

View File

@ -800,10 +800,9 @@ const Meeting: React.FC = () => {
})} })}
</div> </div>
<div> <div>
<div></div> <Checkbox onChange={() => {
{/* <Checkbox onChange={() => {
}}></Checkbox> */} }}></Checkbox>
<div> <div>
<Button type="primary" onClick={() => { setIsSharedScreenModal(false) }} style={{ backgroundColor: '#31353A', marginRight: '14px' }}></Button> <Button type="primary" onClick={() => { setIsSharedScreenModal(false) }} style={{ backgroundColor: '#31353A', marginRight: '14px' }}></Button>
<Button type="primary" className='m-ant-btn' onClick={() => clickSharedScreen()}></Button> <Button type="primary" className='m-ant-btn' onClick={() => clickSharedScreen()}></Button>

View File

@ -1,5 +1,4 @@
import { message } from "antd"; import { message } from "antd";
const os = require('os');
import { import {
createAgoraRtcEngine, createAgoraRtcEngine,
ClientRoleType, ClientRoleType,
@ -12,6 +11,7 @@ import {
MediaRecorderStreamType MediaRecorderStreamType
} from "agora-electron-sdk"; } from "agora-electron-sdk";
import { GetRoomRtcToken } from "@/api/Home/Index"; import { GetRoomRtcToken } from "@/api/Home/Index";
import { storage } from '@/utils';
const option: any = { const option: any = {
appId: 'dcfc466a6ecb4a1f972630065dfb1e75', appId: 'dcfc466a6ecb4a1f972630065dfb1e75',
token: '', token: '',
@ -259,8 +259,9 @@ const agora = {
message.success(`文件已保存至${info.fileName}`) message.success(`文件已保存至${info.fileName}`)
}, },
}) })
const setting = JSON.parse(storage.getItem('setting') as string)
iMediaRecorder.startRecording({ iMediaRecorder.startRecording({
storagePath: `${os.homedir()}/Desktop/${+new Date()}.mp4`, //录音文件在本地保存的绝对路径,需精确到文件名及格式 storagePath: `${setting.recordingFilesPath}${+new Date()}.mp4`, //录音文件在本地保存的绝对路径,需精确到文件名及格式
containerFormat: MediaRecorderContainerFormat.FormatMp4, //录制文件的格式 containerFormat: MediaRecorderContainerFormat.FormatMp4, //录制文件的格式
streamType: MediaRecorderStreamType.StreamTypeBoth, //录制内容 streamType: MediaRecorderStreamType.StreamTypeBoth, //录制内容
maxDurationMs: 7200000, //maxDurationMs maxDurationMs: 7200000, //maxDurationMs
@ -299,7 +300,7 @@ const agora = {
}) })
}, },
// 获取输入输出设备列表 // 获取输入输出设备列表
getAudioMediaList: () => { getAudioMediaList: async () => {
return { return {
playBackList: rtcEngine.getAudioDeviceManager().enumeratePlaybackDevices(), playBackList: rtcEngine.getAudioDeviceManager().enumeratePlaybackDevices(),
ecordingList: rtcEngine.getAudioDeviceManager().enumerateRecordingDevices(), ecordingList: rtcEngine.getAudioDeviceManager().enumerateRecordingDevices(),
@ -309,36 +310,36 @@ const agora = {
} }
}, },
// 启动音频播放设备测试。 // 启动音频播放设备测试。
startPlaybackDeviceTest: () => { startPlaybackDeviceTest: async () => {
rtcEngine.getAudioDeviceManager().startPlaybackDeviceTest('https://wgshare.oss-cn-chengdu.aliyuncs.com/TestAudio.mp3') await rtcEngine.getAudioDeviceManager().startPlaybackDeviceTest('https://wgshare.oss-cn-chengdu.aliyuncs.com/TestAudio.mp3')
}, },
// 停止音频播放设备测试。 // 停止音频播放设备测试。
stopPlaybackDeviceTest: () => { stopPlaybackDeviceTest: async () => {
rtcEngine.getAudioDeviceManager().stopPlaybackDeviceTest() await rtcEngine.getAudioDeviceManager().stopPlaybackDeviceTest()
}, },
// 设置播放设备音量 // 设置播放设备音量
setPlaybackDeviceVolume: (volume: number) => { setPlaybackDeviceVolume: async (volume: number) => {
rtcEngine.getAudioDeviceManager().setPlaybackDeviceVolume(volume) await rtcEngine.getAudioDeviceManager().setPlaybackDeviceVolume(volume)
}, },
// 指定播放设备 // 指定播放设备
setPlaybackDevice: (deviceId: string) => { setPlaybackDevice: async (deviceId: string) => {
rtcEngine.getAudioDeviceManager().setPlaybackDevice(deviceId) await rtcEngine.getAudioDeviceManager().setPlaybackDevice(deviceId)
}, },
// 启动音频采集设备测试 // 启动音频采集设备测试
startRecordingDeviceTest: (indicationInterval: number) => { startRecordingDeviceTest: async (indicationInterval: number) => {
rtcEngine.getAudioDeviceManager().startRecordingDeviceTest(indicationInterval) await rtcEngine.getAudioDeviceManager().startRecordingDeviceTest(indicationInterval)
}, },
// 设置音频设备音量 // 设置音频设备音量
setRecordingDeviceVolume: (volume: number) => { setRecordingDeviceVolume: async (volume: number) => {
rtcEngine.getAudioDeviceManager().setRecordingDeviceVolume(volume) await rtcEngine.getAudioDeviceManager().setRecordingDeviceVolume(volume)
}, },
// 设置音频采集设备 // 设置音频采集设备
setRecordingDevice: (deviceId: string) => { setRecordingDevice: async (deviceId: string) => {
rtcEngine.getAudioDeviceManager().setRecordingDevice(deviceId) await rtcEngine.getAudioDeviceManager().setRecordingDevice(deviceId)
}, },
// 停止音频采集设备测试 // 停止音频采集设备测试
stopRecordingDeviceTest: () => { stopRecordingDeviceTest: async () => {
rtcEngine.getAudioDeviceManager().stopRecordingDeviceTest() await rtcEngine.getAudioDeviceManager().stopRecordingDeviceTest()
}, },
} }