This commit is contained in:
parent
0df7896ee5
commit
1674f227a3
16
main.js
16
main.js
|
|
@ -1,4 +1,4 @@
|
|||
const { app, BrowserWindow, screen, Tray, nativeImage, Menu, ipcMain, clipboard, dialog } = require('electron');
|
||||
const { app, BrowserWindow, screen, Tray, nativeImage, Menu, ipcMain, clipboard, dialog, webFrame } = require('electron');
|
||||
const path = require('node:path')
|
||||
app.allowRendererProcessReuse = false;
|
||||
let mainWindow = null;
|
||||
|
|
@ -136,20 +136,6 @@ app.on('ready', () => {
|
|||
break;
|
||||
}
|
||||
});
|
||||
// 下载文件并放置选择的文件夹
|
||||
ipcMain.handle('dwFile', (event, url) => {
|
||||
dialog.showOpenDialog(mainWindow, {
|
||||
properties: ['openDirectory']
|
||||
}).then(result => {
|
||||
if (!result.canceled) {
|
||||
const selectedPath = result.filePaths[0];
|
||||
console.log('Selected download folder:', selectedPath);
|
||||
console.log(url);
|
||||
}
|
||||
}).catch(err => {
|
||||
|
||||
});
|
||||
});
|
||||
// 导出是否全屏
|
||||
ipcMain.handle('getIsMaximized', () => {
|
||||
return mainWindow.isMaximized();
|
||||
|
|
|
|||
|
|
@ -16,9 +16,5 @@ window.electron = {
|
|||
// 复制文字
|
||||
setWriteText: (text) => {
|
||||
return ipcRenderer.invoke('setWriteText', text)
|
||||
},
|
||||
// 下载文件并放置选择的文件夹
|
||||
dwFile: (url) => {
|
||||
ipcRenderer.invoke('dwFile', url)
|
||||
}
|
||||
}
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
import { request } from '@/utils'
|
||||
export const GetCheckUser = (userName: string) =>
|
||||
export const GetCheckUser = (account: string) =>
|
||||
request({
|
||||
url: `/auth/check-user?userName=${userName}`,
|
||||
url: `/auth/check-user?account=${account}`,
|
||||
method: 'get'
|
||||
})
|
||||
|
||||
|
|
|
|||
|
|
@ -32,3 +32,9 @@ export const GetRoomFileDwUrl = (fileUrl: string, fileId: string) =>
|
|||
method: 'get'
|
||||
})
|
||||
|
||||
|
||||
export const GetRoomUser = (roomNum: string) =>
|
||||
request({
|
||||
url: `/room/user?roomNum=${roomNum}`,
|
||||
method: 'get'
|
||||
})
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 754 B |
|
|
@ -0,0 +1,85 @@
|
|||
// 设置向导
|
||||
.stupWizard {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
>div:nth-child(1) {
|
||||
padding: 20px 0 0;
|
||||
overflow-x: hidden;
|
||||
max-height: 60vh;
|
||||
overflow-y: auto;
|
||||
|
||||
>div:nth-child(1) {
|
||||
color: #EEEEEE;
|
||||
font-weight: bold;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
>div:nth-child(2) {
|
||||
>div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 22px;
|
||||
|
||||
>span {
|
||||
flex-shrink: 0;
|
||||
color: #828282;
|
||||
font-size: 18px;
|
||||
width: 130px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
>div:nth-child(3) {
|
||||
margin-top: 34px;
|
||||
|
||||
>span {
|
||||
color: #828282;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
>div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 20px;
|
||||
|
||||
>img {
|
||||
flex-shrink: 0;
|
||||
width: 36px;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
>div {
|
||||
flex-grow: 1;
|
||||
height: 40px;
|
||||
position: relative;
|
||||
|
||||
>img {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
>div {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
width: 0%;
|
||||
overflow: hidden;
|
||||
|
||||
>img {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
>div:nth-child(2) {
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
margin-top: 20px;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,197 @@
|
|||
import styles from '@/components/StupWizard/index.module.scss'
|
||||
import ImageUrl from '@/utils/package/imageUrl';
|
||||
import { Button, message, Modal, Select, Slider } from 'antd';
|
||||
import { useState, useImperativeHandle, forwardRef } from "react";
|
||||
import agora from '@/utils/package/agora'
|
||||
const StupWizard = forwardRef((props: any, ref: any) => {
|
||||
useImperativeHandle(ref, () => ({
|
||||
changeIsStupWizard: () => {
|
||||
setIsStupWizard(true)
|
||||
getAudioMediaList(true)
|
||||
agora.startPlaybackDeviceTest()
|
||||
agora.setPlaybackDeviceVolume(100)
|
||||
}
|
||||
}))
|
||||
const [isStupWizard, setIsStupWizard] = useState(false);
|
||||
const [stepsStatus, setStepsStatus] = useState<number>(1);
|
||||
const [isVideoLoad, setIsVideoLoad] = useState<boolean>(false);
|
||||
const [audioDeviceManager, setAudioDeviceManager] = useState<any>({
|
||||
currentDevices: [],
|
||||
currentDevice: {},
|
||||
currentVolume: 0,
|
||||
});
|
||||
// agora.startRecordingDeviceTest(200)
|
||||
const getAudioMediaList = (bool: boolean): void => {
|
||||
const { currentDevices, currentVolume, currentDevice } = agora.getAudioMediaList(bool);
|
||||
setAudioDeviceManager({
|
||||
currentDevices: currentDevices.map((row: any) => {
|
||||
return {
|
||||
value: row.deviceId,
|
||||
label: row.deviceName
|
||||
}
|
||||
}),
|
||||
currentDevice: currentDevice.deviceId,
|
||||
currentVolume,
|
||||
})
|
||||
}
|
||||
// 音频设置向导
|
||||
// 视频测试
|
||||
return (
|
||||
<>
|
||||
<Modal title="设置向导" open={isStupWizard} footer={null} closable={false} centered width={'40vw'}>
|
||||
<div className={styles.stupWizard}>
|
||||
<div>
|
||||
<div>音频设置向导</div>
|
||||
<div>
|
||||
<div>
|
||||
<span>音频输出设备：</span>
|
||||
<Select
|
||||
options={audioDeviceManager.currentDevices} style={{ flexGrow: 1 }}
|
||||
value={audioDeviceManager.currentDevice} onChange={(e) => {
|
||||
setAudioDeviceManager({
|
||||
...audioDeviceManager,
|
||||
currentDevice: e
|
||||
})
|
||||
agora.setPlaybackDevice(e)
|
||||
}} />;
|
||||
<audio src="" id='startAudio'></audio>
|
||||
</div>
|
||||
<div>
|
||||
<span>调节声音大小：</span>
|
||||
<Slider min={0} max={255} value={audioDeviceManager.currentVolume} onChange={(e) => {
|
||||
setAudioDeviceManager({
|
||||
...audioDeviceManager,
|
||||
currentVolume: e
|
||||
})
|
||||
agora.setPlaybackDeviceVolume(e)
|
||||
}} style={{ flexGrow: 1 }} />
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<span>正在播放语音，听到语音代表放音设备没问题</span>
|
||||
<div>
|
||||
<img src={ImageUrl.icon36} alt="" />
|
||||
<div>
|
||||
<img src={ImageUrl.icon34} alt="" />
|
||||
<div id='recordingDeviceTest'>
|
||||
<img src={ImageUrl.icon35} alt="" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div>
|
||||
<Button type="primary" className='m-ant-btn' onClick={() => {
|
||||
|
||||
}}>下一步</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* <div className={styles.stupWizard}>
|
||||
<div>
|
||||
<div>音频设置向导</div>
|
||||
<div>
|
||||
<div>
|
||||
<span>音频输入设备：</span>
|
||||
<Select
|
||||
options={audioDeviceManager.currentDevices} style={{ flexGrow: 1 }}
|
||||
value={audioDeviceManager.currentDevice} onChange={(e) => {
|
||||
setAudioDeviceManager({
|
||||
...audioDeviceManager,
|
||||
currentDevice: e
|
||||
})
|
||||
agora.setRecordingDevice(e);
|
||||
getAudioMediaList()
|
||||
}} />;
|
||||
<audio src="" id='startAudio'></audio>
|
||||
</div>
|
||||
{stepsStatus ? <div>
|
||||
<span>调节声音大小：</span>
|
||||
<Slider min={0} max={255} value={audioDeviceManager.currentVolume} onChange={(e) => {
|
||||
setAudioDeviceManager({
|
||||
...audioDeviceManager,
|
||||
currentVolume: e
|
||||
})
|
||||
agora.setRecordingDeviceVolume(e)
|
||||
}} style={{ flexGrow: 1 }} />
|
||||
</div> :
|
||||
<div>
|
||||
<span>视频预览：</span>
|
||||
<video id='startPreview'
|
||||
poster={ImageUrl.error}
|
||||
style={{ width: '226px', height: '136px', backgroundColor: 'black' }}>
|
||||
</video>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
<div>
|
||||
<span>您可以对着麦克风说话，试听表克风的输入质量</span>
|
||||
<div>
|
||||
<img src={ImageUrl.icon33} alt="" />
|
||||
<div>
|
||||
<img src={ImageUrl.icon34} alt="" />
|
||||
<div id='recordingDeviceTest'>
|
||||
<img src={ImageUrl.icon35} alt="" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div>
|
||||
<Button type="primary" className='m-ant-btn' onClick={() => {
|
||||
let audio = document.getElementById('startAudio') as any;
|
||||
if (audio.srcObject) {
|
||||
const tracks = audio.srcObject.getTracks();
|
||||
tracks.forEach((track: any) => {
|
||||
track.stop();
|
||||
});
|
||||
audio.srcObject = null;
|
||||
}
|
||||
// setStepsStatus(false)
|
||||
agora.startPreview().then((res: boolean) => {
|
||||
setIsVideoLoad(res)
|
||||
})
|
||||
}}>下一步</Button>
|
||||
</div>
|
||||
<div>
|
||||
<Button
|
||||
type="primary"
|
||||
style={{ backgroundColor: '#31353A', marginRight: '14px' }}
|
||||
onClick={() => {
|
||||
if (isVideoLoad) {
|
||||
setIsVideoLoad(false)
|
||||
agora.stopAudioDeviceLoopbackTest()
|
||||
setStepsStatus(true)
|
||||
agora.startRecordingDeviceTest(200)
|
||||
} else {
|
||||
message.error('视频加载中！')
|
||||
}
|
||||
}}
|
||||
>上一步</Button>
|
||||
<Button
|
||||
type="primary"
|
||||
className='m-ant-btn'
|
||||
onClick={() => {
|
||||
if (isVideoLoad) {
|
||||
agora.stopAudioDeviceLoopbackTest()
|
||||
agora.setRecordingDeviceVolume(audioDeviceManager.currentVolume)
|
||||
setIsStupWizard(false)
|
||||
setStepsStatus(true)
|
||||
setIsVideoLoad(false)
|
||||
} else {
|
||||
message.error('视频加载中！')
|
||||
}
|
||||
}}
|
||||
>完成
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div> */}
|
||||
</Modal>
|
||||
</>
|
||||
)
|
||||
})
|
||||
export default StupWizard
|
||||
|
|
@ -577,93 +577,6 @@
|
|||
margin-top: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
// 设置向导
|
||||
.stupWizard {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
>div:nth-child(1) {
|
||||
padding: 20px 0 0;
|
||||
overflow-x: hidden;
|
||||
max-height: 60vh;
|
||||
overflow-y: auto;
|
||||
|
||||
>div:nth-child(1) {
|
||||
color: #EEEEEE;
|
||||
font-weight: bold;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
>div:nth-child(2) {
|
||||
>div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 22px;
|
||||
|
||||
>span {
|
||||
flex-shrink: 0;
|
||||
color: #828282;
|
||||
font-size: 18px;
|
||||
width: 130px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
>div:nth-child(3) {
|
||||
margin-top: 34px;
|
||||
|
||||
>span {
|
||||
color: #828282;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
>div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 20px;
|
||||
|
||||
>img {
|
||||
flex-shrink: 0;
|
||||
width: 36px;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
>div {
|
||||
flex-grow: 1;
|
||||
height: 40px;
|
||||
position: relative;
|
||||
|
||||
>img {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
>div {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
width: 0%;
|
||||
overflow: hidden;
|
||||
|
||||
>img {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
>div:nth-child(2) {
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
margin-top: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
// 共享文件
|
||||
.sharedFilesModel {
|
||||
>div:nth-child(1) {
|
||||
|
|
|
|||
|
|
@ -1,24 +1,27 @@
|
|||
import styles from '@/page/Meeting/index.module.scss'
|
||||
import { useEffect, useState } from "react";
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import Operation from '@/components/Operation';
|
||||
import { Navigation, Pagination } from 'swiper/modules';
|
||||
import { Swiper, SwiperSlide } from 'swiper/react';
|
||||
import 'swiper/css';
|
||||
import 'swiper/css/navigation';
|
||||
import 'swiper/css/pagination';
|
||||
import { Button, Input, Popover, Modal, Checkbox, message, Select, Slider, Table, Pagination as AntdPagination } from "antd";
|
||||
import { DeleteOutlined, FolderOutlined, ProfileOutlined, ReloadOutlined, SearchOutlined, VerticalAlignBottomOutlined } from '@ant-design/icons';
|
||||
import { Button, Input, Popover, Modal, Checkbox, message, Table, Pagination as AntdPagination } from "antd";
|
||||
import { DeleteOutlined, ProfileOutlined, ReloadOutlined, SearchOutlined, VerticalAlignBottomOutlined } from '@ant-design/icons';
|
||||
import { useLocation, useNavigate } from 'react-router-dom';
|
||||
import { thumbImageBufferToBase64 } from '@/utils/package/base64'
|
||||
import { storage } from '@/utils';
|
||||
import { GetRoomFile, PostRoomFile, DeleteRoomFile, GetRoomUpFileurl, GetRoomFileDwUrl } from '@/api/Meeting';
|
||||
import { GetRoomFile, PostRoomFile, DeleteRoomFile, GetRoomUpFileurl, GetRoomFileDwUrl, GetRoomUser } from '@/api/Meeting';
|
||||
import axios from 'axios';
|
||||
import ImageUrl from '@/utils/package/imageUrl'
|
||||
import agora from '@/utils/package/agora'
|
||||
import StupWizard from '@/components/StupWizard';
|
||||
import { onInvoke } from '@/utils/package/signalr';
|
||||
const { Column } = Table
|
||||
const Meeting: React.FC = () => {
|
||||
const navigate = useNavigate();
|
||||
const { state } = useLocation();
|
||||
const stupWizardRef = useRef<any>();
|
||||
const [statusList, setStatusList] = useState({
|
||||
userList: false,
|
||||
userChatList: false,
|
||||
|
|
@ -27,7 +30,6 @@ const Meeting: React.FC = () => {
|
|||
const [isSharedScreenModal, setIsSharedScreenModal] = useState(false);
|
||||
const [isInit, setIsInit] = useState(true);
|
||||
const [user, setUser] = useState<any>({});
|
||||
const [isStupWizard, setIsStupWizard] = useState(false);
|
||||
const [showRowSelection, setShowRowSelection] = useState(false);
|
||||
const [isSharedFilesModel, setIsSharedFilesModel] = useState(false);
|
||||
const [sharedScreenList, setSharedScreenList] = useState<any>([]);
|
||||
|
|
@ -97,11 +99,6 @@ const Meeting: React.FC = () => {
|
|||
itemIndex: 0,
|
||||
rowIndex: 0,
|
||||
});
|
||||
const [audioDeviceManager, setAudioDeviceManager] = useState<any>({
|
||||
currentDevices: [],
|
||||
currentDevice: {},
|
||||
currentVolume: 0,
|
||||
});
|
||||
const [fileList, setFileList] = useState({
|
||||
data: [],
|
||||
keyword: '',
|
||||
|
|
@ -109,27 +106,31 @@ const Meeting: React.FC = () => {
|
|||
pageIndex: 1,
|
||||
pageSize: 10,
|
||||
})
|
||||
const [roomUserList, setRoomUserList] = useState<any>([])
|
||||
|
||||
const [stepsStatus, setStepsStatus] = useState<boolean>(true);
|
||||
const [isVideoLoad, setIsVideoLoad] = useState<boolean>(false);
|
||||
const [list] = useState<number[]>([1, 2, 3, 4, 5, 6, 7])
|
||||
const [open, setOpen] = useState(false)
|
||||
const [videoID, setVideoID] = useState('')
|
||||
|
||||
useEffect(() => {
|
||||
if (isInit) {
|
||||
setUser(JSON.parse(storage.getItem('user') as string))
|
||||
// agora.setJoinChannel({
|
||||
// channelId: state.channelId,
|
||||
// userid: user.userName,
|
||||
// token: state.token,
|
||||
// })
|
||||
let userInfo = JSON.parse(storage.getItem('user') as string)
|
||||
agora.init()
|
||||
agora.setJoinChannel({
|
||||
channelId: state.channelId,
|
||||
userid: userInfo.account,
|
||||
token: state.token,
|
||||
})
|
||||
setUser(userInfo)
|
||||
setIsInit(false)
|
||||
window.addEventListener('customStorageChange', handleCustomStorageChange);
|
||||
} else {
|
||||
getRoomFile()
|
||||
}
|
||||
return () => {
|
||||
window.removeEventListener('customStorageChange', handleCustomStorageChange);
|
||||
};
|
||||
}, [fileList.pageIndex]);
|
||||
|
||||
// 操作按钮
|
||||
const changeStatusList = async (row: any, itemIndex: number, rowIndex: number): Promise<void> => {
|
||||
const footerListTemplate = [...footerList]
|
||||
setFooterListIndex({
|
||||
|
|
@ -182,9 +183,7 @@ const Meeting: React.FC = () => {
|
|||
agora.muteLocalVideoStream(false)
|
||||
break;
|
||||
case '设置向导':
|
||||
getAudioMediaList()
|
||||
agora.startRecordingDeviceTest(200)
|
||||
setIsStupWizard(true)
|
||||
stupWizardRef.current.changeIsStupWizard()
|
||||
break;
|
||||
case '录制':
|
||||
footerListTemplate[itemIndex][rowIndex].title = '录制中'
|
||||
|
|
@ -205,23 +204,19 @@ const Meeting: React.FC = () => {
|
|||
}
|
||||
}
|
||||
|
||||
const changeVdeio = async (bool: boolean): Promise<void> => {
|
||||
if (bool) {
|
||||
|
||||
} else {
|
||||
// 分享屏幕
|
||||
const clickSharedScreen = async (): Promise<void> => {
|
||||
let data = sharedScreenList.find((item: any) => item.sourceId === sharedScreenItem.sourceId)
|
||||
if (data) {
|
||||
const footerListTemplate = [...footerList]
|
||||
footerListTemplate[footerListIndex.itemIndex][footerListIndex.rowIndex].title = '停止共享'
|
||||
setIsSharedScreenModal(false)
|
||||
agora.setDesktopCapturerVideo(sharedScreenItem)
|
||||
setVideoID(agora.getVideoId())
|
||||
} else {
|
||||
message.error('请选择应用!')
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 获取桌面可共享屏幕的引用
|
||||
const getDesktopCapturerVideo = (): void => {
|
||||
agora.getDesktopCapturerVideo().then((res: any) => {
|
||||
if (sharedScreenList.length !== res.length) {
|
||||
|
|
@ -238,20 +233,7 @@ const Meeting: React.FC = () => {
|
|||
})
|
||||
};
|
||||
|
||||
const getAudioMediaList = (): void => {
|
||||
const { currentDevices, currentDevice, currentVolume } = agora.getAudioMediaList();
|
||||
setAudioDeviceManager({
|
||||
currentDevices: currentDevices.map((row: any) => {
|
||||
return {
|
||||
value: row.deviceId,
|
||||
label: row.deviceName
|
||||
}
|
||||
}),
|
||||
currentDevice: currentDevice.deviceId,
|
||||
currentVolume,
|
||||
})
|
||||
}
|
||||
|
||||
// 获取共享文件列表
|
||||
const getRoomFile = async (): Promise<void> => {
|
||||
await GetRoomFile({
|
||||
pageIndex: fileList.pageIndex,
|
||||
|
|
@ -274,6 +256,33 @@ const Meeting: React.FC = () => {
|
|||
})
|
||||
}
|
||||
|
||||
// 获取房间用户
|
||||
const getRoomUser = async (): Promise<void> => {
|
||||
await GetRoomUser(state.channelId).then(res => {
|
||||
if (res.code === 200) {
|
||||
setRoomUserList(res.data)
|
||||
setTimeout(() => {
|
||||
res.data.forEach((item: any) => {
|
||||
agora.setVideo(Number(item.account), document.getElementById(`video-${item.account}`), state.channelId)
|
||||
})
|
||||
}, 1000)
|
||||
}
|
||||
})
|
||||
}
|
||||
const handleCustomStorageChange = (e: any): void => {
|
||||
if (e.key === 'isJoin') {
|
||||
if (e.value) {
|
||||
onInvoke('joinChannel', {
|
||||
roomNum: state.channelId
|
||||
})
|
||||
getRoomUser()
|
||||
} else {
|
||||
onInvoke('levelChannel', {
|
||||
roomNum: state.channelId
|
||||
})
|
||||
}
|
||||
}
|
||||
};
|
||||
return (
|
||||
<>
|
||||
<div className={styles.meeting}>
|
||||
|
|
@ -287,7 +296,7 @@ const Meeting: React.FC = () => {
|
|||
</div>
|
||||
<div>00:13:45</div>
|
||||
</div>
|
||||
<div>会议号：2323235</div>
|
||||
<div>会议号：{state.channelId}</div>
|
||||
<div className='drag'>
|
||||
<div className={styles.meetingGrayButton}>演讲者模式</div>
|
||||
<Operation></Operation>
|
||||
|
|
@ -313,11 +322,11 @@ const Meeting: React.FC = () => {
|
|||
}}
|
||||
onSlideChange={() => { }}
|
||||
>
|
||||
{list.map((item, index) =>
|
||||
<SwiperSlide key={item}>
|
||||
{roomUserList.map((item: any, index: number) =>
|
||||
<SwiperSlide key={index}>
|
||||
<div className={styles.meetingContentSwiperCard}>
|
||||
<div className={styles.meetingContentSwiperCardVdeio} id={`video-${index}`}></div>
|
||||
{meetingContentUser()}
|
||||
<div className={styles.meetingContentSwiperCardVdeio} id={`video-${item.account}`}></div>
|
||||
{meetingContentUser(item)}
|
||||
</div>
|
||||
</SwiperSlide>
|
||||
)}
|
||||
|
|
@ -325,7 +334,7 @@ const Meeting: React.FC = () => {
|
|||
</div>
|
||||
<div className={`${styles.meetingContentVideo} drag`}>
|
||||
<div className={styles.meetingContentVideoDom}></div>
|
||||
{meetingContentUser()}
|
||||
{/* {meetingContentUser()} */}
|
||||
</div>
|
||||
</div>
|
||||
{
|
||||
|
|
@ -463,114 +472,12 @@ const Meeting: React.FC = () => {
|
|||
}}>共享电脑音频</Checkbox>
|
||||
<div>
|
||||
<Button type="primary" onClick={() => { setIsSharedScreenModal(false) }} style={{ backgroundColor: '#31353A', marginRight: '14px' }}>取消</Button>
|
||||
<Button type="primary" className='m-ant-btn' onClick={() => changeVdeio(false)}>共享</Button>
|
||||
<Button type="primary" className='m-ant-btn' onClick={() => clickSharedScreen()}>共享</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
<Modal title="设置向导" open={isStupWizard} footer={null} closable={false} centered width={'40vw'}>
|
||||
<div className={styles.stupWizard}>
|
||||
<div>
|
||||
<div>{stepsStatus ? '音频设置向导' : '视频测试'}</div>
|
||||
<div>
|
||||
<div>
|
||||
<span>音频输出设备：</span>
|
||||
<Select
|
||||
options={audioDeviceManager.currentDevices} style={{ flexGrow: 1 }}
|
||||
value={audioDeviceManager.currentDevice} onChange={(e) => {
|
||||
setAudioDeviceManager({
|
||||
...audioDeviceManager,
|
||||
currentDevice: e
|
||||
})
|
||||
agora.setRecordingDevice(e);
|
||||
getAudioMediaList()
|
||||
}} />;
|
||||
<audio src="" id='startAudio'></audio>
|
||||
</div>
|
||||
{stepsStatus ? <div>
|
||||
<span>调节声音大小：</span>
|
||||
<Slider min={0} max={255} value={audioDeviceManager.currentVolume} onChange={(e) => {
|
||||
setAudioDeviceManager({
|
||||
...audioDeviceManager,
|
||||
currentVolume: e
|
||||
})
|
||||
agora.setRecordingDeviceVolume(e)
|
||||
}} style={{ flexGrow: 1 }} />
|
||||
</div> :
|
||||
<div>
|
||||
<span>视频预览：</span>
|
||||
<video id='startPreview'
|
||||
poster={ImageUrl.error}
|
||||
style={{ width: '226px', height: '136px', backgroundColor: 'black' }}>
|
||||
</video>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
{stepsStatus ? <div>
|
||||
<span>您可以对着麦克风说话，试听表克风的输入质量</span>
|
||||
<div>
|
||||
<img src={ImageUrl.icon33} alt="" />
|
||||
<div>
|
||||
<img src={ImageUrl.icon34} alt="" />
|
||||
<div id='recordingDeviceTest'>
|
||||
<img src={ImageUrl.icon35} alt="" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> : null}
|
||||
</div>
|
||||
<div>
|
||||
{stepsStatus ? <div>
|
||||
<Button type="primary" className='m-ant-btn' onClick={() => {
|
||||
let audio = document.getElementById('startAudio') as any;
|
||||
if (audio.srcObject) {
|
||||
const tracks = audio.srcObject.getTracks();
|
||||
tracks.forEach((track: any) => {
|
||||
track.stop();
|
||||
});
|
||||
audio.srcObject = null;
|
||||
}
|
||||
setStepsStatus(false)
|
||||
agora.startPreview().then((res: boolean) => {
|
||||
setIsVideoLoad(res)
|
||||
})
|
||||
}}>下一步</Button>
|
||||
</div> :
|
||||
<div>
|
||||
<Button
|
||||
type="primary"
|
||||
style={{ backgroundColor: '#31353A', marginRight: '14px' }}
|
||||
onClick={() => {
|
||||
if (isVideoLoad) {
|
||||
setIsVideoLoad(false)
|
||||
agora.stopAudioDeviceLoopbackTest()
|
||||
setStepsStatus(true)
|
||||
agora.startRecordingDeviceTest(200)
|
||||
} else {
|
||||
message.error('视频加载中！')
|
||||
}
|
||||
}}
|
||||
>上一步</Button>
|
||||
<Button
|
||||
type="primary"
|
||||
className='m-ant-btn'
|
||||
onClick={() => {
|
||||
if (isVideoLoad) {
|
||||
agora.stopAudioDeviceLoopbackTest()
|
||||
agora.setRecordingDeviceVolume(audioDeviceManager.currentVolume)
|
||||
setIsStupWizard(false)
|
||||
setStepsStatus(true)
|
||||
setIsVideoLoad(false)
|
||||
} else {
|
||||
message.error('视频加载中！')
|
||||
}
|
||||
}}
|
||||
>完成
|
||||
</Button>
|
||||
</div>}
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
<StupWizard ref={stupWizardRef} />
|
||||
<Modal
|
||||
title="共享文件"
|
||||
open={isSharedFilesModel}
|
||||
|
|
@ -703,7 +610,11 @@ const Meeting: React.FC = () => {
|
|||
<VerticalAlignBottomOutlined title='下载' style={{ color: '#5575F2', cursor: 'pointer' }} onClick={() => {
|
||||
GetRoomFileDwUrl(item.fileUrl, item.id).then(res => {
|
||||
if (res.code === 200) {
|
||||
window.electron.dwFile(res.data)
|
||||
const downloadLink = document.createElement("a");
|
||||
downloadLink.href = res.data;
|
||||
downloadLink.download = item.fileName;
|
||||
downloadLink.click();
|
||||
getRoomFile()
|
||||
}
|
||||
})
|
||||
}} />
|
||||
|
|
@ -730,16 +641,16 @@ const Meeting: React.FC = () => {
|
|||
)
|
||||
}
|
||||
|
||||
const meetingContentUser = () => {
|
||||
const meetingContentUser = (item: any) => {
|
||||
return (
|
||||
<>
|
||||
<div className={styles.meetingContentUser}>
|
||||
<div className={styles.meetingContentUserRole}>
|
||||
{item.roleId === '1' ? <div className={styles.meetingContentUserRole}>
|
||||
<img src={ImageUrl.icon32} alt="" />
|
||||
</div>
|
||||
</div> : null}
|
||||
<div className={styles.meetingContentUserName}>
|
||||
<img src={ImageUrl.icon22} alt="" />
|
||||
<span>张大龙</span>
|
||||
<span>{item.userName}</span>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
|
|
|
|||
|
|
@ -4,30 +4,9 @@ export interface IElectronAPI {
|
|||
setViewStatus: (status: 'quit' | 'maximize' | 'minimize' | 'unmaximize') => void;
|
||||
getIsMaximized: () => Promise<boolean>;
|
||||
setWriteText: (text: string) => void;
|
||||
dwFile: (url: string) => void;
|
||||
}
|
||||
export interface Agora {
|
||||
getDesktopCapturerVideo: () => Promise<void>;
|
||||
setDesktopCapturerVideo: (data: any) => void;
|
||||
setCameraCapture: (data: any) => void;
|
||||
getAudioMediaList: () => { currentDevice: any, currentDevices: any, currentVolume: number };
|
||||
setRecordingDeviceVolume: (volume: number) => void;
|
||||
setRecordingDevice: (deviceId: string) => void;
|
||||
setJoinChannel: (data: { channelId: string, userid: string, token: string }) => Promise<void>;
|
||||
getVideoId: () => string;
|
||||
startRecordingDeviceTest: (indicationInterval: number) => void;
|
||||
stopAudioDeviceLoopbackTest: () => void;
|
||||
startPreview: () => Promise<boolean>;
|
||||
startRecording: () => void;
|
||||
stopRecording: () => void;
|
||||
leaveChannel: () => void;
|
||||
stopScreenCapture: () => void;
|
||||
muteLocalAudioStream: (mute: boolean) => void;
|
||||
muteLocalVideoStream: (mute: boolean) => void;
|
||||
}
|
||||
declare global {
|
||||
interface Window {
|
||||
electron: IElectronAPI;
|
||||
agora: Agora
|
||||
}
|
||||
}
|
||||
|
|
@ -1,3 +1,5 @@
|
|||
import storage from "./storage";
|
||||
|
||||
const {
|
||||
createAgoraRtcEngine,
|
||||
ClientRoleType,
|
||||
|
|
@ -10,44 +12,40 @@ const {
|
|||
MediaRecorderStreamType
|
||||
} = require("agora-electron-sdk");
|
||||
const { message } = require('antd');
|
||||
const rtcEngine = createAgoraRtcEngine();
|
||||
const option: any = {
|
||||
appId: 'dcfc466a6ecb4a1f972630065dfb1e75',
|
||||
token: '',
|
||||
channelId: '',
|
||||
userid: '',
|
||||
}
|
||||
let iMediaRecorder: any = '';
|
||||
let rtcEngine: any = '';
|
||||
|
||||
const agora = {
|
||||
// 初始化
|
||||
init: () => {
|
||||
rtcEngine = createAgoraRtcEngine();
|
||||
rtcEngine.initialize({
|
||||
appId: option.appId,
|
||||
});
|
||||
|
||||
rtcEngine.registerEventHandler({
|
||||
// 监听本地用户加入频道事件
|
||||
onJoinChannelSuccess: ({ channelId, localUid }: any, elapsed: any) => {
|
||||
console.log({ channelId, localUid }, elapsed, '加入房间');
|
||||
// 本地用户加入频道后，设置本地视频窗口
|
||||
rtcEngine.setupLocalVideo({
|
||||
renderMode: RenderModeType.RenderModeFit,
|
||||
// sourceType: VideoSourceType.VideoSourceScreen,
|
||||
sourceType: VideoSourceType.VideoSourceCameraPrimary,
|
||||
uid: localUid,
|
||||
view: agora.getDom(),
|
||||
setupMode: VideoViewSetupMode.VideoViewSetupAdd,
|
||||
});
|
||||
onJoinChannelSuccess: (info: any, elapsed: any) => {
|
||||
storage.setItem('isJoin', true)
|
||||
},
|
||||
// 监听远端用户加入频道事件
|
||||
onUserJoined: ({ channelId, localUid }: any, remoteUid: any, elapsed: any) => {
|
||||
console.log({ channelId, localUid }, remoteUid, '远端加入频道');
|
||||
onUserJoined: (info: any, remoteUid: any, elapsed: any) => {
|
||||
console.log(info, remoteUid, '远端加入频道');
|
||||
// 远端用户加入频道后，设置远端视频窗口
|
||||
rtcEngine.setupRemoteVideo(
|
||||
{
|
||||
renderMode: RenderModeType.RenderModeFit,
|
||||
sourceType: VideoSourceType.VideoSourceRemote,
|
||||
uid: remoteUid,
|
||||
view: agora.getDom(),
|
||||
view: '',
|
||||
setupMode: VideoViewSetupMode.VideoViewSetupAdd,
|
||||
},
|
||||
{ channelId },
|
||||
{ channelId: info.channelId },
|
||||
);
|
||||
|
||||
},
|
||||
|
|
@ -60,7 +58,7 @@ rtcEngine.registerEventHandler({
|
|||
renderMode: RenderModeType.RenderModeFit,
|
||||
sourceType: VideoSourceType.VideoSourceRemote,
|
||||
uid: remoteUid,
|
||||
view: agora.getDom(),
|
||||
view: '',
|
||||
setupMode: VideoViewSetupMode.VideoViewSetupRemove,
|
||||
},
|
||||
);
|
||||
|
|
@ -86,13 +84,33 @@ rtcEngine.registerEventHandler({
|
|||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
// 渲染视频
|
||||
setVideo: (localUid: number, view: any, channelId: string) => {
|
||||
console.log(view, localUid, channelId);
|
||||
if (option.userid === localUid) {
|
||||
rtcEngine.setupLocalVideo({
|
||||
renderMode: RenderModeType.RenderModeFit,
|
||||
// sourceType: VideoSourceType.VideoSourceScreen,
|
||||
sourceType: VideoSourceType.VideoSourceCameraPrimary,
|
||||
uid: localUid,
|
||||
view,
|
||||
setupMode: VideoViewSetupMode.VideoViewSetupAdd,
|
||||
});
|
||||
} else {
|
||||
rtcEngine.setupRemoteVideo(
|
||||
{
|
||||
renderMode: RenderModeType.RenderModeFit,
|
||||
sourceType: VideoSourceType.VideoSourceRemote,
|
||||
uid: localUid,
|
||||
view,
|
||||
setupMode: VideoViewSetupMode.VideoViewSetupAdd,
|
||||
},
|
||||
{ channelId },
|
||||
);
|
||||
}
|
||||
|
||||
let videoID: string = '';
|
||||
let iMediaRecorder: any = '';
|
||||
|
||||
const agora = {
|
||||
getDom: () => {
|
||||
return document.getElementById('video-1');
|
||||
},
|
||||
// 离开频道
|
||||
leaveChannel: () => {
|
||||
|
|
@ -101,6 +119,8 @@ const agora = {
|
|||
stopAllEffect: true,
|
||||
stopMicrophoneRecording: true,
|
||||
})
|
||||
rtcEngine.release()
|
||||
storage.setItem('isJoin', false)
|
||||
},
|
||||
// 加入频道
|
||||
joinChannel: (bool: boolean) => {
|
||||
|
|
@ -211,12 +231,20 @@ const agora = {
|
|||
});
|
||||
},
|
||||
// 获取音频设备列表
|
||||
getAudioMediaList: () => {
|
||||
getAudioMediaList: (bool: boolean) => {
|
||||
if (bool) {
|
||||
return {
|
||||
currentDevices: rtcEngine.getAudioDeviceManager().enumeratePlaybackDevices(),
|
||||
currentDevice: rtcEngine.getAudioDeviceManager().getPlaybackDefaultDevice(),
|
||||
currentVolume: 100,
|
||||
}
|
||||
} else {
|
||||
return {
|
||||
currentDevice: rtcEngine.getAudioDeviceManager().getRecordingDefaultDevice(),
|
||||
currentDevices: rtcEngine.getAudioDeviceManager().enumerateRecordingDevices(),
|
||||
currentDevice: rtcEngine.getAudioDeviceManager().getRecordingDefaultDevice(),
|
||||
currentVolume: rtcEngine.getAudioDeviceManager().getRecordingDeviceVolume()
|
||||
}
|
||||
}
|
||||
},
|
||||
// 设置音频设备音量
|
||||
setRecordingDeviceVolume: (volume: number) => {
|
||||
|
|
@ -226,10 +254,26 @@ const agora = {
|
|||
setRecordingDevice: (deviceId: string) => {
|
||||
rtcEngine.getAudioDeviceManager().setRecordingDevice(deviceId)
|
||||
},
|
||||
// 启动音频播放设备测试。
|
||||
startPlaybackDeviceTest: () => {
|
||||
rtcEngine.getAudioDeviceManager().startPlaybackDeviceTest('https://wgshare.oss-cn-chengdu.aliyuncs.com/TestAudio.mp3')
|
||||
},
|
||||
// 停止音频播放设备测试。
|
||||
stopPlaybackDeviceTest: () => {
|
||||
rtcEngine.getAudioDeviceManager().stopPlaybackDeviceTest()
|
||||
},
|
||||
// 设置播放设备音量
|
||||
setPlaybackDeviceVolume: (volume: number) => {
|
||||
rtcEngine.getAudioDeviceManager().setPlaybackDeviceVolume(volume)
|
||||
},
|
||||
// 指定播放设备
|
||||
setPlaybackDevice: (deviceId: string) => {
|
||||
rtcEngine.getAudioDeviceManager().setPlaybackDevice(deviceId)
|
||||
},
|
||||
// 摄像头采集
|
||||
setCameraCapture: () => {
|
||||
rtcEngine.startCameraCapture(VideoSourceType.VideoSourceCamera, {})
|
||||
// joinChannel(false)
|
||||
agora.joinChannel(false)
|
||||
},
|
||||
// 加入频道
|
||||
setJoinChannel: (data: any) => {
|
||||
|
|
@ -237,7 +281,7 @@ const agora = {
|
|||
option.channelId = data.channelId;
|
||||
option.userid = Number(data.userid);
|
||||
rtcEngine.startCameraCapture(VideoSourceType.VideoSourceCamera, {})
|
||||
// joinChannel(false)
|
||||
agora.joinChannel(false)
|
||||
},
|
||||
// 取消或恢复发布本地音频流
|
||||
muteLocalAudioStream: (mute: any) => {
|
||||
|
|
@ -247,18 +291,13 @@ const agora = {
|
|||
muteLocalVideoStream: (mute: any) => {
|
||||
rtcEngine.muteLocalVideoStream(mute)
|
||||
},
|
||||
// 获取当前生成的视频id
|
||||
getVideoId: () => {
|
||||
return videoID;
|
||||
},
|
||||
// 桌面捕获音频和视频的媒体源的信息
|
||||
getDesktopCapturerVideo: async () => {
|
||||
return rtcEngine.getScreenCaptureSources({ width: 300, height: 300 }, { width: 300, height: 300 }, true);
|
||||
},
|
||||
|
||||
// 共享屏幕采集
|
||||
setDesktopCapturerVideo: (targetSource: any) => {
|
||||
// stopScreenCapture()
|
||||
agora.stopScreenCapture()
|
||||
if (
|
||||
targetSource.type ===
|
||||
ScreenCaptureSourceType.ScreencapturesourcetypeScreen
|
||||
|
|
@ -283,7 +322,7 @@ const agora = {
|
|||
}
|
||||
);
|
||||
}
|
||||
// joinChannel(true)
|
||||
agora.joinChannel(true)
|
||||
},
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -43,6 +43,7 @@ import icon32 from '@/assets/icon32.png'
|
|||
import icon33 from '@/assets/icon33.png'
|
||||
import icon34 from '@/assets/icon34.png'
|
||||
import icon35 from '@/assets/icon35.png'
|
||||
import icon36 from '@/assets/icon36.png'
|
||||
export default {
|
||||
avatar,
|
||||
error,
|
||||
|
|
@ -89,4 +90,5 @@ export default {
|
|||
icon33,
|
||||
icon34,
|
||||
icon35,
|
||||
icon36,
|
||||
}
|
||||
|
|
@ -21,7 +21,12 @@ export const onSignalr = (callBack: Function) => {
|
|||
callBack(message)
|
||||
});
|
||||
}
|
||||
export const onInvoke = (message: string) => {
|
||||
connection.invoke("GetUserId", message)
|
||||
export const onInvoke = (str: string, data: any) => {
|
||||
switch (str) {
|
||||
case 'joinChannel':
|
||||
case 'levelChannel':
|
||||
connection.invoke(str, data.roomNum)
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue