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

View File

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

View File

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

View File

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

View File

@ -26,24 +26,69 @@ const agora = {
});
if (bool) {
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) //通过设备 ID 指定视频采集设备。
} else {
agora.setVideoDeviceManager(rtcEngine.getVideoDeviceManager().getDevice())
}
})
} else {
agora.setVideoDeviceManager(rtcEngine.getVideoDeviceManager().getDevice())
}
if (setting.videoDeviceId) agora.setVideoDeviceManager(setting.videoDeviceId) //指定摄像头头采集设备
if (setting.playBackDeviceId) agora.setPlaybackDevice(setting.playBackDeviceId) //指定播放设备
if (setting.playBackVolume) agora.setPlaybackDeviceVolume(setting.playBackVolume) // 设置播放设备音量
if (setting.ecordingDeviceId) agora.setRecordingDevice(setting.ecordingDeviceId) // 设置音频采集设备
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) => {
rtcEngine.registerEventHandler({