【山大会议】应用设置模块

序言

在本篇文章中，我将介绍我对山大会议客户端的设置页面所作的设计。

整体结构

整个设置模块被封装在一个 Setting 模块中，在客户端内将以 Modal 模态屏的形式展示给用户。其整体结构被划分为四个部分：

• 通用设置
• 音视频设备
• 与会状态
• 关于

每个部分都被细分为独立的模块，便于维护。

通用设置

下面先来介绍一下通用设置模块，它负责对应用的某些通用功能进行管理。包括是否需要在启动应用时自动登录，是否允许应用开机时自动启动，以及私人视频通话是否开启加密。
整个通用设置的模块代码如下：

import {
     AlertOutlined, LogoutOutlined, QuestionCircleFilled } from '@ant-design/icons';
import {
     Button, Checkbox, Modal, Tooltip } from 'antd';
import React, {
     useEffect, useState } from 'react';
import {
     getMainContent } from 'Utils/Global';
import {
     eWindow } from 'Utils/Types';

export default function General() {
    
	const [autoLogin, setAutoLogin] = useState(localStorage.getItem('autoLogin') === 'true');
	const [autoOpen, setAutoOpen] = useState(false);
	const [securityPrivateWebrtc, setSecurityPrivateWebrtc] = useState(
		localStorage.getItem('securityPrivateWebrtc') === 'true'
	);
	useEffect(() => {
    
		eWindow.ipc.invoke('GET_OPEN_AFTER_START_STATUS').then((status: boolean) => {
    
			setAutoOpen(status);
		});
	}, []);

	return (
		<>
			<div>
				<Checkbox
					checked={
    autoLogin}
					onChange={
    (e) => {
    
						setAutoLogin(e.target.checked);
						localStorage.setItem('autoLogin', `${
      e.target.checked}`);
					}}>
					自动登录
				</Checkbox>
			</div>
			<div>
				<Checkbox
					checked={
    autoOpen}
					onChange={
    (e) => {
    
						setAutoOpen(e.target.checked);
						eWindow.ipc.send('EXCHANGE_OPEN_AFTER_START_STATUS', e.target.checked);
					}}>
					开机时启动
				</Checkbox>
			</div>
			<div style={
    {
     display: 'flex' }}>
				<Checkbox
					checked={
    securityPrivateWebrtc}
					onChange={
    (e) => {
    
						if (e.target.checked) {
    
							Modal.confirm({
    
								icon: <AlertOutlined />,
								content:
									'开启加密会大幅度提高客户端的CPU占用，请再三确认是否需要开启该功能！',
								cancelText: '暂不开启',
								okText: '确认开启',
								onCancel: () => {
    },
								onOk: () => {
    
									setSecurityPrivateWebrtc(true);
									localStorage.setItem('securityPrivateWebrtc', `${
      true}`);
								},
							});
						} else {
    
							setSecurityPrivateWebrtc(false);
							localStorage.setItem('securityPrivateWebrtc', `${
      false}`);
						}
					}}>
					私人加密通话
				</Checkbox>
				<Tooltip placement='right' overlay={
    '开启加密会大幅度提高CPU占用且不会开启GPU加速'}>
					<QuestionCircleFilled style={
    {
     color: 'gray', transform: 'translateY(25%)' }} />
				</Tooltip>
			</div>
			<div style={
    {
     marginTop: '5px' }}>
				<Button
					icon={
    <LogoutOutlined />}
					danger
					type='primary'
					onClick={
    () => {
    
						Modal.confirm({
    
							title: '注销',
							content: '你确定要退出当前用户登录吗？',
							icon: <LogoutOutlined />,
							cancelText: '取消',
							okText: '确认',
							okButtonProps: {
    
								danger: true,
							},
							onOk: () => {
    
								eWindow.ipc.send('LOG_OUT');
							},
							getContainer: getMainContent,
						});
					}}>
					退出登录
				</Button>
			</div>
		</>
	);
}

其中自动登录功能实现较为简单，我将着重介绍开机自启动功能的实现。

开机时启动

要实现本功能，需要对用户的注册表进行修改。而前端是不具备修改用户注册表的能力的，因此我们需要通过 electron 调用 Node.js 的模块，以实现对用户注册表的操作。
在 electron 的主进程部分，我们为 ipcMain 添加如下事件柄：

const {
     app } = require('electron');
const ipc = require('electron').ipcMain;
const cp = require('child_process');

