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

yangjie #28

Merged
yangqiang merged 32 commits from yangjie into master 2024-10-29 15:15:48 +08:00
Conversation 0 Commits 32 Files Changed 23 +510 -7
15 changed files with 510 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit fbf40ccf41 - Show all commits

4
main.js
View File

@ -170,6 +170,10 @@ app.on('ready', () => {
ipcMain.handle('getIsMaximized', () => {
return mainWindow.isMaximized();
});
// 获取app路径
ipcMain.handle('getAppPath', () => {
return app.getAppPath();
});
// 获取版本号
ipcMain.handle('getVersion', () => {
return app.getVersion();

4
preload.js
View File

@ -17,6 +17,10 @@ window.electron = {
getIsMaximized: () => {
return ipcRenderer.invoke('getIsMaximized')
},
// 获取app路径
getAppPath: () => {
return ipcRenderer.invoke('getAppPath')
},
// 获取版本号
getVersion: () => {
return ipcRenderer.invoke('getVersion')

23
src/App.tsx
View File

@ -143,6 +143,29 @@ const App: React.FC = () => {
isAINoiseReduction: true, //是否开启ai降噪
aINoiseReduction: 1, // 降噪模式
isRecordingTips: true, //是否开启录制提示
beautyEffect: { //美颜效果
isBeautyEffect: false, //是否打开美颜
lighteningContrastLevel: 1, //对比度
lighteningLevel: 0, //美白程度
smoothnessLevel: 0, //磨皮程度
rednessLevel: 0, //红润度
sharpnessLevel: 0, //锐化程度
},
colorEnhancement: { //色彩增强
isColorEnhancement: false, //是否打开色彩增强
strengthLevel: 0.5, //色彩增强程度
skinProtectLevel: 1, //肤色保护程度
},
darkLightEnhancement: { //暗光增强
isDarkLightEnhancement: false, //是否打开暗光增强
level: 0, //暗光增强等级
mode: 0, //暗光增强模式
},
virtualBackground: { //虚拟背景
isVirtualBackground: false, //是否打开虚拟背景
color: '0xFFFFFF', // 纯色
sourceIndex: '', // 背景图下标
},
}))
}
if (!storage.getItem('openChildWindow')) {

BIN
src/assets/virtualBackground/1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.4 MiB

BIN
src/assets/virtualBackground/2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 712 KiB

BIN
src/assets/virtualBackground/3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 838 KiB

BIN
src/assets/virtualBackground/4.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 600 KiB

BIN
src/assets/virtualBackground/5.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 921 KiB

BIN
src/assets/virtualBackground/6.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 MiB

81
src/components/StupWizard/index.module.scss
View File

@ -1,6 +1,6 @@
// 设置向导
.stupWizard {
height: 70vh;
height: 90vh;
display: flex;
.stupWizardLeft {
@ -68,6 +68,10 @@
}
.videoComponents {
>div {
margin-bottom: 10px;
}
>div:nth-child(1) {
width: 100%;
height: 296px;
@ -88,7 +92,6 @@
>div:nth-child(2) {
width: 100%;
margin-top: 10px;
display: flex;
align-items: center;
@ -96,6 +99,80 @@
color: white;
}
}
>div:nth-child(3) {
>span {
color: white;
}
>div {
display: flex;
flex-wrap: wrap;
>div {
border: 1px transparent solid;
width: calc(100% /6);
padding: 5px;
box-sizing: border-box;
cursor: pointer;
>div {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
>label {
color: white;
background-color: rgba(0, 0, 0, 0.5);
}
>input {
position: absolute;
visibility: hidden;
}
}
>img {
width: 100%;
}
}
.active {
border: 1px white solid;
}
}
}
>div:nth-child(4) {
>div {
margin-bottom: 20px;
>span {
color: white;
}
>div {
margin-left: 40px;
flex-grow: 1;
>div {
display: flex;
align-items: center;
>span {
color: white;
white-space: nowrap;
}
>div {
flex-grow: 1;
margin-left: 10px;
}
}
}
}
}
}
.audioComponents {

335
src/components/StupWizard/index.tsx
View File

@ -9,7 +9,7 @@ import path from 'path';
const fs = require('fs').promises;
const { exec } = require('child_process');
const StupWizard = forwardRef((props: any, ref: any) => {
const StupWizard = forwardRef((_props: any, ref: any) => {
useImperativeHandle(ref, () => ({
changeModal: (index: number = 0) => {
if (location.hash.indexOf('/meeting') === -1) {
@ -147,10 +147,107 @@ const VideoComponents = () => {
list: [],
item: null,
});
const [virtualBackgroundImg] = useState([
ImageUrl.virtualBackground1,
ImageUrl.virtualBackground2,
ImageUrl.virtualBackground3,
ImageUrl.virtualBackground4,
ImageUrl.virtualBackground5,
ImageUrl.virtualBackground6,
]);
const [beautyEffect, setBeautyEffect] = useState<any>({
isBeautyEffect: false, //是否打开美颜
lighteningContrastLevel: 1, //对比度
lighteningLevel: 0, //美白程度
smoothnessLevel: 0, //磨皮程度
rednessLevel: 0, //红润度
sharpnessLevel: 0, //锐化程度
});
const [colorEnhancement, setColorEnhancement] = useState<any>({
isColorEnhancement: false, //是否打开色彩增强
strengthLevel: 0.5, //色彩增强程度
skinProtectLevel: 1, //肤色保护程度
});
const [darkLightEnhancement, setDarkLightEnhancement] = useState<any>({
isDarkLightEnhancement: false, //是否打开暗光增强
level: 0, //暗光增强等级
mode: 0, //暗光增强模式
});
const [virtualBackground, setVirtualBackground] = useState<any>({
isVirtualBackground: false, //是否打开虚拟背景
color: '0xFFFFFF', // 纯色
sourceIndex: '', // 背景图下标
});
const setting = JSON.parse(storage.getItem('setting') as string)
useEffect(() => {
if (setting.beautyEffect) {
setBeautyEffect(setting.beautyEffect)
} else {
setting.beautyEffect = {
isBeautyEffect: false, //是否打开美颜
lighteningContrastLevel: 1, //对比度
lighteningLevel: 0, //美白程度
smoothnessLevel: 0, //磨皮程度
rednessLevel: 0, //红润度
sharpnessLevel: 0, //锐化程度
}
}
if (setting.colorEnhancement) {
setColorEnhancement(setting.colorEnhancement)
} else {
setting.colorEnhancement = {
isColorEnhancement: false, //是否打开色彩增强
strengthLevel: 0.5, //色彩增强程度
skinProtectLevel: 1, //肤色保护程度
}
}
if (setting.darkLightEnhancement) {
setDarkLightEnhancement(setting.darkLightEnhancement)
} else {
setting.darkLightEnhancement = {
isDarkLightEnhancement: false, //是否打开暗光增强
level: 0, //暗光增强等级
mode: 0, //暗光增强模式
}
}
if (setting.virtualBackground) {
setVirtualBackground(setting.virtualBackground)
} else {
setting.darkLightEnhancement = {
isVirtualBackground: false, //是否打开虚拟背景
color: '0xFFFFFF', // 纯色
sourceIndex: '', // 背景图下标
}
}
storage.setItem('setting', JSON.stringify(setting))
getVideoDeviceList()
}, []);
useEffect(() => {
agora.setBeautyEffectOptions(beautyEffect.isBeautyEffect, beautyEffect)
}, [beautyEffect]);
useEffect(() => {
agora.setColorEnhanceOptions(colorEnhancement.isColorEnhancement, colorEnhancement)
}, [colorEnhancement]);
useEffect(() => {
agora.setLowlightEnhanceOptions(darkLightEnhancement.isDarkLightEnhancement, darkLightEnhancement)
}, [darkLightEnhancement]);
useEffect(() => {
if (typeof virtualBackground.sourceIndex === 'number') {
window.electron.getAppPath().then((res: string) => {
const imagePath = path.join(res, 'src', 'assets', 'virtualBackground', `${virtualBackground.sourceIndex + 1}.png`);
agora.enableVirtualBackground(virtualBackground.isVirtualBackground, {
source: imagePath,
background_source_type: 2,
color: Number(virtualBackground.color),
})
})
} else {
agora.enableVirtualBackground(virtualBackground.isVirtualBackground, {
background_source_type: 1,
color: Number(virtualBackground.color),
})
}
}, [virtualBackground]);
const getVideoDeviceList = async (): Promise<void> => {
const userInfo = JSON.parse(storage.getItem('user') as string)
agora.getVideoDeviceManager().then(async (res) => {
@ -227,6 +324,242 @@ const VideoComponents = () => {
}} />
</div>
<div>
<span>
<Checkbox style={{ marginRight: '10px' }} checked={virtualBackground.isVirtualBackground} onChange={(e) => {
setting.virtualBackground.isVirtualBackground = e.target.checked;
storage.setItem('setting', JSON.stringify(setting))
setVirtualBackground({
...virtualBackground,
isVirtualBackground: e.target.checked
})
}}>
</Checkbox>
虚拟背景
</span>
<div>
<div className={virtualBackground.sourceIndex === '' ? styles.active : ''}>
<div style={{ backgroundColor: '#' + Number(virtualBackground.color)?.toString(16).padStart(6, '0') }} onClick={() => {
setting.virtualBackground.sourceIndex = '';
storage.setItem('setting', JSON.stringify(setting))
setVirtualBackground({
...virtualBackground,
sourceIndex: ''
})
}}>
<input type="color" name="" id="color-select" onBlur={(e) => {
let hexInt = parseInt('0x' + e.target.value.split('#')[1], 16)
setting.virtualBackground.color = hexInt
storage.setItem('setting', JSON.stringify(setting))
setVirtualBackground({
...virtualBackground,
color: hexInt
})
}} />
<label htmlFor='color-select'>(纯色)更改颜色</label>
</div>
</div>
{
virtualBackgroundImg.map((item, index) => {
return (
<div key={index} className={virtualBackground.sourceIndex === index ? styles.active : ''} onClick={() => {
setting.virtualBackground.sourceIndex = index;
storage.setItem('setting', JSON.stringify(setting))
setVirtualBackground({
...virtualBackground,
sourceIndex: index
})
}}>
<img src={item} alt="" />
</div>
)
})
}
</div>
</div>
<div>
<div>
<span>
<Checkbox style={{ marginRight: '10px' }} checked={beautyEffect.isBeautyEffect} onChange={(e) => {
setting.beautyEffect.isBeautyEffect = e.target.checked;
storage.setItem('setting', JSON.stringify(setting))
setBeautyEffect({
...beautyEffect,
isBeautyEffect: e.target.checked
})
}}>
</Checkbox>
美颜效果
</span>
<div>
<div>
<span>对比度</span>
<div>
<Radio.Group disabled={!beautyEffect.isBeautyEffect} onChange={(e: any) => {
setting.beautyEffect.lighteningContrastLevel = e.target.value;
storage.setItem('setting', JSON.stringify(setting))
setBeautyEffect({
...beautyEffect,
lighteningContrastLevel: e.target.value
})
}} style={{ flexShrink: 0, margin: '10px 0' }} value={beautyEffect.lighteningContrastLevel}>
<Radio value={0}>低对比度</Radio>
<Radio value={1}>正常对比度</Radio>
<Radio value={2}>高对比度</Radio>
</Radio.Group>
</div>
</div>
<div>
<span>美白程度</span>
<div>
<Slider value={beautyEffect.lighteningLevel} step={0.1} style={{ width: '100%' }} max={1}
onChange={async (e) => {
setting.beautyEffect.lighteningLevel = e
storage.setItem('setting', JSON.stringify(setting))
setBeautyEffect({
...beautyEffect,
lighteningLevel: e
})
}} disabled={!beautyEffect.isBeautyEffect} />
</div>
</div>
<div>
<span>磨皮程度</span>
<div>
<Slider value={beautyEffect.smoothnessLevel} step={0.1} style={{ width: '100%' }} max={1}
onChange={async (e) => {
setting.beautyEffect.smoothnessLevel = e
storage.setItem('setting', JSON.stringify(setting))
setBeautyEffect({
...beautyEffect,
smoothnessLevel: e
})
}} disabled={!beautyEffect.isBeautyEffect} />
</div>
</div>
<div>
<span>红润度</span>
<div>
<Slider value={beautyEffect.rednessLevel} step={0.1} style={{ width: '100%' }} max={1}
onChange={async (e) => {
setting.beautyEffect.rednessLevel = e
storage.setItem('setting', JSON.stringify(setting))
setBeautyEffect({
...beautyEffect,
rednessLevel: e
})
}} disabled={!beautyEffect.isBeautyEffect} />
</div>
</div>
<div>
<span>锐化程度</span>
<div>
<Slider value={beautyEffect.sharpnessLevel} step={0.1} style={{ width: '100%' }} max={1}
onChange={async (e) => {
setting.beautyEffect.sharpnessLevel = e
storage.setItem('setting', JSON.stringify(setting))
setBeautyEffect({
...beautyEffect,
sharpnessLevel: e
})
}} disabled={!beautyEffect.isBeautyEffect} />
</div>
</div>
</div>
</div>
<div>
<span>
<Checkbox style={{ marginRight: '10px' }} checked={colorEnhancement.isColorEnhancement} onChange={(e) => {
setting.colorEnhancement.isColorEnhancement = e.target.checked;
storage.setItem('setting', JSON.stringify(setting))
setColorEnhancement({
...colorEnhancement,
isColorEnhancement: e.target.checked
})
}}>
</Checkbox>
色彩增强
</span>
<div>
<div>
<span>色彩增强程度</span>
<div>
<Slider value={colorEnhancement.strengthLevel} step={0.1} style={{ width: '100%' }} max={1}
onChange={async (e) => {
setting.colorEnhancement.strengthLevel = e
storage.setItem('setting', JSON.stringify(setting))
setColorEnhancement({
...colorEnhancement,
strengthLevel: e
})
}} disabled={!colorEnhancement.isColorEnhancement} />
</div>
</div>
<div>
<span>肤色保护程度</span>
<div>
<Slider value={colorEnhancement.skinProtectLevel} step={0.1} style={{ width: '100%' }} max={1}
onChange={async (e) => {
setting.colorEnhancement.skinProtectLevel = e
storage.setItem('setting', JSON.stringify(setting))
setColorEnhancement({
...colorEnhancement,
skinProtectLevel: e
})
}} disabled={!colorEnhancement.isColorEnhancement} />
</div>
</div>
</div>
</div>
<div>
<span>
<Checkbox style={{ marginRight: '10px' }} checked={darkLightEnhancement.isDarkLightEnhancement} onChange={(e) => {
setting.darkLightEnhancement.isDarkLightEnhancement = e.target.checked;
storage.setItem('setting', JSON.stringify(setting))
setDarkLightEnhancement({
...darkLightEnhancement,
isDarkLightEnhancement: e.target.checked
})
}}>
</Checkbox>
暗光增强
</span>
<div>
<div>
<span>暗光增强等级</span>
<div>
<Radio.Group disabled={!darkLightEnhancement.isDarkLightEnhancement} onChange={(e: any) => {
setting.darkLightEnhancement.level = e.target.value;
storage.setItem('setting', JSON.stringify(setting))
setDarkLightEnhancement({
...darkLightEnhancement,
level: e.target.value
})
}} style={{ flexShrink: 0, margin: '10px 0' }} value={darkLightEnhancement.level}>
<Radio value={0}>(默认)优先画质的暗光增强，会处理视频图像的亮度、细节、噪声，消耗的性能适中，处理速度适中，综合画质最优。</Radio>
<Radio value={1}>优先性能的暗光增强，会处理视频图像的亮度、细节，消耗的性能较少，处理速度较快。</Radio>
</Radio.Group>
</div>
</div>
<div>
<span>暗光增强模式</span>
<div>
<Radio.Group disabled={!darkLightEnhancement.isDarkLightEnhancement} onChange={(e: any) => {
setting.darkLightEnhancement.mode = e.target.value;
storage.setItem('setting', JSON.stringify(setting))
setDarkLightEnhancement({
...darkLightEnhancement,
mode: e.target.value
})
}} style={{ flexShrink: 0, margin: '10px 0' }} value={darkLightEnhancement.mode}>
<Radio value={0}>(默认)自动模式。SDK 会根据环境光亮度自动开启或关闭暗光增强功能，以适时补光和防止过曝。</Radio>
<Radio value={1}>手动模式。用户需手动开启或关闭暗光增强功能。</Radio>
</Radio.Group>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</>

1
src/render.d.ts vendored
View File

@ -4,6 +4,7 @@ export interface IElectronAPI {
getWindowSize: () => any;
setViewStatus: (status: 'quit' | 'maximize' | 'minimize' | 'unmaximize' | 'hide' | 'show') => void;
getIsMaximized: () => Promise<boolean>;
getAppPath: () => Promise<string>;
setWriteText: (text: string) => void;
onQuit: (callBack: Function) => void;
onUpdate: (callBack: Function) => void;

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

@ -17,11 +17,16 @@ import {
ConnectionStateType,
ConnectionChangedReasonType,
LocalVideoStreamReason,
LocalVideoStreamState
LocalVideoStreamState,
BeautyOptions,
ColorEnhanceOptions,
LowlightEnhanceOptions,
VirtualBackgroundSource
} from "agora-electron-sdk";
import { GetRoomRtcToken, GetAgoraConf } from "@/api/Home/Index";
import { storage } from '@/utils';
import { role } from "@/config/role";
import path from "path";
const option: any = {
appId: '',
token: '',
@ -110,6 +115,25 @@ export const agora = {
if (settingData.ecordingDeviceId) agora.setRecordingDevice(settingData.ecordingDeviceId) // 设置音频采集设备
if (settingData.ecordingVolume) agora.setRecordingDeviceVolume(settingData.ecordingVolume) // 设置音频设备音量
if (settingData.isAINoiseReduction) agora.setAINSMode(settingData.isAINoiseReduction, settingData.aINoiseReduction) // 设置ai降噪
agora.setBeautyEffectOptions(settingData.beautyEffect.isBeautyEffect, settingData.beautyEffect)
agora.setColorEnhanceOptions(settingData.colorEnhancement.isColorEnhancement, settingData.colorEnhancement)
agora.setLowlightEnhanceOptions(settingData.darkLightEnhancement.isDarkLightEnhancement, settingData.darkLightEnhancement)
console.log(settingData);
if (typeof settingData.virtualBackground.sourceIndex === 'number') {
window.electron.getAppPath().then((res: string) => {
const imagePath = path.join(res, 'src', 'assets', 'virtualBackground', `${settingData.virtualBackground.sourceIndex + 1}.png`);
agora.enableVirtualBackground(settingData.virtualBackground.isVirtualBackground, {
source: imagePath,
background_source_type: 2,
color: Number(settingData.virtualBackground.color),
})
})
} else {
agora.enableVirtualBackground(settingData.virtualBackground.isVirtualBackground, {
background_source_type: 1,
color: Number(settingData.virtualBackground.color),
})
}
}, 1000);
},
// 事件回调
@ -512,5 +536,22 @@ export const agora = {
stopRecordingDeviceTest: async () => {
await rtcEngine.getAudioDeviceManager().stopRecordingDeviceTest()
},
// 设置美颜效果
setBeautyEffectOptions: async (enabled: boolean, options: BeautyOptions) => {
await rtcEngine.setBeautyEffectOptions(enabled, options)
},
// 设置色彩增强
setColorEnhanceOptions: async (enabled: boolean, options: ColorEnhanceOptions) => {
await rtcEngine.setColorEnhanceOptions(enabled, options)
},
// 设置暗光增强
setLowlightEnhanceOptions: async (enabled: boolean, options: LowlightEnhanceOptions) => {
await rtcEngine.setLowlightEnhanceOptions(enabled, options)
},
// 开启/关闭虚拟背景。
enableVirtualBackground: async (enabled: boolean, backgroundSource: VirtualBackgroundSource) => {
await rtcEngine.enableVirtualBackground(enabled, backgroundSource, {
greenCapacity: 1
})
},
}

12
src/utils/package/imageUrl.ts
View File

@ -73,6 +73,12 @@ import icon48Select from '@/assets/icon48-select.png'
import icon49 from '@/assets/icon49.png'
import icon50 from '@/assets/icon50.png'
import icon51 from '@/assets/icon51.png'
import virtualBackground1 from '@/assets/virtualBackground/1.png'
import virtualBackground2 from '@/assets/virtualBackground/2.png'
import virtualBackground3 from '@/assets/virtualBackground/3.png'
import virtualBackground4 from '@/assets/virtualBackground/4.png'
import virtualBackground5 from '@/assets/virtualBackground/5.png'
import virtualBackground6 from '@/assets/virtualBackground/6.png'
export default {
loading,
icon,
@ -149,4 +155,10 @@ export default {
icon49,
icon50,
icon51,
virtualBackground1,
virtualBackground2,
virtualBackground3,
virtualBackground4,
virtualBackground5,
virtualBackground6,
}

12
vite.config.ts
View File

@ -72,7 +72,11 @@ export default defineConfig({
ConnectionStateType,
ConnectionChangedReasonType,
LocalVideoStreamState,
LocalVideoStreamReason
LocalVideoStreamReason,
BeautyOptions,
ColorEnhanceOptions,
LowlightEnhanceOptions,
VirtualBackgroundSource
} = require("agora-electron-sdk")
export {
createAgoraRtcEngine,
@ -93,7 +97,11 @@ export default defineConfig({
ConnectionStateType,
ConnectionChangedReasonType,
LocalVideoStreamState,
LocalVideoStreamReason
LocalVideoStreamReason,
BeautyOptions,
ColorEnhanceOptions,
LowlightEnhanceOptions,
VirtualBackgroundSource
}
`,
})