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

优化

This commit is contained in:
yj 2024-07-11 10:57:06 +08:00
parent c5086bcf1a
commit 0df7896ee5
2 changed files with 70 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -14,6 +14,7 @@ import { storage } from '@/utils';
import { GetRoomFile, PostRoomFile, DeleteRoomFile, GetRoomUpFileurl, GetRoomFileDwUrl } from '@/api/Meeting';
import axios from 'axios';
import ImageUrl from '@/utils/package/imageUrl'
import agora from '@/utils/package/agora'
const { Column } = Table
const Meeting: React.FC = () => {
const navigate = useNavigate();
@ -118,7 +119,7 @@ const Meeting: React.FC = () => {
useEffect(() => {
if (isInit) {
setUser(JSON.parse(storage.getItem('user') as string))
// window.agora.setJoinChannel({
// agora.setJoinChannel({
// channelId: state.channelId,
// userid: user.userName,
// token: state.token,
@ -153,49 +154,49 @@ const Meeting: React.FC = () => {
setIsSharedScreenModal(true)
break;
case '停止共享':
window.agora.stopScreenCapture()
agora.stopScreenCapture()
footerListTemplate[itemIndex][rowIndex].title = '共享屏幕'
break;
case '关闭声音':
footerListTemplate[itemIndex][rowIndex].title = '开启声音'
footerListTemplate[itemIndex][rowIndex].active = true
setFooterList(footerListTemplate)
window.agora.muteLocalAudioStream(true)
agora.muteLocalAudioStream(true)
break;
case '开启声音':
footerListTemplate[itemIndex][rowIndex].title = '关闭声音'
footerListTemplate[itemIndex][rowIndex].active = false
setFooterList(footerListTemplate)
window.agora.muteLocalAudioStream(false)
agora.muteLocalAudioStream(false)
break;
case '关闭视频':
footerListTemplate[itemIndex][rowIndex].title = '开启视频'
footerListTemplate[itemIndex][rowIndex].active = true
setFooterList(footerListTemplate)
window.agora.muteLocalVideoStream(true)
agora.muteLocalVideoStream(true)
break;
case '开启视频':
footerListTemplate[itemIndex][rowIndex].title = '关闭视频'
footerListTemplate[itemIndex][rowIndex].active = false
setFooterList(footerListTemplate)
window.agora.muteLocalVideoStream(false)
agora.muteLocalVideoStream(false)
break;
case '设置向导':
getAudioMediaList()
window.agora.startRecordingDeviceTest(200)
agora.startRecordingDeviceTest(200)
setIsStupWizard(true)
break;
case '录制':
footerListTemplate[itemIndex][rowIndex].title = '录制中'
footerListTemplate[itemIndex][rowIndex].active = true
setFooterList(footerListTemplate)
window.agora.startRecording()
agora.startRecording()
break;
case '录制中':
footerListTemplate[itemIndex][rowIndex].title = '录制'
footerListTemplate[itemIndex][rowIndex].active = false
setFooterList(footerListTemplate)
window.agora.stopRecording()
agora.stopRecording()
break;
case '共享文件':
await getRoomFile()
@ -213,8 +214,8 @@ const Meeting: React.FC = () => {
const footerListTemplate = [...footerList]
footerListTemplate[footerListIndex.itemIndex][footerListIndex.rowIndex].title = '停止共享'
setIsSharedScreenModal(false)
window.agora.setDesktopCapturerVideo(sharedScreenItem)
setVideoID(window.agora.getVideoId())
agora.setDesktopCapturerVideo(sharedScreenItem)
setVideoID(agora.getVideoId())
} else {
message.error('请选择应用!')
}
@ -222,7 +223,7 @@ const Meeting: React.FC = () => {
}
const getDesktopCapturerVideo = (): void => {
window.agora.getDesktopCapturerVideo().then((res: any) => {
agora.getDesktopCapturerVideo().then((res: any) => {
if (sharedScreenList.length !== res.length) {
res.forEach((item: any) => {
if (item.thumbImage.buffer) {
@ -238,7 +239,7 @@ const Meeting: React.FC = () => {
};
const getAudioMediaList = (): void => {
const { currentDevices, currentDevice, currentVolume } = window.agora.getAudioMediaList();
const { currentDevices, currentDevice, currentVolume } = agora.getAudioMediaList();
setAudioDeviceManager({
currentDevices: currentDevices.map((row: any) => {
return {
@ -404,13 +405,13 @@ const Meeting: React.FC = () => {
content={
<div className='meetingContentFooterPopover'>
<div onClick={() => {
window.agora.leaveChannel()
window.agora.stopScreenCapture()
agora.leaveChannel()
agora.stopScreenCapture()
navigate(-1)
}}>全员结束会议</div>
<div onClick={() => {
window.agora.leaveChannel()
window.agora.stopScreenCapture()
agora.leaveChannel()
agora.stopScreenCapture()
navigate(-1)
}}>仅自己离开</div>
<div onClick={() => { setOpen(false) }}>取消</div>
@ -481,7 +482,7 @@ const Meeting: React.FC = () => {
...audioDeviceManager,
currentDevice: e
})
window.agora.setRecordingDevice(e);
agora.setRecordingDevice(e);
getAudioMediaList()
}} />;
<audio src="" id='startAudio'></audio>
@ -493,7 +494,7 @@ const Meeting: React.FC = () => {
...audioDeviceManager,
currentVolume: e
})
window.agora.setRecordingDeviceVolume(e)
agora.setRecordingDeviceVolume(e)
}} style={{ flexGrow: 1 }} />
</div> :
<div>
@ -530,7 +531,7 @@ const Meeting: React.FC = () => {
audio.srcObject = null;
}
setStepsStatus(false)
window.agora.startPreview().then((res: boolean) => {
agora.startPreview().then((res: boolean) => {
setIsVideoLoad(res)
})
}}>下一步</Button>
@ -542,9 +543,9 @@ const Meeting: React.FC = () => {
onClick={() => {
if (isVideoLoad) {
setIsVideoLoad(false)
window.agora.stopAudioDeviceLoopbackTest()
agora.stopAudioDeviceLoopbackTest()
setStepsStatus(true)
window.agora.startRecordingDeviceTest(200)
agora.startRecordingDeviceTest(200)
} else {
message.error('视频加载中！')
}
@ -555,8 +556,8 @@ const Meeting: React.FC = () => {
className='m-ant-btn'
onClick={() => {
if (isVideoLoad) {
window.agora.stopAudioDeviceLoopbackTest()
window.agora.setRecordingDeviceVolume(audioDeviceManager.currentVolume)
agora.stopAudioDeviceLoopbackTest()
agora.setRecordingDeviceVolume(audioDeviceManager.currentVolume)
setIsStupWizard(false)
setStepsStatus(true)
setIsVideoLoad(false)

95
src/utils/package/agora.js → src/utils/package/agora.ts
View File

@ -11,7 +11,7 @@ const {
} = require("agora-electron-sdk");
const { message } = require('antd');
const rtcEngine = createAgoraRtcEngine();
const option = {
const option: any = {
appId: 'dcfc466a6ecb4a1f972630065dfb1e75',
token: '',
channelId: '',
@ -23,7 +23,7 @@ rtcEngine.initialize({
rtcEngine.registerEventHandler({
// 监听本地用户加入频道事件
onJoinChannelSuccess: ({ channelId, localUid }, elapsed) => {
onJoinChannelSuccess: ({ channelId, localUid }: any, elapsed: any) => {
console.log({ channelId, localUid }, elapsed, '加入房间');
// 本地用户加入频道后，设置本地视频窗口
rtcEngine.setupLocalVideo({
@ -31,61 +31,64 @@ rtcEngine.registerEventHandler({
// sourceType: VideoSourceType.VideoSourceScreen,
sourceType: VideoSourceType.VideoSourceCameraPrimary,
uid: localUid,
view: getDom(),
view: agora.getDom(),
setupMode: VideoViewSetupMode.VideoViewSetupAdd,
});
},
// 监听远端用户加入频道事件
onUserJoined: ({ channelId, localUid }, remoteUid, elapsed) => {
onUserJoined: ({ channelId, localUid }: any, remoteUid: any, elapsed: any) => {
console.log({ channelId, localUid }, remoteUid, '远端加入频道');
// 远端用户加入频道后，设置远端视频窗口
rtcEngine.setupRemoteVideo(
{
renderMode: RenderModeType.RenderModeFit,
sourceType: VideoSourceType.VideoSourceRemote,
uid: remoteUid,
view: getDom(),
view: agora.getDom(),
setupMode: VideoViewSetupMode.VideoViewSetupAdd,
},
{ channelId },
);
},
// 视频发布状态改变回调
onVideoPublishStateChanged: (source, channel, oldState, newState, elapseSinceLastState) => {
if (newState === 1) {
}
},
// 音频发布状态改变回调
onAudioPublishStateChanged: (channel, oldState, newState, elapseSinceLastState) => {
if (newState === 1) {
}
},
// 监听用户离开频道事件
onUserOffline: ({ channelId, localUid }, remoteUid, reason) => {
onUserOffline: ({ channelId, localUid }: any, remoteUid: any, reason: any) => {
// 远端用户离开频道后，关闭远端视频窗口
console.log({ channelId, localUid }, remoteUid, '离开频道');
rtcEngine.setupRemoteVideo(
{
renderMode: RenderModeType.RenderModeFit,
sourceType: VideoSourceType.VideoSourceRemote,
uid: remoteUid,
view: getDom(),
view: agora.getDom(),
setupMode: VideoViewSetupMode.VideoViewSetupRemove,
},
);
},
// 视频发布状态改变回调
onVideoPublishStateChanged: (source: any, channel: any, oldState: any, newState: any, elapseSinceLastState: any) => {
if (newState === 1) {
}
},
// 音频发布状态改变回调
onAudioPublishStateChanged: (channel: any, oldState: any, newState: any, elapseSinceLastState: any) => {
if (newState === 1) {
}
},
// 用户音量提示回调。
onAudioVolumeIndication: (connection, speakers, speakerNumber, totalVolume) => {
onAudioVolumeIndication: (connection: any, speakers: any, speakerNumber: any, totalVolume: any,) => {
const percentage = (totalVolume / 255) * 100
if (document.getElementById('recordingDeviceTest')) {
document.getElementById('recordingDeviceTest').style.width = `${percentage}%`
const dom = document.getElementById('recordingDeviceTest') as any;
if (dom) {
dom.style.width = `${percentage}%`
}
}
});
let videoID = '';
let iMediaRecorder = '';
let videoID: string = '';
let iMediaRecorder: any = '';
const agora = {
getDom: () => {
@ -100,7 +103,7 @@ const agora = {
})
},
// 加入频道
joinChannel: (bool) => {
joinChannel: (bool: boolean) => {
if (bool) {
rtcEngine.joinChannel(option.token, option.channelId, option.userid, {
channelProfile: ChannelProfileType.ChannelProfileLiveBroadcasting, //设置频道场景为直播场景
@ -137,11 +140,11 @@ const agora = {
})
iMediaRecorder.setMediaRecorderObserver({
// 录制状态发生改变回调。
onRecorderStateChanged: (channelId, uid, state, reason) => {
onRecorderStateChanged: (channelId: any, uid: any, state: any, reason: any) => {
console.log(channelId, uid, state, reason, '录制状态发生改变回调。');
},
// 录制信息更新回调。
onRecorderInfoUpdated: (channelId, uid, info) => {
onRecorderInfoUpdated: (channelId: any, uid: any, info: any) => {
console.log(channelId, uid, info, '录制信息更新回调。');
},
})
@ -157,13 +160,13 @@ const agora = {
rtcEngine.stopScreenCapture();
},
// 开启本地视频预览
startPreview: async () => {
startPreview: async (): Promise<boolean> => {
return new Promise((resolve, reject) => {
navigator.mediaDevices.getUserMedia({
video: true,
audio: true,
}).then((stream) => {
let dom = document.getElementById('startPreview');
let dom = document.getElementById('startPreview') as any;
dom.srcObject = stream;
dom.play()
resolve(true)
@ -177,29 +180,29 @@ const agora = {
stopAudioDeviceLoopbackTest: () => {
rtcEngine.getAudioDeviceManager().stopAudioDeviceLoopbackTest()
rtcEngine.getAudioDeviceManager().stopRecordingDeviceTest()
let video = document.getElementById('startPreview');
let video = document.getElementById('startPreview') as any;
if (video.srcObject) {
const tracks = video.srcObject.getTracks();
tracks.forEach((track) => {
tracks.forEach((track: any) => {
track.stop();
});
video.srcObject = null;
}
let audio = document.getElementById('startAudio');
let audio = document.getElementById('startAudio') as any;
if (audio.srcObject) {
const tracks = audio.srcObject.getTracks();
tracks.forEach((track) => {
tracks.forEach((track: any) => {
track.stop();
});
audio.srcObject = null;
}
},
// 启动音频采集设备测试
startRecordingDeviceTest: (indicationInterval) => {
startRecordingDeviceTest: (indicationInterval: number) => {
rtcEngine.getAudioDeviceManager().startRecordingDeviceTest(indicationInterval)
navigator.mediaDevices.getUserMedia({ audio: true })
.then((stream) => {
let dom = document.getElementById('startAudio');
let dom = document.getElementById('startAudio') as any;
dom.srcObject = stream;
dom.play()
})
@ -216,11 +219,11 @@ const agora = {
}
},
// 设置音频设备音量
setRecordingDeviceVolume: (volume) => {
setRecordingDeviceVolume: (volume: number) => {
rtcEngine.getAudioDeviceManager().setRecordingDeviceVolume(volume)
},
// 设置音频采集设备
setRecordingDevice: (deviceId) => {
setRecordingDevice: (deviceId: string) => {
rtcEngine.getAudioDeviceManager().setRecordingDevice(deviceId)
},
// 摄像头采集
@ -229,27 +232,19 @@ const agora = {
// joinChannel(false)
},
// 加入频道
setJoinChannel: (data) => {
setJoinChannel: (data: any) => {
option.token = data.token;
option.channelId = data.channelId;
option.userid = Number(data.userid);
rtcEngine.startCameraCapture(VideoSourceType.VideoSourceCamera, {})
// joinChannel(false)
},
// 离开频道
leaveChannel: () => {
// leaveChannel()
},
// 停止共享屏幕
stopScreenCapture: () => {
// stopScreenCapture()
},
// 取消或恢复发布本地音频流
muteLocalAudioStream: (mute) => {
muteLocalAudioStream: (mute: any) => {
rtcEngine.muteLocalAudioStream(mute)
},
// 取消或恢复发布本地视频流
muteLocalVideoStream: (mute) => {
muteLocalVideoStream: (mute: any) => {
rtcEngine.muteLocalVideoStream(mute)
},
// 获取当前生成的视频id
@ -262,7 +257,7 @@ const agora = {
},
// 共享屏幕采集
setDesktopCapturerVideo: (targetSource) => {
setDesktopCapturerVideo: (targetSource: any) => {
// stopScreenCapture()
if (
targetSource.type ===
@ -292,4 +287,4 @@ const agora = {
},
}
window.agora = agora;
export default agora;