ipc.on('EXCHANGE_OPEN_AFTER_START_STATUS', (evt, openAtLogin) => {
    
	if (app.isPackaged) {
    
		if (openAtLogin) {
    
			cp.exec(
				`REG ADD HKLM\\SOFTWARE\\WOW6432Node\\Microsoft\\Windows\\CurrentVersion\\Run /v SduMeeting /t REG_SZ /d "${
      process.execPath}" /f`,
				(err) => {
    
					console.log(err);
				}
			);
		} else {
    
			cp.exec(
				`REG DELETE HKLM\\SOFTWARE\\WOW6432Node\\Microsoft\\Windows\\CurrentVersion\\Run /v SduMeeting /f`,
				(err) => {
    
					console.log(err);
				}
			);
		}
	}
});

ipc.handle('GET_OPEN_AFTER_START_STATUS', () => {
    
	return new Promise((resolve) => {
    
		cp.exec(
			`REG QUERY HKLM\\SOFTWARE\\WOW6432Node\\Microsoft\\Windows\\CurrentVersion\\Run /v SduMeeting`,
			(err, stdout, stderr) => {
    
				if (err) {
    
					resolve(false);
				}
				resolve(stdout.indexOf('SduMeeting') >= 0);
			}
		);
	});
});

两个事件柄分别对应着修改开机启动状态以及获取开机启动状态。我们通过调用 Node.js 的 child_process 模块，通过 COMMAND 语句实现了对 Windows 系统上的注册表的增删改查，并以此实现了修改应用开机时自启动的能力。
需要注意的是，在生产环境下，由于修改注册表是需要管理员权限的，因此在打包时需要为应用申请管理员权限。由于我使用的是 electron-packager 进行打包的，打包时需要在打包命令中多添加一条参数 --win32metadata.requested-execution-level=requireAdministrator 。

音视频设备

由于本项目的目的是为了让多个用户在线进行视频会议，因此我们必须要为用户维护音视频设备的处理。为了方便维护，我将音频设备和视频设备拆分成了两个模块进行管理，在它们上面有一个多媒体设备模块负责管理共享的数据（比如当前的多媒体设备列表以及当前正在使用的设备Id）。

多媒体设备（MediaDevices.tsx）

在这个模块中，我们首先需要提取出用户当前设备连接的所有多媒体设备。要实现这一点，可以利用到我们之前的文章 【山大会议】WebRTC基础之用户媒体的获取 中的内容。
我们先来实现一个获取用户多媒体设备的函数：

/** * 获取用户多媒体设备 */
function getUserMediaDevices() {
    
	return new Promise((resolve, reject) => {
    
		try {
    
			navigator.mediaDevices.enumerateDevices().then((devices) => {
    
				const generateDeviceJson = (device: MediaDeviceInfo) => {
    
					const formerIndex = device.label.indexOf(' (');
					const latterIndex = device.label.lastIndexOf(' (');
					const {
     label, webLabel } = ((label, deviceId) => {
    
						switch (deviceId) {
    
							case 'default':
								return {
    
									label: label.replace('Default - ', ''),
									webLabel: label.replace('Default - ', '默认 - '),
								};
							case 'communications':
								return {
    
									label: label.replace('Communications - ', ''),
									webLabel: label.replace('Communications - ', '通讯设备 - '),
								};
							default:
								return {
     label, webLabel: label };
						}
					})(
						formerIndex === latterIndex
							? device.label
							: device.label.substring(0, latterIndex),
						device.deviceId
					);
					return {
     label, webLabel, deviceId: device.deviceId };
				};
				let videoDevices = [],
					audioDevices = [];
				for (const index in devices) {
    
					const device = devices[index];
					if (device.kind === 'videoinput') {
    
						videoDevices.push(generateDeviceJson(device));
					} else if (device.kind === 'audioinput') {
    
						audioDevices.push(generateDeviceJson(device));
					}
				}
				store.dispatch(updateAvailableDevices(DEVICE_TYPE.VIDEO_DEVICE, videoDevices));
				store.dispatch(updateAvailableDevices(DEVICE_TYPE.AUDIO_DEVICE, audioDevices));
				resolve({
     video: videoDevices, audio: audioDevices });
			});
		} catch (error) {
    
			console.warn('获取设备时发生错误');
			reject(error);
		}
	});
}

通过调用这个函数，我们将获取当前的多媒体设备信息，并将它发送至 Redux 进行状态更新。
整个多媒体设备模块的代码如下：

