This commit is contained in:
parent
c37edce16d
commit
e285e9f22c
|
|
@ -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, //是否下载钱询问每个文件保存的位置
|
||||||
}))
|
}))
|
||||||
}
|
}
|
||||||
}, [])
|
}, [])
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
|
||||||
|
|
@ -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()
|
||||||
},
|
},
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue