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

优化

This commit is contained in:
yj 2024-08-27 11:32:09 +08:00
parent 7a79e889c8
commit 07aa661dba
3 changed files with 14 additions and 249 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -254,7 +254,7 @@ const Meeting: React.FC = () => {
channelId: state.channelId,
uid: userInfo.uid,
token: state.token,
tokenA: userInfo.roleId === '1' ? '' : state.tokenA,
tokenA: state.tokenA,
})
storage.setItem('noViewChatList', 0)
window.addEventListener('customStorageChange', handleCustomStorageChange);

43
src/page/UserVideo/index.tsx
View File

@ -2,9 +2,7 @@
import { GetPolling } from '@/api/Meeting';
import styles from '@/page/UserVideo/index.module.scss'
import { storage } from '@/utils';
import monitorAgora from '@/utils/package/monitorAgora';
import { CloseOutlined } from '@ant-design/icons';
import { VideoSourceType } from 'agora-electron-sdk';
import { Button, Select, message } from 'antd';
import { useEffect, useState } from "react";
const UserVideo: React.FC = () => {
@ -29,32 +27,9 @@ const UserVideo: React.FC = () => {
})
const [timeNumber, setTimeNumber] = useState(30);
const [timeStatus, setTimeStatus] = useState(false);
const [userList, setUserList] = useState([]);
useEffect(() => {
setUser(userInfo)
monitorAgora.init()
monitorAgora.setJoinChannel({
channelId: getQueryParameterRegex('channelId'),
uid: userInfo.uid,
token: getQueryParameterRegex('token'),
})
monitorAgora.registerEventHandler({
onJoinChannelSuccess: async (info: any, _elapsed: any) => {
console.log(info, '本地')
// await monitorAgora.setupLocalVideo({
// uid: info.localUid,
// view: document.getElementById(`video-${info.localUid}`),
// channelId: info.channelId,
// sourceType: VideoSourceType.VideoSourceCameraPrimary,
// })
},
onUserJoined: async (info: any, remoteUid: any, _elapsed: any) => {
console.log(info, remoteUid, '远端')
},
onUserOffline: async (info: any, remoteUid: any, _reason: any) => {
console.log(info, remoteUid, '退出')
},
})
window.addEventListener('customStorageChange', handleCustomStorageChange);
return () => {
window.removeEventListener('customStorageChange', handleCustomStorageChange);
@ -87,7 +62,9 @@ const UserVideo: React.FC = () => {
}, [from.viewPeopleValue])
// 监听缓存变化
const handleCustomStorageChange = async (e: any): Promise<void> => {
// console.log(e);
switch (e.key) {
}
};
// 获取地址栏参数
const getQueryParameterRegex = (name: string): string | null => {
@ -98,7 +75,9 @@ const UserVideo: React.FC = () => {
// 获取轮训用户
const getPolling = async (): Promise<void> => {
GetPolling(getQueryParameterRegex('channelId')?.split('a')[0] as string, from.viewPeopleValue).then((res: any) => {
console.log(res);
if (res.code === 200) {
setUserList(res.data)
}
})
};
return (
@ -153,9 +132,13 @@ const UserVideo: React.FC = () => {
</div>
<div className={styles.userVideoContentList}>
<div className={styles.userVideoContentListItem}>
<div className={styles.userVideoContentListItemVideo} id={`video-${user.uid}`}>
{
userList.map((item: any, index: number) => {
return <div className={styles.userVideoContentListItemVideo} id={`video-${item.uid}`} key={index}>
</div>
</div>
})
}
</div>
</div>
</div>

218
src/utils/package/monitorAgora.ts
View File

@ -1,218 +0,0 @@
import {
createAgoraRtcEngine,
ClientRoleType,
VideoSourceType,
VideoViewSetupMode,
RenderModeType,
} from "agora-electron-sdk";
import { storage } from "..";
const option: any = {
appId: 'dcfc466a6ecb4a1f972630065dfb1e75',
token: '',
channelId: '',
uid: '',
}
let rtcEngine: any = '';
const monitorAgora = {
// 初始化
init: async () => {
rtcEngine = createAgoraRtcEngine();
await rtcEngine.initialize({
appId: option.appId,
});
await monitorAgora.setDeviceManager()
},
// 获取当前设备是否存在不存在就获取默认设备
setDeviceManager: async (bool: boolean = false) => {
const setting = await JSON.parse(storage.getItem('setting') as string)
// 摄像头
if (setting.videoDeviceId) {
await monitorAgora.getVideoDeviceManager().then(async (res) => {
let item = res.list.find((item: any) => item.deviceId === setting.videoDeviceId);
if (item) {
await monitorAgora.setVideoDeviceManager(setting.videoDeviceId)
} else {
await monitorAgora.setVideoDeviceManager(await rtcEngine.getVideoDeviceManager().getDevice())
setting.videoDeviceId = await rtcEngine.getVideoDeviceManager().getDevice()
}
})
} else {
await monitorAgora.setVideoDeviceManager(await rtcEngine.getVideoDeviceManager().getDevice())
setting.videoDeviceId = await rtcEngine.getVideoDeviceManager().getDevice()
}
// 播放设备
if (setting.playBackDeviceId) {
await monitorAgora.getAudioMediaList().then(async (res) => {
let item = res.playBackList.find((item: any) => item.deviceId === setting.playBackDeviceId);
if (item) {
await monitorAgora.setPlaybackDevice(setting.playBackDeviceId)
} else {
await monitorAgora.setPlaybackDevice(res.playBackItem.deviceId)
setting.playBackDeviceId = res.playBackItem.deviceId
}
})
} else {
let deviceId = await rtcEngine.getAudioDeviceManager().getPlaybackDefaultDevice().deviceId;
await monitorAgora.setPlaybackDevice(deviceId)
setting.playBackDeviceId = deviceId
}
// 音频设备
if (setting.ecordingDeviceId) {
await monitorAgora.getAudioMediaList().then(async (res) => {
let item = res.ecordingList.find((item: any) => item.deviceId === setting.ecordingDeviceId);
if (item) {
await monitorAgora.setRecordingDevice(setting.ecordingDeviceId)
} else {
await monitorAgora.setRecordingDevice(res.ecordingItem.deviceId)
setting.ecordingDeviceId = res.ecordingItem.deviceId
}
})
} else {
let deviceId = await rtcEngine.getAudioDeviceManager().getRecordingDefaultDevice().deviceId;
await monitorAgora.setRecordingDevice(deviceId)
setting.ecordingDeviceId = deviceId
}
setTimeout(async () => {
storage.setItem('setting', JSON.stringify(setting))
if (bool) {
const setting = await JSON.parse(storage.getItem('setting') as string)
if (setting.videoDeviceId) monitorAgora.setVideoDeviceManager(setting.videoDeviceId) //指定摄像头头采集设备
if (setting.playBackDeviceId) monitorAgora.setPlaybackDevice(setting.playBackDeviceId) //指定播放设备
if (setting.playBackVolume) monitorAgora.setPlaybackDeviceVolume(setting.playBackVolume) // 设置播放设备音量
if (setting.ecordingDeviceId) monitorAgora.setRecordingDevice(setting.ecordingDeviceId) // 设置音频采集设备
if (setting.ecordingVolume) monitorAgora.setRecordingDeviceVolume(setting.ecordingVolume) // 设置音频设备音量
}
}, 1000);
},
// 事件回调
registerEventHandler: ({ onJoinChannelSuccess, onUserJoined, onUserOffline }: any) => {
rtcEngine.registerEventHandler({
// 监听本地用户加入频道事件
onJoinChannelSuccess: async (info: any, elapsed: any) => {
await onJoinChannelSuccess(info, elapsed)
},
// 监听远端用户加入频道事件
onUserJoined: async (info: any, remoteUid: any, elapsed: any) => {
await onUserJoined(info, remoteUid, elapsed)
},
// 监听用户离开频道事件
onUserOffline: async (info: any, remoteUid: any, reason: any) => {
await onUserOffline(info, remoteUid, reason)
},
});
},
// 加入频道
setJoinChannel: async (data: any) => {
option.token = data.token;
option.channelId = data.channelId;
option.uid = Number(data.uid);
await monitorAgora.JoinChannelEx()
},
// 所有用户加入的第二个房间
JoinChannelEx: async () => {
await rtcEngine.startCameraCapture(VideoSourceType.VideoSourceCamera, {
format: {
width: 640,
height: 360,
fps: 15,
}
})
await rtcEngine.joinChannelEx(
option.token,
{ channelId: option.channelId, localUid: Number(option.uid) },
{
autoSubscribeAudio: false,//设置是否自动订阅所有音频流
autoSubscribeVideo: false,//设置是否自动订阅所有视频流
publishMicrophoneTrack: false,//设置是否发布麦克风采集到的音频
publishCameraTrack: true,//设置是否发布摄像头采集的视频
clientRoleType: ClientRoleType.ClientRoleBroadcaster,//用户角色 ClientRoleBroadcaster 主播 ClientRoleAudience 观众
publishScreenTrack: false,//设置是否发布屏幕采集的视频
}
);
},
// 本地加入
setupLocalVideo: async (item: any) => {
if (item.view?.childNodes.length === 0) {
await rtcEngine.setupLocalVideo({
renderMode: RenderModeType.RenderModeHidden,
sourceType: item.sourceType,
uid: item.uid,
view: item.view,
setupMode: VideoViewSetupMode.VideoViewSetupAdd,
});
}
},
// 远端加入
setupRemoteVideoJoin: async (item: any) => {
if (item.view?.childNodes.length === 0) {
await rtcEngine.setupRemoteVideo(
{
renderMode: RenderModeType.RenderModeHidden,
sourceType: VideoSourceType.VideoSourceRemote,
uid: item.uid,
view: item.view,
setupMode: VideoViewSetupMode.VideoViewSetupAdd,
},
{ channelId: item.channelId },
);
}
},
// 退出
setupRemoteVideo: async (item: any) => {
await rtcEngine.setupRemoteVideo(
{
renderMode: RenderModeType.RenderModeHidden,
sourceType: VideoSourceType.VideoSourceRemote,
uid: item.uid,
view: item.view,
setupMode: VideoViewSetupMode.VideoViewSetupRemove,
},
);
},
// 销毁
release: async () => {
await rtcEngine.release()
},
// 获取系统中所有的视频设备列表。
getVideoDeviceManager: async (): Promise<any> => {
return {
list: rtcEngine.getVideoDeviceManager().enumerateVideoDevices(),
item: rtcEngine.getVideoDeviceManager().getDevice()
}
},
// 通过设备 ID 指定视频采集设备。
setVideoDeviceManager: async (deviceIdUTF8: string) => {
await rtcEngine.getVideoDeviceManager().setDevice(deviceIdUTF8)
},
// 获取输入输出设备列表
getAudioMediaList: async () => {
return {
playBackList: rtcEngine.getAudioDeviceManager().enumeratePlaybackDevices(),
ecordingList: rtcEngine.getAudioDeviceManager().enumerateRecordingDevices(),
playBackItem: rtcEngine.getAudioDeviceManager().getPlaybackDefaultDevice(),
ecordingItem: rtcEngine.getAudioDeviceManager().getRecordingDefaultDevice(),
ecordingVolume: rtcEngine.getAudioDeviceManager().getRecordingDeviceVolume(),
}
},
// 指定播放设备
setPlaybackDevice: async (deviceId: string) => {
await rtcEngine.getAudioDeviceManager().setPlaybackDevice(deviceId)
},
// 设置音频采集设备
setRecordingDevice: async (deviceId: string) => {
await rtcEngine.getAudioDeviceManager().setRecordingDevice(deviceId)
},
// 设置播放设备音量
setPlaybackDeviceVolume: async (volume: number) => {
await rtcEngine.getAudioDeviceManager().setPlaybackDeviceVolume(volume)
},
// 设置音频设备音量
setRecordingDeviceVolume: async (volume: number) => {
await rtcEngine.getAudioDeviceManager().setRecordingDeviceVolume(volume)
},
}
export default monitorAgora;