import {
     CustomerServiceOutlined } from '@ant-design/icons';
import {
     Button } from 'antd';
import {
     globalMessage } from 'Components/GlobalMessage/GlobalMessage';
import React, {
     useEffect, useState } from 'react';
import {
     DEVICE_TYPE } from 'Utils/Constraints';
import {
     updateAvailableDevices } from 'Utils/Store/actions';
import store from 'Utils/Store/store';
import {
     DeviceInfo } from 'Utils/Types';
import AudioDevices from './AudioDevices';
import VideoDevices from './VideoDevices';

export default function MediaDevices() {
    
	const [videoDevices, setVideoDevices] = useState(store.getState().availableVideoDevices);
	const [audioDevices, setAudioDevices] = useState(store.getState().availableAudioDevices);
	const [usingVideoDevice, setUsingVideoDevice] = useState('');
	const [usingAudioDevice, setUsingAudioDevice] = useState('');
	useEffect(
		() =>
			store.subscribe(() => {
    
				const storeState = store.getState();
				setVideoDevices(storeState.availableVideoDevices);
				setAudioDevices(storeState.availableAudioDevices);
				setUsingVideoDevice(`${
      (storeState.usingVideoDevice as DeviceInfo).webLabel}`);
				setUsingAudioDevice(`${
      (storeState.usingAudioDevice as DeviceInfo).webLabel}`);
			}),
		[]
	);

	useEffect(() => {
    
		getUserMediaDevices();
	}, []);

	return (
		<>
			<AudioDevices
				audioDevices={
    audioDevices}
				usingAudioDevice={
    usingAudioDevice}
				setUsingAudioDevice={
    setUsingAudioDevice}
			/>
			<VideoDevices
				videoDevices={
    videoDevices}
				usingVideoDevice={
    usingVideoDevice}
				setUsingVideoDevice={
    setUsingVideoDevice}
			/>
			<Button
				type='link'
				style={
    {
     fontSize: '0.9em' }}
				icon={
    <CustomerServiceOutlined />}
				onClick={
    () => {
    
					getUserMediaDevices().then(() => {
    
						globalMessage.success('设备信息更新完毕', 0.5);
					});
				}}>
				没找到合适的设备？点我重新获取设备
			</Button>
		</>
	);
}

/** * 获取用户多媒体设备 */
function getUserMediaDevices() {
    
	return new Promise((resolve, reject) => {
    
		try {
    
			navigator.mediaDevices.enumerateDevices().then((devices) => {
    
				const generateDeviceJson = (device: MediaDeviceInfo) => {
    
					const formerIndex = device.label.indexOf(' (');
					const latterIndex = device.label.lastIndexOf(' (');
					const {
     label, webLabel } = ((label, deviceId) => {
    
						switch (deviceId) {
    
							case 'default':
								return {
    
									label: label.replace('Default - ', ''),
									webLabel: label.replace('Default - ', '默认 - '),
								};
							case 'communications':
								return {
    
									label: label.replace('Communications - ', ''),
									webLabel: label.replace('Communications - ', '通讯设备 - '),
								};
							default:
								return {
     label, webLabel: label };
						}
					})(
						formerIndex === latterIndex
							? device.label
							: device.label.substring(0, latterIndex),
						device.deviceId
					);
					return {
     label, webLabel, deviceId: device.deviceId };
				};
				let videoDevices = [],
					audioDevices = [];
				for (const index in devices) {
    
					const device = devices[index];
					if (device.kind === 'videoinput') {
    
						videoDevices.push(generateDeviceJson(device));
					} else if (device.kind === 'audioinput') {
    
						audioDevices.push(generateDeviceJson(device));
					}
				}
				store.dispatch(updateAvailableDevices(DEVICE_TYPE.VIDEO_DEVICE, videoDevices));
				store.dispatch(updateAvailableDevices(DEVICE_TYPE.AUDIO_DEVICE, audioDevices));
				resolve({
     video: videoDevices, audio: audioDevices });
			});
		} catch (error) {
    
			console.warn('获取设备时发生错误');
			reject(error);
		}
	});
}

视频设备（VideoDevices.tsx）

秉持先易后难的原则，我们先绕过音频设备模块，来讲一下视频设备模块。整个模块代码如下：

import {
     Button, Select } from 'antd';
import React, {
     useEffect, useRef, useState } from 'react';
import {
     DEVICE_TYPE } from 'Utils/Constraints';
