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

优化

This commit is contained in:
yj 2025-01-23 11:14:18 +08:00
parent 2164fcfde4
commit a4ae5577d4
3 changed files with 68 additions and 91 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -13,7 +13,7 @@ import ImageUrl from '@/utils/package/imageUrl'
import { agora } from '@/utils/package/agora'
import dayjs from 'dayjs';
import durationPlugin from 'dayjs/plugin/duration';
import { AudioVolumeInfo, ConnectionChangedReasonType, ConnectionStateType, LocalVideoStreamReason, LocalVideoStreamState, QualityType, RenderModeType, RtcConnection, RtcStats, UserOfflineReasonType, VideoSourceType, VideoStreamType } from 'agora-electron-sdk';
import { AudioVolumeInfo, ConnectionChangedReasonType, ConnectionStateType, LocalVideoStreamReason, LocalVideoStreamState, RenderModeType, RtcConnection, RtcStats, UserOfflineReasonType, VideoSourceType, VideoStreamType } from 'agora-electron-sdk';
import Avatar from '@/components/Avatar';
import SharedFilesModel from '@/components/SharedFilesModel';
import StupWizard from '@/components/StupWizard';
@ -166,7 +166,7 @@ const Meeting: React.FC = () => {
const [currentVideoId, setCurrentVideoId] = useState('')
const [currentVideoUid, setCurrentVideoUid] = useState('')
let [currentSeconds, setCurrentSeconds] = useState(0)
const [currentEffective, setCurrentEffective] = useState(4)
const [currentEffective, setCurrentEffective] = useState(3)
const [networkQuality, setNetworkQuality] = useState({
level: '佳',
text: '网络质量极好。'
@ -520,39 +520,37 @@ const Meeting: React.FC = () => {
}, []);
useEffect(() => {
switch (currentEffective) {
case 0:
if (networkOther) {
let data = networkOther as any;
if (storage.getItem('reconnect') === 'true') {
if (data.lastmileDelay < 100) {
setNetworkQuality({
level: '佳',
text: '网络质量极好'
})
setCurrentEffective(3)
} else if (data.lastmileDelay > 500) {
setNetworkQuality({
level: '非常差',
text: '完全无法沟通'
})
setCurrentEffective(2)
} else if (data.lastmileDelay < 500 && data.lastmileDelay > 100) {
setNetworkQuality({
level: '差',
text: '勉强能沟通但不顺畅'
})
setCurrentEffective(1)
}
} else {
setNetworkQuality({
level: '断开连接',
text: '网络连接断开'
})
break;
case 1:
setNetworkQuality({
level: '非常差',
text: '完全无法沟通'
})
break;
case 2:
setNetworkQuality({
level: '差',
text: '勉强能沟通但不顺畅'
})
break;
case 3:
setNetworkQuality({
level: '良好',
text: ' 有瑕疵但不影响沟通'
})
break;
case 4:
setNetworkQuality({
level: '佳',
text: '网络质量极好'
})
break;
setCurrentEffective(0)
}
}
}, [currentEffective]);
}, [networkOther]);
useEffect(() => {
if (chatList.length) {
@ -1253,31 +1251,6 @@ const Meeting: React.FC = () => {
});
}
},
onNetworkQuality: async (_connection: RtcConnection, remoteUid: number, _txQuality: QualityType, rxQuality: QualityType) => {
if (remoteUid === 0) {
switch (rxQuality) {
case 1:
setCurrentEffective(4)
break;
case 2:
case 3:
setCurrentEffective(3)
break;
case 4:
setCurrentEffective(2)
break;
case 5:
setCurrentEffective(1)
break;
case 6:
setCurrentEffective(0)
break;
default:
setCurrentEffective(storage.getItem('reconnect') === 'true' ? 4 : 0)
break;
}
}
},
onRtcStats: async (stats: RtcStats) => {
setNetworkOther(stats)
},
@ -3426,44 +3399,55 @@ const meetingContentError = (item: any) => {
const networkIcon = (network: number) => {
switch (network) {
case 0:
return <svg width="16" height="16" viewBox="0 0 33 33" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clipPath="url(#clip0_5499_5160)">
<path d="M2.01914 32.4824C0.969141 32.4824 0.119141 31.6324 0.119141 30.5824V22.9824C0.119141 21.9324 0.969141 21.0824 2.01914 21.0824C3.06914 21.0824 3.91914 21.9324 3.91914 22.9824V30.5824C3.91914 31.6324 3.06914 32.4824 2.01914 32.4824ZM11.4191 32.4824C10.3691 32.4824 9.51914 31.6324 9.51914 30.5824V15.7824C9.51914 14.7324 10.3691 13.8824 11.4191 13.8824C12.4691 13.8824 13.3191 14.7324 13.3191 15.7824V30.5824C13.3191 31.6324 12.4691 32.4824 11.4191 32.4824ZM20.8191 32.4824C19.7691 32.4824 18.9191 31.6324 18.9191 30.5824V9.38242C18.9191 8.33242 19.7691 7.48242 20.8191 7.48242C21.8691 7.48242 22.7191 8.33242 22.7191 9.38242V30.5824C22.7191 31.6324 21.8691 32.4824 20.8191 32.4824ZM30.2191 32.4824C29.1691 32.4824 28.3191 31.6324 28.3191 30.5824V2.38242C28.3191 1.33242 29.1691 0.482422 30.2191 0.482422C31.2691 0.482422 32.1191 1.33242 32.1191 2.38242V30.5824C32.1191 31.6324 31.2691 32.4824 30.2191 32.4824Z" fill="#7C8280" />
<path d="M8.98179 2.67253L6.22791 5.42641L3.47403 2.67253C3.11639 2.31489 2.52627 2.31489 2.16863 2.67253C1.81098 3.03018 1.81098 3.62029 2.16863 3.97794L4.9225 6.73182L2.16863 9.48569C1.81098 9.84334 1.81098 10.4335 2.16863 10.7911C2.52627 11.1488 3.11639 11.1488 3.47403 10.7911L6.22791 8.03723L8.98179 10.7911C9.33943 11.1488 9.92955 11.1488 10.2872 10.7911C10.6448 10.4335 10.6448 9.84334 10.2872 9.48569L7.53332 6.73182L10.2872 3.97794C10.6448 3.62029 10.6448 3.03018 10.2872 2.67253C9.92955 2.31489 9.33943 2.31489 8.98179 2.67253Z" fill="#F90000" />
return <svg width="33" height="32" viewBox="0 0 33 32" fill="none" xmlns="http://www.w3.org/2000/svg" style={{ transform: 'scale(0.7)' }}>
<g clip-path="url(#clip0_21262_3609)">
<path d="M4.44094 32C3.03695 32 1.90039 31.15 1.90039 30.1V15.3C1.90039 14.25 3.03695 13.4 4.44094 13.4C5.84492 13.4 6.98149 14.25 6.98149 15.3V30.1C6.98149 31.15 5.84492 32 4.44094 32ZM17.01 32C15.606 32 14.4694 31.15 14.4694 30.1V8.9C14.4694 7.85 15.606 7 17.01 7C18.4139 7 19.5505 7.85 19.5505 8.9V30.1C19.5505 31.15 18.4139 32 17.01 32ZM29.579 32C28.175 32 27.0384 31.15 27.0384 30.1V1.9C27.0384 0.85 28.175 0 29.579 0C30.983 0 32.1195 0.85 32.1195 1.9V30.1C32.1195 31.15 30.983 32 29.579 32Z" fill="#7C8280" />
<path d="M7.00124 2.11509L5.01758 4.09875L3.03391 2.11509C2.77629 1.85747 2.35122 1.85747 2.0936 2.11509C1.83599 2.37271 1.83599 2.79778 2.0936 3.0554L4.07727 5.03906L2.0936 7.02273C1.83599 7.28035 1.83599 7.70542 2.0936 7.96304C2.35122 8.22065 2.77629 8.22065 3.03391 7.96304L5.01758 5.97937L7.00124 7.96304C7.25886 8.22065 7.68393 8.22065 7.94155 7.96304C8.19917 7.70542 8.19917 7.28035 7.94155 7.02273L5.95789 5.03906L7.94155 3.0554C8.19917 2.79778 8.19917 2.37271 7.94155 2.11509C7.68393 1.85747 7.25886 1.85747 7.00124 2.11509Z" fill="#F90000" />
</g>
<defs>
<clipPath id="clip0_5499_5160">
<rect width="32" height="32" fill="white" transform="translate(0.119141 0.482422)" />
<clipPath id="clip0_21262_3609">
<rect width="32" height="32" fill="white" transform="translate(0.119141)" />
</clipPath>
</defs>
</svg>
case 1:
return <svg width="16" height="16" viewBox="0 0 33 33" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2.01914 32.482C0.969141 32.482 0.119141 31.632 0.119141 30.582V22.982C0.119141 21.932 0.969141 21.082 2.01914 21.082C3.06914 21.082 3.91914 21.932 3.91914 22.982V30.582C3.91914 31.632 3.06914 32.482 2.01914 32.482Z" fill="#FF800B" />
<path d="M28.3184 30.5824C28.3184 31.6324 29.1684 32.4824 30.2184 32.4824C31.2684 32.4824 32.1184 31.6324 32.1184 30.5824V2.38242C32.1184 1.33242 31.2684 0.482422 30.2184 0.482422C29.1684 0.482422 28.3184 1.33242 28.3184 2.38242V30.5824Z" fill="#7C8280" />
<path d="M18.9199 30.5824C18.9199 31.6324 19.7699 32.4824 20.8199 32.4824C21.8699 32.4824 22.7199 31.6324 22.7199 30.5824V9.38242C22.7199 8.33242 21.8699 7.48242 20.8199 7.48242C19.7699 7.48242 18.9199 8.33242 18.9199 9.38242V30.5824Z" fill="#7C8280" />
<path d="M9.51953 30.5828C9.51953 31.6328 10.3695 32.4828 11.4195 32.4828C12.4695 32.4828 13.3195 31.6328 13.3195 30.5828V15.7828C13.3195 14.7328 12.4695 13.8828 11.4195 13.8828C10.3695 13.8828 9.51953 14.7328 9.51953 15.7828V30.5828Z" fill="#7C8280" />
return <svg width="33" height="32" viewBox="0 0 33 32" fill="none" xmlns="http://www.w3.org/2000/svg" style={{ transform: 'scale(0.7)' }}>
<g clip-path="url(#clip0_21262_3615)">
<path d="M26.9316 30.1C26.9316 31.15 28.0918 32 29.5249 32C30.9581 32 32.1182 31.15 32.1182 30.1V1.9C32.1182 0.85 30.9581 0 29.5249 0C28.0918 0 26.9316 0.85 26.9316 1.9V30.1Z" fill="#7C8280" />
<path d="M14.1035 30.1C14.1035 31.15 15.2637 32 16.6968 32C18.1299 32 19.2901 31.15 19.2901 30.1V8.9C19.2901 7.85 18.1299 7 16.6968 7C15.2637 7 14.1035 7.85 14.1035 8.9V30.1Z" fill="#7C8280" />
<path d="M1.27344 30.1004C1.27344 31.1504 2.4336 32.0004 3.86673 32.0004C5.29986 32.0004 6.46002 31.1504 6.46002 30.1004V15.3004C6.46002 14.2504 5.29986 13.4004 3.86673 13.4004C2.4336 13.4004 1.27344 14.2504 1.27344 15.3004V30.1004Z" fill="#FF800B" />
</g>
<defs>
<clipPath id="clip0_21262_3615">
<rect width="32" height="32" fill="white" transform="translate(0.119141)" />
</clipPath>
</defs>
</svg>
case 2:
return <svg width="16" height="16" viewBox="0 0 33 33" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2.01914 32.482C0.969141 32.482 0.119141 31.632 0.119141 30.582V22.982C0.119141 21.932 0.969141 21.082 2.01914 21.082C3.06914 21.082 3.91914 21.932 3.91914 22.982V30.582C3.91914 31.632 3.06914 32.482 2.01914 32.482Z" fill="#FF800B" />
<path d="M28.3184 30.5824C28.3184 31.6324 29.1684 32.4824 30.2184 32.4824C31.2684 32.4824 32.1184 31.6324 32.1184 30.5824V2.38242C32.1184 1.33242 31.2684 0.482422 30.2184 0.482422C29.1684 0.482422 28.3184 1.33242 28.3184 2.38242V30.5824Z" fill="#7C8280" />
<path d="M18.9199 30.5824C18.9199 31.6324 19.7699 32.4824 20.8199 32.4824C21.8699 32.4824 22.7199 31.6324 22.7199 30.5824V9.38242C22.7199 8.33242 21.8699 7.48242 20.8199 7.48242C19.7699 7.48242 18.9199 8.33242 18.9199 9.38242V30.5824Z" fill="#7C8280" />
<path d="M9.51953 30.5828C9.51953 31.6328 10.3695 32.4828 11.4195 32.4828C12.4695 32.4828 13.3195 31.6328 13.3195 30.5828V15.7828C13.3195 14.7328 12.4695 13.8828 11.4195 13.8828C10.3695 13.8828 9.51953 14.7328 9.51953 15.7828V30.5828Z" fill="#FF800B" />
return <svg width="33" height="32" viewBox="0 0 33 32" fill="none" xmlns="http://www.w3.org/2000/svg" style={{ transform: 'scale(0.7)' }}>
<g clip-path="url(#clip0_21262_3621)">
<path d="M26.9316 30.1C26.9316 31.15 28.0918 32 29.5249 32C30.9581 32 32.1182 31.15 32.1182 30.1V1.9C32.1182 0.85 30.9581 0 29.5249 0C28.0918 0 26.9316 0.85 26.9316 1.9V30.1Z" fill="#7C8280" />
<path d="M14.1035 30.1C14.1035 31.15 15.2637 32 16.6968 32C18.1299 32 19.2901 31.15 19.2901 30.1V8.9C19.2901 7.85 18.1299 7 16.6968 7C15.2637 7 14.1035 7.85 14.1035 8.9V30.1Z" fill="#FF800B" />
<path d="M1.27344 30.1004C1.27344 31.1504 2.4336 32.0004 3.86673 32.0004C5.29986 32.0004 6.46002 31.1504 6.46002 30.1004V15.3004C6.46002 14.2504 5.29986 13.4004 3.86673 13.4004C2.4336 13.4004 1.27344 14.2504 1.27344 15.3004V30.1004Z" fill="#FF800B" />
</g>
<defs>
<clipPath id="clip0_21262_3621">
<rect width="32" height="32" fill="white" transform="translate(0.119141)" />
</clipPath>
</defs>
</svg>
case 3:
return <svg width="16" height="16" viewBox="0 0 32 33" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1.9 32.8385C0.85 32.8385 0 31.9885 0 30.9385V23.3385C0 22.2885 0.85 21.4385 1.9 21.4385C2.95 21.4385 3.8 22.2885 3.8 23.3385V30.9385C3.8 31.9885 2.95 32.8385 1.9 32.8385Z" fill="#02B188" />
<path d="M28.1992 30.9389C28.1992 31.9889 29.0492 32.8389 30.0992 32.8389C31.1492 32.8389 31.9992 31.9889 31.9992 30.9389V2.73887C31.9992 1.68887 31.1492 0.838867 30.0992 0.838867C29.0492 0.838867 28.1992 1.68887 28.1992 2.73887V30.9389Z" fill="#7C8280" />
<path d="M18.8008 30.9389C18.8008 31.9889 19.6508 32.8389 20.7008 32.8389C21.7508 32.8389 22.6008 31.9889 22.6008 30.9389V9.73887C22.6008 8.68887 21.7508 7.83887 20.7008 7.83887C19.6508 7.83887 18.8008 8.68887 18.8008 9.73887V30.9389Z" fill="#02B188" />
<path d="M9.40039 30.9393C9.40039 31.9893 10.2504 32.8393 11.3004 32.8393C12.3504 32.8393 13.2004 31.9893 13.2004 30.9393V16.1393C13.2004 15.0893 12.3504 14.2393 11.3004 14.2393C10.2504 14.2393 9.40039 15.0893 9.40039 16.1393V30.9393Z" fill="#02B188" />
</svg>
case 4:
return <svg width="16" height="16" viewBox="0 0 32 33" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1.9 32.8385C0.85 32.8385 0 31.9885 0 30.9385V23.3385C0 22.2885 0.85 21.4385 1.9 21.4385C2.95 21.4385 3.8 22.2885 3.8 23.3385V30.9385C3.8 31.9885 2.95 32.8385 1.9 32.8385Z" fill="#02B188" />
<path d="M28.1992 30.9389C28.1992 31.9889 29.0492 32.8389 30.0992 32.8389C31.1492 32.8389 31.9992 31.9889 31.9992 30.9389V2.73887C31.9992 1.68887 31.1492 0.838867 30.0992 0.838867C29.0492 0.838867 28.1992 1.68887 28.1992 2.73887V30.9389Z" fill="#02B188" />
<path d="M18.8008 30.9389C18.8008 31.9889 19.6508 32.8389 20.7008 32.8389C21.7508 32.8389 22.6008 31.9889 22.6008 30.9389V9.73887C22.6008 8.68887 21.7508 7.83887 20.7008 7.83887C19.6508 7.83887 18.8008 8.68887 18.8008 9.73887V30.9389Z" fill="#02B188" />
<path d="M9.40039 30.9393C9.40039 31.9893 10.2504 32.8393 11.3004 32.8393C12.3504 32.8393 13.2004 31.9893 13.2004 30.9393V16.1393C13.2004 15.0893 12.3504 14.2393 11.3004 14.2393C10.2504 14.2393 9.40039 15.0893 9.40039 16.1393V30.9393Z" fill="#02B188" />
return <svg width="33" height="32" viewBox="0 0 33 32" fill="none" xmlns="http://www.w3.org/2000/svg" style={{ transform: 'scale(0.7)' }}>
<g clip-path="url(#clip0_21262_3625)">
<path d="M26.9316 30.1C26.9316 31.15 28.0918 32 29.5249 32C30.9581 32 32.1182 31.15 32.1182 30.1V1.9C32.1182 0.85 30.9581 0 29.5249 0C28.0918 0 26.9316 0.85 26.9316 1.9V30.1Z" fill="#02B188" />
<path d="M14.1035 30.1C14.1035 31.15 15.2637 32 16.6968 32C18.1299 32 19.2901 31.15 19.2901 30.1V8.9C19.2901 7.85 18.1299 7 16.6968 7C15.2637 7 14.1035 7.85 14.1035 8.9V30.1Z" fill="#02B188" />
<path d="M1.27344 30.1004C1.27344 31.1504 2.4336 32.0004 3.86673 32.0004C5.29986 32.0004 6.46002 31.1504 6.46002 30.1004V15.3004C6.46002 14.2504 5.29986 13.4004 3.86673 13.4004C2.4336 13.4004 1.27344 14.2504 1.27344 15.3004V30.1004Z" fill="#02B188" />
</g>
<defs>
<clipPath id="clip0_21262_3625">
<rect width="32" height="32" fill="white" transform="translate(0.119141)" />
</clipPath>
</defs>
</svg>
}
}

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

@ -9,7 +9,6 @@ import {
AudioAinsMode,
SimulcastStreamMode,
VideoStreamType,
QualityType,
RtcConnection,
RtcStats,
AudioVolumeInfo,
@ -152,7 +151,7 @@ export const agora = {
}, 1000);
},
// 事件回调
registerEventHandler: ({ onJoinChannelSuccess, onUserJoined, onUserOffline, onAudioVolumeIndication, onNetworkQuality, onRtcStats, onConnectionStateChanged, onLocalVideoStateChanged, onConnectionLost, onTokenPrivilegeWillExpire }: any) => {
registerEventHandler: ({ onJoinChannelSuccess, onUserJoined, onUserOffline, onAudioVolumeIndication, onRtcStats, onConnectionStateChanged, onLocalVideoStateChanged, onConnectionLost, onTokenPrivilegeWillExpire }: any) => {
rtcEngine.registerEventHandler({
// 监听本地用户加入频道事件
onJoinChannelSuccess: async (connection: RtcConnection, elapsed: number) => {
@ -182,10 +181,6 @@ export const agora = {
onAudioVolumeIndication: async (_connection: RtcConnection, speakers: AudioVolumeInfo[], _speakerNumber: number, _totalVolume: number) => {
await onAudioVolumeIndication?.(speakers)
},
//通话中每个用户的网络上下行 last mile 质量报告回调。
onNetworkQuality: async (connection: RtcConnection, remoteUid: number, txQuality: QualityType, rxQuality: QualityType) => {
await onNetworkQuality?.(connection, remoteUid, txQuality, rxQuality)
},
//当前通话相关的统计信息回调。
onRtcStats: async (_connection: RtcConnection, stats: RtcStats) => {
await onRtcStats?.(stats)

2
vite.config.ts
View File

@ -64,7 +64,6 @@ export default defineConfig({
AudioAinsMode,
SimulcastStreamMode,
VideoStreamType,
QualityType,
RtcConnection,
RtcStats,
AudioVolumeInfo,
@ -90,7 +89,6 @@ export default defineConfig({
AudioAinsMode,
SimulcastStreamMode,
VideoStreamType,
QualityType,
RtcConnection,
RtcStats,
AudioVolumeInfo,