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

优化

This commit is contained in:
yj 2024-08-08 09:29:25 +08:00
parent 459d5c1a49
commit 998f7f781a
3 changed files with 62 additions and 112 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

124
src/page/Meeting/index.tsx
View File

@ -74,11 +74,11 @@ const Meeting: React.FC = () => {
iconActive: ImageUrl.icon27Active,
active: false,
},
{
title: '设置向导',
icon: ImageUrl.icon28,
active: false,
},
// {
// title: '设置向导',
// icon: ImageUrl.icon28,
// active: false,
// },
{
title: '结束',
icon: ImageUrl.icon29,
@ -182,7 +182,6 @@ const Meeting: React.FC = () => {
uid: userInfo.uid,
token: state.token,
})
setCurrentVideoId(userInfo.uid)
storage.setItem('noViewChatList', 0)
window.addEventListener('customStorageChange', handleCustomStorageChange);
window.addEventListener('online', handleNetworkChange);
@ -304,6 +303,7 @@ const Meeting: React.FC = () => {
if (String(res.data).length === 9) {
// 共享屏幕
setCurrentLookUserStatus(2)
setCurrentVideoId('2')
setTimeout(() => {
agora.setupLocalVideo({
uid: Number(res.data),
@ -314,6 +314,7 @@ const Meeting: React.FC = () => {
}, 1000);
} else {
setCurrentLookUserStatus(1)
setCurrentVideoId('1')
// 摄像头
setTimeout(() => {
agora.setupLocalVideo({
@ -328,6 +329,7 @@ const Meeting: React.FC = () => {
if (String(res.data).length === 9) {
// 摄像头
setCurrentLookUserStatus(3)
setCurrentVideoId('3')
setTimeout(() => {
agora.setupRemoteVideoJoin({
uid: Number(res.data),
@ -338,6 +340,7 @@ const Meeting: React.FC = () => {
} else {
// 共享屏幕
setCurrentLookUserStatus(4)
setCurrentVideoId('4')
setTimeout(() => {
agora.setupRemoteVideoJoin({
uid: Number(res.data),
@ -425,22 +428,18 @@ const Meeting: React.FC = () => {
break;
case '录制':
const setting = await JSON.parse(storage.getItem('setting') as string)
if (currentVideoId === user.uid) {
message.error('请勿自己录制自己！')
} else {
try {
await fs.access(setting.recordingFilesPath, fs.constants.F_OK)
footerListTemplate[itemIndex][rowIndex].title = '录制中'
footerListTemplate[itemIndex][rowIndex].active = true
setFooterList(footerListTemplate)
agora.startRecording(Number(currentVideoId))
} catch (error: any) {
if (error.code === 'ENOENT') {
message.error('文件夹不存在！')
return
} else {
message.error(error)
}
try {
await fs.access(setting.recordingFilesPath, fs.constants.F_OK)
footerListTemplate[itemIndex][rowIndex].title = '录制中'
footerListTemplate[itemIndex][rowIndex].active = true
setFooterList(footerListTemplate)
// setting.recordingFilesPath
} catch (error: any) {
if (error.code === 'ENOENT') {
message.error('文件夹不存在！')
return
} else {
message.error(error)
}
}
break;
@ -448,7 +447,6 @@ const Meeting: React.FC = () => {
footerListTemplate[itemIndex][rowIndex].title = '录制'
footerListTemplate[itemIndex][rowIndex].active = false
setFooterList(footerListTemplate)
agora.stopRecording()
break;
case '共享文件':
sharedFilesModelRef.current.getData()
@ -639,8 +637,8 @@ const Meeting: React.FC = () => {
return ''
}
// 设置单个视频样式
const setMeetingContentSwiperCardClass = (uid: string, bool: boolean = false): string => {
if ((bool || currentVideoId === uid) && (meetingMode === 'StandardMode' || meetingMode === 'SpeakerMode')) {
const setMeetingContentSwiperCardClass = (uid: string): string => {
if ((currentVideoId === uid) && (meetingMode === 'StandardMode' || meetingMode === 'SpeakerMode')) {
switch (meetingMode) {
case 'StandardMode':
return styles.meetingContentSwiperCardStandardMode
@ -690,17 +688,13 @@ const Meeting: React.FC = () => {
<div className={styles.meetingContentBody}>
<div className={`${styles.meetingContentBodyLeft} drag`}>
<div className={getMeetingContentBodyLeftModeClass()} >
{/* ${setMeetingContentSwiperCardClass(item.uid)} */}
{allUserList.map((item: any, index: number) => {
return (
item.isRoom ?
<div
className={`${styles.meetingContentSwiperCard}`}
className={`${styles.meetingContentSwiperCard} ${setMeetingContentSwiperCardClass(item.uid)}`}
key={index}
onClick={() => {
if (footerList[1][3].active) {
return message.error('视频录制中请勿切换，或结束录制再切换！')
}
setCurrentVideoId(item.uid)
}}
>
@ -715,42 +709,46 @@ const Meeting: React.FC = () => {
)
}
)}
{currentLookUserStatus === 1 ? <div className={`${styles.meetingContentSwiperCard} ${setMeetingContentSwiperCardClass(currentLookUserAccount.uid, true)}`}>
<div className={`${styles.meetingContentSwiperCardVdeio}`} id='video-source-camera-primary'>
{<div className={styles.meetingContentSwiperCardVdeioLoading}>
<Avatar name={currentLookUserAccount.userName} />
</div>}
</div>
{meetingContentUser(currentLookUserAccount)}
{currentLookUserAccount.enableCamera ? null : meetingContentError(currentVideoId, currentLookUserAccount)}
</div> : null}
{currentLookUserStatus === 2 ? <div className={`${styles.meetingContentSwiperCard} ${setMeetingContentSwiperCardClass(currentLookUserAccount.uid, true)}`}>
<div className={`${styles.meetingContentSwiperCardVdeio}`} id='video-source-screen'>
<div className={styles.meetingContentSwiperCardVdeioLoading}>
<Avatar name={currentLookUserAccount.userName} />
{currentLookUserStatus === 1 ?
<div className={`${styles.meetingContentSwiperCard} ${setMeetingContentSwiperCardClass('1')}`} onClick={() => setCurrentVideoId('1')}>
<div className={`${styles.meetingContentSwiperCardVdeio}`} id='video-source-camera-primary'>
{<div className={styles.meetingContentSwiperCardVdeioLoading}>
<Avatar name={currentLookUserAccount.userName} />
</div>}
</div>
</div>
{meetingContentUser(currentLookUserAccount)}
{currentLookUserAccount.enableCamera ? null : meetingContentError(currentVideoId, currentLookUserAccount)}
</div> : null}
{currentLookUserStatus === 3 ? <div className={`${styles.meetingContentSwiperCard} ${setMeetingContentSwiperCardClass(currentLookUserAccount.uid, true)}`}>
<div className={`${styles.meetingContentSwiperCardVdeio}`} id='video-source-remote-camera'>
<div className={styles.meetingContentSwiperCardVdeioLoading}>
<Avatar name={currentLookUserAccount.userName} />
{meetingContentUser(currentLookUserAccount)}
{currentLookUserAccount.enableCamera ? null : meetingContentError(currentVideoId, currentLookUserAccount)}
</div> : null}
{currentLookUserStatus === 2 ?
<div className={`${styles.meetingContentSwiperCard} ${setMeetingContentSwiperCardClass('2')}`} onClick={() => setCurrentVideoId('2')}>
<div className={`${styles.meetingContentSwiperCardVdeio}`} id='video-source-screen'>
<div className={styles.meetingContentSwiperCardVdeioLoading}>
<Avatar name={currentLookUserAccount.userName} />
</div>
</div>
</div>
{meetingContentUser(currentLookUserAccount)}
{currentLookUserAccount.enableCamera ? null : meetingContentError(currentVideoId, currentLookUserAccount)}
</div> : null}
{currentLookUserStatus === 4 ? <div className={`${styles.meetingContentSwiperCard} ${setMeetingContentSwiperCardClass(currentLookUserAccount.uid, true)}`}>
<div className={`${styles.meetingContentSwiperCardVdeio}`} id='video-source-remote-screen'>
<div className={styles.meetingContentSwiperCardVdeioLoading}>
<Avatar name={currentLookUserAccount.userName} />
{meetingContentUser(currentLookUserAccount)}
{currentLookUserAccount.enableCamera ? null : meetingContentError(currentVideoId, currentLookUserAccount)}
</div> : null}
{currentLookUserStatus === 3 ?
<div className={`${styles.meetingContentSwiperCard} ${setMeetingContentSwiperCardClass('3')}`} onClick={() => setCurrentVideoId('3')}>
<div className={`${styles.meetingContentSwiperCardVdeio}`} id='video-source-remote-camera'>
<div className={styles.meetingContentSwiperCardVdeioLoading}>
<Avatar name={currentLookUserAccount.userName} />
</div>
</div>
</div>
{meetingContentUser(currentLookUserAccount)}
{currentLookUserAccount.enableCamera ? null : meetingContentError(currentVideoId, currentLookUserAccount)}
</div> : null}
{meetingContentUser(currentLookUserAccount)}
{currentLookUserAccount.enableCamera ? null : meetingContentError(currentVideoId, currentLookUserAccount)}
</div> : null}
{currentLookUserStatus === 4 ?
<div className={`${styles.meetingContentSwiperCard} ${setMeetingContentSwiperCardClass('4')}`} onClick={() => setCurrentVideoId('4')}>
<div className={`${styles.meetingContentSwiperCardVdeio}`} id='video-source-remote-screen'>
<div className={styles.meetingContentSwiperCardVdeioLoading}>
<Avatar name={currentLookUserAccount.userName} />
</div>
</div>
{meetingContentUser(currentLookUserAccount)}
{currentLookUserAccount.enableCamera ? null : meetingContentError(currentVideoId, currentLookUserAccount)}
</div> : null}
</div>
</div>
{

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

@ -1,4 +1,3 @@
import { message } from "antd";
import {
createAgoraRtcEngine,
ClientRoleType,
@ -6,9 +5,7 @@ import {
VideoViewSetupMode,
ScreenCaptureSourceType,
RenderModeType,
ChannelProfileType,
MediaRecorderContainerFormat,
MediaRecorderStreamType
ChannelProfileType
} from "agora-electron-sdk";
import { GetRoomRtcToken } from "@/api/Home/Index";
import { storage } from '@/utils';
@ -18,7 +15,6 @@ const option: any = {
channelId: '',
uid: ''
}
let iMediaRecorder: any = '';
let rtcEngine: any = '';
const agora = {
@ -228,46 +224,6 @@ const agora = {
}
await agora.joinChannelEx(user.screenShareId)
},
// 停止录制音视频
stopRecording: () => {
iMediaRecorder.stopRecording()
rtcEngine.destroyMediaRecorder(iMediaRecorder)
iMediaRecorder = ""
},
// 开始录制音视频
startRecording: (uid: number) => {
iMediaRecorder = rtcEngine.createMediaRecorder({
channelId: option.channelId,
uid,
})
iMediaRecorder.setMediaRecorderObserver({
// 录制状态发生改变回调。
onRecorderStateChanged: (_channelId: any, _uid: any, _state: any, reason: any) => {
switch (reason) {
case 1:
message.error('录制文件写入失败')
break;
case 2:
message.error('没有可录制的音视频流或者录制的音视频流中断超过 5 秒')
break;
case 3:
message.error('录制时长超出上限')
break;
}
},
// 录制信息更新回调。
onRecorderInfoUpdated: (_channelId: any, _uid: any, info: any) => {
message.success(`文件已保存至${info.fileName}`)
},
})
const setting = JSON.parse(storage.getItem('setting') as string)
iMediaRecorder.startRecording({
storagePath: `${setting.recordingFilesPath}${+new Date()}.mp4`, //录音文件在本地保存的绝对路径，需精确到文件名及格式
containerFormat: MediaRecorderContainerFormat.FormatMp4, //录制文件的格式
streamType: MediaRecorderStreamType.StreamTypeBoth, //录制内容
maxDurationMs: 7200000, //maxDurationMs
})
},
// 获取系统中所有的视频设备列表。
getVideoDeviceManager: async (): Promise<any> => {
return {

4
vite.config.ts
View File

@ -57,8 +57,6 @@ export default defineConfig({
createAgoraRtcEngine,
ChannelProfileType,
ClientRoleType,
MediaRecorderContainerFormat,
MediaRecorderStreamType,
RenderModeType,
ScreenCaptureSourceType,
VideoSourceType,
@ -68,8 +66,6 @@ export default defineConfig({
createAgoraRtcEngine,
ChannelProfileType,
ClientRoleType,
MediaRecorderContainerFormat,
MediaRecorderStreamType,
RenderModeType,
ScreenCaptureSourceType,
VideoSourceType,