import eventBus from 'Utils/EventBus/EventBus';
import {
     getDeviceStream } from 'Utils/Global';
import {
     exchangeMediaDevice } from 'Utils/Store/actions';
import store from 'Utils/Store/store';
import {
     DeviceInfo } from 'Utils/Types';

interface VideoDevicesProps {
    
	videoDevices: Array<DeviceInfo>;
	usingVideoDevice: string;
	setUsingVideoDevice: React.Dispatch<React.SetStateAction<string>>;
}

export default function VideoDevices(props: VideoDevicesProps) {
    
	const [isExamingCamera, setIsExamingCamera] = useState(false);
	const examCameraRef = useRef<HTMLVideoElement>(null);
	useEffect(() => {
    
		if (isExamingCamera) {
    
			videoConnect(examCameraRef);
		} else {
    
			const examCameraDOM = examCameraRef.current as HTMLVideoElement;
			examCameraDOM.pause();
			examCameraDOM.srcObject = null;
		}
	}, [isExamingCamera]);

	useEffect(() => {
    
		const onCloseSettingModal = function () {
    
			setIsExamingCamera(false);
		};
		eventBus.on('CLOSE_SETTING_MODAL', onCloseSettingModal);
		return () => {
    
			eventBus.off('CLOSE_SETTING_MODAL', onCloseSettingModal);
		};
	}, []);

	return (
		<div>
			请选择录像设备:
			<Select
				placeholder='请选择录像设备'
				style={
    {
     width: '100%' }}
				onSelect={
    (
					label: string,
					option: {
     key: string; value: string; children: string }
				) => {
    
					props.setUsingVideoDevice(label);
					store.dispatch(
						exchangeMediaDevice(DEVICE_TYPE.VIDEO_DEVICE, {
    
							deviceId: option.key,
							label: option.value,
							webLabel: option.children,
						})
					);
					if (isExamingCamera) {
    
						videoConnect(examCameraRef);
					}
				}}
				value={
    props.usingVideoDevice}>
				{
    props.videoDevices.map((device) => (
					<Select.Option value={
    device.label} key={
    device.deviceId}>
						{
    device.webLabel}
					</Select.Option>
				))}
			</Select>
			<div style={
    {
     margin: '0.25rem' }}>
				<Button
					style={
    {
     width: '7em' }}
					onClick={
    () => {
    
						setIsExamingCamera(!isExamingCamera);
					}}>
					{
    isExamingCamera ? '停止检查' : '检查摄像头'}
				</Button>
			</div>
			<div
				style={
    {
    
					width: '100%',
					display: 'flex',
					justifyContent: 'center',
				}}>
				<video
					ref={
    examCameraRef}
					style={
    {
    
						background: 'black',
						width: '40vw',
						height: 'calc(40vw / 1920 * 1080)',
					}}
				/>
			</div>
		</div>
	);
}

async function videoConnect(examCameraRef: React.RefObject<HTMLVideoElement>) {
    
	const videoStream = await getDeviceStream(DEVICE_TYPE.VIDEO_DEVICE);
	const examCameraDOM = examCameraRef.current as HTMLVideoElement;
	examCameraDOM.srcObject = videoStream;
	examCameraDOM.play();
}

用户可使用本模块更换所需要使用的摄像头，并进行测试。

音频设备（AudioDevices）

音频设备模块所提供的功能与视频设备模块大致相同，但它多包含了测试麦克风音量的功能。在这个应用中，我通过 AudioWorkletNode 实现了麦克风音量的测试。首先需要在 public 下定义一个 worklet 脚本注册进程：

