add mic volume indication (#204)

src/components/volume/MicVolume.tsx

@@ -0,0 +1,46 @@
+import LinearProgress from '@mui/material/LinearProgress';
+import { useContext, useEffect, useState } from 'react';
+import { ServiceContext } from '../../store/store';
+import { VolumeWatcher } from '../../utils/volumeWatcher';
+import hark from 'hark';
+
+const MicVolume = (): JSX.Element => {
+	const { mediaService } = useContext(ServiceContext);
+	const [ volumeLevel, setVolume ] = useState<number>(0);
+
+	useEffect(() => {
+		let volumeWatcher: VolumeWatcher | undefined;
+
+		// Add hark for mic
+		if (mediaService.previewMicTrack) {
+			const harkStream = new MediaStream();
+
+			harkStream.addTrack(mediaService.previewMicTrack.clone());
+
+			const micHark = hark(harkStream, {
+				play: false,
+				interval: 100,
+				threshold: -60,
+				history: 100
+			});
+
+			volumeWatcher = new VolumeWatcher({ hark: micHark });
+		}
+
+		const onVolumeChange = ({ scaledVolume }: { scaledVolume: number }): void => {
+			setVolume(scaledVolume*10); // Range: 0-100
+		};
+
+		volumeWatcher?.on('volumeChange', onVolumeChange);
+
+		return () => {
+			volumeWatcher?.off('volumeChange', onVolumeChange);
+		};
+	}, [ mediaService.previewMicTrack ]);
+
+	return (
+		<LinearProgress color='success' variant="determinate" value={volumeLevel} />
+	);
+};
+
+export default MicVolume;

src/views/join/Join.tsx

@@ -19,6 +19,7 @@ import AudioOutputChooser from '../../components/devicechooser/AudioOutputChoose
 import { canSelectAudioOutput } from '../../store/selectors';
 import TestAudioOutputButton from '../../components/audiooutputtest/AudioOutputTest';
 import ImpressumButton from '../../components/controlbuttons/ImpressumButton';
+import MicVolume from '../../components/volume/MicVolume';
 
 interface JoinProps {
 	roomId: string;
@@ -70,6 +71,7 @@ const Join = ({ roomId }: JoinProps): React.JSX.Element => {
 					<AudioInputChooser />
 					{ showAudioOutputChooser && <AudioOutputChooser /> }
 					<VideoInputChooser />
+					<MicVolume />
 					<TestAudioOutputButton />
 					<BlurSwitch />
 					<ChooserDiv>