// \public\electronAssets\worklet\volumeMeter.js
/* eslint-disable no-underscore-dangle */
const SMOOTHING_FACTOR = 0.8;
// eslint-disable-next-line no-unused-vars
const MINIMUM_VALUE = 0.00001;
registerProcessor(
	'vumeter',
	class extends AudioWorkletProcessor {
    
		_volume;
		_updateIntervalInMS;
		_nextUpdateFrame;
		_currentTime;

		constructor() {
    
			super();
			this._volume = 0;
			this._updateIntervalInMS = 50;
			this._nextUpdateFrame = this._updateIntervalInMS;
			this._currentTime = 0;
			this.port.onmessage = (event) => {
    
				if (event.data.updateIntervalInMS) {
    
					this._updateIntervalInMS = event.data.updateIntervalInMS;
					// console.log(event.data.updateIntervalInMS);
				}
			};
		}

		get intervalInFrames() {
    
			// eslint-disable-next-line no-undef
			return (this._updateIntervalInMS / 1000) * sampleRate;
		}

		process(inputs, outputs, parameters) {
    
			const input = inputs[0];

			// Note that the input will be down-mixed to mono; however, if no inputs are
			// connected then zero channels will be passed in.
			if (0 < input.length) {
    
				const samples = input[0];
				let sum = 0;

				// Calculated the squared-sum.
				for (const sample of samples) {
    
					sum += sample ** 2;
				}

				// Calculate the RMS level and update the volume.
				const rms = Math.sqrt(sum / samples.length);
				this._volume = Math.max(rms, this._volume * SMOOTHING_FACTOR);

				// Update and sync the volume property with the main thread.
				this._nextUpdateFrame -= samples.length;
				if (this._nextUpdateFrame < 0) {
    
					this._nextUpdateFrame += this.intervalInFrames;
					// const currentTime = currentTime ;
					// eslint-disable-next-line no-undef
					if (!this._currentTime || 0.125 < currentTime - this._currentTime) {
    
						// eslint-disable-next-line no-undef
						this._currentTime = currentTime;
						// console.log(`currentTime: ${currentTime}`);
						this.port.postMessage({
     volume: this._volume });
					}
				}
			}

			return true;
		}
	}
);

在 React 项目中，我使用一个自定义的 Hook 来调用这个 Worklet 脚本，测试音量：

/** * 【自定义Hooks】监听媒体流音量 * @returns 音量、连接流函数、断连函数 */
const useVolume = () => {
    
	const [volume, setVolume] = useState(0);
	const ref = useRef({
    });

	const onmessage = useCallback((evt) => {
    
		if (!ref.current.audioContext) {
    
			return;
		}
		if (evt.data.volume) {
    
			setVolume(Math.round(evt.data.volume * 200));
		}
	}, []);

	const disconnectAudioContext = useCallback(() => {
    
		if (ref.current.node) {
    
			try {
    
				ref.current.node.disconnect();
			} catch (err) {
    }
		}
		if (ref.current.source) {
    
			try {
    
				ref.current.source.disconnect();
			} catch (err) {
    }
		}
		ref.current.node = null;
		ref.current.source = null;
		ref.current.audioContext = null;
		setVolume(0);
	}, []);

	const connectAudioContext = useCallback(
		async (mediaStream: MediaStream) => {
    
			if (ref.current.audioContext) {
    
				disconnectAudioContext();
			}
			try {
    
				ref.current.audioContext = new AudioContext();
				await ref.current.audioContext.audioWorklet.addModule(
					'../electronAssets/worklet/volumeMeter.js'
				);
				if (!ref.current.audioContext) {
    
					return;
				}
				ref.current.source = ref.current.audioContext.createMediaStreamSource(mediaStream);
				ref.current.node = new AudioWorkletNode(ref.current.audioContext, 'vumeter');
				ref.current.node.port.onmessage = onmessage;
				ref.current.source
					.connect(ref.current.node)
					.connect(ref.current.audioContext.destination);
			} catch (errMsg) {
    
				disconnectAudioContext();
			}
		},
		[disconnectAudioContext, onmessage]
	);

	return [volume, connectAudioContext, disconnectAudioContext];
};

整个音频设备模块的源代码如下：

import {
     Button, Checkbox, Progress, Select } from 'antd';
import {
     globalMessage } from 'Components/GlobalMessage/GlobalMessage';
import React, {
     useEffect, useRef, useState } from 'react';
import {
     DEVICE_TYPE } from 'Utils/Constraints';
import eventBus from 'Utils/EventBus/EventBus';
import {
     getDeviceStream } from 'Utils/Global';
import {
     useVolume } from 'Utils/MyHooks/MyHooks';
import {
     exchangeMediaDevice } from 'Utils/Store/actions';
import store from 'Utils/Store/store';
import {
     DeviceInfo } from 'Utils/Types';

interface AudioDevicesProps {
    
	audioDevices: Array<DeviceInfo>;
	usingAudioDevice: string;
	setUsingAudioDevice: React.Dispatch<React.SetStateAction<string>>;
}

export default function AudioDevices(props: AudioDevicesProps) {
    
	const [isExamingMicroPhone, setIsExamingMicroPhone] = useState(false);
	const [isSoundMeterConnecting, setIsSoundMeterConnecting] = useState(false);
	const examMicroPhoneRef = useRef<HTMLAudioElement>(null);

	const [volume, connectStream, disconnectStream] = useVolume();

	useEffect(() => {
    
		const examMicroPhoneDOM = examMicroPhoneRef.current as HTMLAudioElement;
		if (isExamingMicroPhone) {
    
			getDeviceStream(DEVICE_TYPE.AUDIO_DEVICE).then((stream) => {
    
				connectStream(stream).then(() => {
    
					globalMessage.success('完成音频设备连接');
					setIsSoundMeterConnecting(false);
				});
				examMicroPhoneDOM.srcObject = stream;
				examMicroPhoneDOM.play();
			});
		} else {
    
			disconnectStream();
			examMicroPhoneDOM.pause();
		}
	}, [isExamingMicroPhone]);

	useEffect(() => {
    
		const onCloseSettingModal = function () {
    
			setIsExamingMicroPhone(false);
			setIsSoundMeterConnecting(false);
		};
		eventBus.on('CLOSE_SETTING_MODAL', onCloseSettingModal);
		return () => {
    
			eventBus.off('CLOSE_SETTING_MODAL', onCloseSettingModal);
		};
	}, []);

	const [noiseSuppression, setNoiseSuppression] = useState(
		localStorage.getItem('noiseSuppression') !== 'false'
	);
	const [echoCancellation, setEchoCancellation] = useState(
		localStorage.getItem('echoCancellation') !== 'false'
	);

	return (
		<div>
			请选择录音设备:
			<Select
				placeholder='请选择录音设备'
				style={
    {
     width: '100%' }}
				onSelect={
    (
					label: string,
					option: {
     key: string; value: string; children: string }
				) => {
    
					props.setUsingAudioDevice(label);
					store.dispatch(
						exchangeMediaDevice(DEVICE_TYPE.AUDIO_DEVICE, {
    
							deviceId: option.key,
							label: option.value,
							webLabel: option.children,
						})
					);
					if (isExamingMicroPhone) {
    
						getDeviceStream(DEVICE_TYPE.AUDIO_DEVICE).then((stream) => {
    
							connectStream(stream).then(() => {
    
								globalMessage.success('完成音频设备连接');
								setIsSoundMeterConnecting(false);
							});
							const examMicroPhoneDOM = examMicroPhoneRef.current as HTMLAudioElement;
							examMicroPhoneDOM.pause();
							examMicroPhoneDOM.srcObject = stream;
							examMicroPhoneDOM.play();
						});
					}
				}}
				value={
    props.usingAudioDevice}>
				{
    props.audioDevices.map((device) => (
					<Select.Option value={
    device.label} key={
    device.deviceId}>
						{
    device.webLabel}
					</Select.Option>
				))}
			</Select>
			<div style={
    {
     marginTop: '0.25rem', display: 'flex' }}>
				<div style={
    {
     height: '1.2rem' }}>
					<Button
						style={
    {
     width: '7em' }}
						onClick={
    () => {
    
							if (!isExamingMicroPhone) setIsSoundMeterConnecting(true);
							setIsExamingMicroPhone(!isExamingMicroPhone);
						}}
						loading={
    isSoundMeterConnecting}>
						{
    isExamingMicroPhone ? '停止检查' : '检查麦克风'}
					</Button>
				</div>
				<div style={
    {
     width: '50%', margin: '0.25rem' }}>
					<Progress
						percent={
    volume}
						showInfo={
    false}
						strokeColor={
    
							isExamingMicroPhone ? (volume > 70 ? '#e91013' : '#108ee9') : 'gray'
						}
						size='small'
					/>
				</div>
				<audio ref={
    examMicroPhoneRef} />
			</div>
			<div style={
    {
     display: 'flex', marginTop: '0.5em' }}>
				<div style={
    {
     fontWeight: 'bold' }}>音频选项：</div>
				<div
					style={
    {
    
						display: 'flex',
						justifyContent: 'center',
					}}>
					<Checkbox
						checked={
    noiseSuppression}
						onChange={
    (evt) => {
    
							setNoiseSuppression(evt.target.checked);
							localStorage.setItem('noiseSuppression', `${
      evt.target.checked}`);
						}}>
						噪音抑制
					</Checkbox>
					<Checkbox
						checked={
    echoCancellation}
						onChange={
    (evt) => {
    
							setEchoCancellation(evt.target.checked);
							localStorage.setItem('echoCancellation', `${
      evt.target.checked}`);
						}}>
						回声消除
					</Checkbox>
				</div>
			</div>
		</div>
	);
}

除了更换测试麦克风、监听音量，它还允许用户自行选择连线时是否使用噪音抑制和回声消除。

与会状态

与会状态模块则比较简单，只为用户维护加入会议是否默认开启麦克风和摄像头。代码如下：

import {
     Checkbox } from 'antd';
import React, {
     useState } from 'react';

export default function MeetingStatus() {
    
    const [autoOpenMicroPhone, setAutoOpenMicroPhone] = useState(
        localStorage.getItem('autoOpenMicroPhone') === 'true'
    );
    const [autoOpenCamera, setAutoOpenCamera] = useState(
        localStorage.getItem('autoOpenCamera') === 'true'
    );

    return (
        <>
            <Checkbox
                checked={
    autoOpenMicroPhone}
                onChange={
    (e) => {
    
                    setAutoOpenMicroPhone(e.target.checked);
                    localStorage.setItem('autoOpenMicroPhone', `${
      e.target.checked}`);
                }}>
                与会时打开麦克风
            </Checkbox>
            <Checkbox
                checked={
    autoOpenCamera}
                onChange={
    (e) => {
    
                    setAutoOpenCamera(e.target.checked);
                    localStorage.setItem('autoOpenCamera', `${
      e.target.checked}`);
                }}>
                与会时打开摄像头
            </Checkbox>
        </>
    );
}

关于

最后一个模块将展示应用的信息。其最核心的部分在于检测应用是否需要更新，为了实现这一点，首先我写了一个简单的比较版本号的函数。

function needUpdate(nowVersion: string, targetVersion: string) {
    
	const nowArr = nowVersion.split('.').map((i) => Number(i));
	const newArr = targetVersion.split('.').map((i) => Number(i));
	const lessLength = Math.min(nowArr.length, newArr.length);
	for (let i = 0; i < lessLength; i++) {
    
		if (nowArr[i] < newArr[i]) {
    
			return true;
		} else if (nowArr[i] > newArr[i]) {
    
			return false;
		}
	}
	if (nowArr.length < newArr.length) return true;
	return false;
}

整个关于模块的代码如下：

import {
     Button, Image, Progress } from 'antd';
import axios from 'axios';
import {
     globalMessage } from 'Components/GlobalMessage/GlobalMessage';
import React, {
     useEffect, useMemo, useState } from 'react';
import {
     eWindow } from 'Utils/Types';
import './style.scss';

function needUpdate(nowVersion: string, targetVersion: string) {
    
	const nowArr = nowVersion.split('.').map((i) => Number(i));
	const newArr = targetVersion.split('.').map((i) => Number(i));
	const lessLength = Math.min(nowArr.length, newArr.length);
	for (let i = 0; i < lessLength; i++) {
    
		if (nowArr[i] < newArr[i]) {
    
			return true;
		} else if (nowArr[i] > newArr[i]) {
    
			return false;
		}
	}
	if (nowArr.length < newArr.length) return true;
	return false;
}

export default function About() {
    
	const [appVersion, setAppVersion] = useState<string | undefined>(undefined);
	useEffect(() => {
    
		eWindow.ipc.invoke('APP_VERSION').then((version: string) => {
    
			setAppVersion(version);
		});
	}, []);

	const thisYear = useMemo(() => new Date().getFullYear(), []);

	const [latestVersion, setLatestVersion] = useState(false);
	const [checking, setChecking] = useState(false);
	const checkForUpdate = () => {
    
		setChecking(true);
		axios
			.get('https://assets.aiolia.top/ElectronApps/SduMeeting/manifest.json', {
    
				headers: {
    
					'Cache-Control': 'no-cache',
				},
			})
			.then((res) => {
    
				const {
     latest } = res.data;
				if (needUpdate(appVersion as string, latest)) setLatestVersion(latest);
				else globalMessage.success({
     content: '当前已是最新版本，无需更新' });
			})
			.catch(() => {
    
				globalMessage.error({
    
					content: '检查更新失败',
				});
			})
			.finally(() => {
    
				setChecking(false);
			});
	};

	const [total, setTotal] = useState(Infinity);
	const [loaded, setLoaded] = useState(0);
	const [updating, setUpdating] = useState(false);
	const update = () => {
    
		setUpdating(true);
		axios
			.get(`https://assets.aiolia.top/ElectronApps/SduMeeting/${
      latestVersion}/update.zip`, {
    
				responseType: 'blob',
				onDownloadProgress: (evt) => {
    
					const {
     loaded, total } = evt;
					setTotal(total);
					setLoaded(loaded);
				},
				headers: {
    
					'Cache-Control': 'no-cache',
				},
			})
			.then((res) => {
    
				const fr = new FileReader();
				fr.onload = () => {
    
					eWindow.ipc.invoke('DOWNLOADED_UPDATE_ZIP', fr.result).then(() => {
    
						setTimeout(() => {
    
							eWindow.ipc.send('READY_TO_UPDATE');
						}, 500);
					});
				};
				fr.readAsBinaryString(res.data);
				globalMessage.success({
     content: '更新包下载完毕，即将重启应用...' });
			});
	};

	return (
		<div id='settingAboutContainer'>
			<div>
				<Image
					src={
    '../electronAssets/favicon177x128.ico'}
					preview={
    false}
					width={
    '25%'}
					height={
    '25%'}
				/>
			</div>
			<div className='settingAboutFaviconText'>山大会议</div>
			<div className='settingAboutFaviconText'>SDU Meeting</div>
			<div id='settingVersionText'>V {
    appVersion}</div>
			{
    latestVersion ? (
				<>
					<div>检查到有新的可用版本：V {
    latestVersion}，是否进行更新？</div>
					{
    updating ? (
						<>
							<Progress
								percent={
    Number(((loaded / total) * 100).toFixed(0))}
								status={
    loaded === total ? 'success' : 'active'}
							/>
						</>
					) : (
						<Button onClick={
    update}>开始下载</Button>
					)}
				</>
			) : (
				<Button type='primary' onClick={
    checkForUpdate} loading={
    checking}>
					检查更新
				</Button>
			)}
			<div id='copyright'>Copyright (c) 2021{
    thisYear ? ` - ${
      thisYear}` : ''} 德布罗煜</div>
		</div>
	);
}

当应用检测到新版本后，将会以 Blob 的形式下载最新的版本更新包，下载完成后，将会通过我在 electron 中编写的函数将更新包保存在特定的位置。

const ipc = require('electron').ipcMain;
const fs = require('fs-extra');

ipc.handle('DOWNLOADED_UPDATE_ZIP', (evt, data) => {
    
	fs.writeFileSync(path.join(EXEPATH, 'resources', 'update.zip'), data, 'binary');
	return true;
});

由于在应用开启的时候，更新包需要替换的部分文件处于占用状态，因此我在 electron 中写了另一个函数，用以开启一个独立于 山大会议 应用本身的子进程，在山大会议自动关闭后，调用我用 C++ 写的一个更新（解压）程序，将更新包的内容提取出来覆盖掉旧的文件，从而实现应用的更新。

// electron 中的更新进程
const {
     app } = require('electron');
const cp = require('child_process');

function readyToUpdate() {
    
	const {
     spawn } = cp;
	const child = spawn(
		path.join(EXEPATH, 'resources/ReadyUpdater.exe'),
		['YES_I_WANNA_UPDATE_ASAR'],
		{
    
			detached: true,
			shell: true,
		}
	);
	if (mainWindow) mainWindow.close();
	child.unref();
	app.quit();
}

// ReadyUpdater.cpp

#include <iostream>
#include <stdlib.h>
#include <tchar.h>
#include <Windows.h>
#include "unzip.h"
using namespace std;

int main(int argc, char* argv[])
{
    
	Sleep(300);
	if (argc < 2) {
    
		cout << "您正以不当方式运行该程序" << endl;
	}
	else {
    
		char* safetyKey = argv[1];
		if (strcmp("YES_I_WANNA_UPDATE_ASAR", safetyKey) != 0) {
    
			cout << "你不应当执行该程序" << endl;
		}
		else {
    
			HZIP hz = OpenZip(_T(".\\resources\\update.zip"), 0);
			SetUnzipBaseDir(hz, _T(".\\resources"));
			ZIPENTRY ze;
			GetZipItem(hz, -1, &ze);
			int numitems = ze.index;
			// -1 gives overall information about the zipfile
			for (int zi = 0; zi < numitems; zi++)
			{
    
				ZIPENTRY ze;
				GetZipItem(hz, zi, &ze); // fetch individual details
				UnzipItem(hz, zi, ze.name);         // e.g. the item's name.
			}
			CloseZip(hz);
			system("del .\\resources\\update.zip");
			cout << "更新完成" << endl;
			cout << "请重启应用" << endl;
		}
	}
	system("pause");
	return 0;
}