Merge pull request #45 from huanghuang358/main

Author: rocka

webapp/components/player/player.tsx

@@ -16,7 +16,9 @@ import {
   SvgExitFullscreen,
   SvgPictureInPicture,
   SvgExitPictureInPicture,
+  SvgMic,
 } from '../svg/player'
+import VolumeExtractor from '../use/volumeExtraction'
 
 function AudioWave(props: { stream: MediaStream }) {
   const refWave = useRef<HTMLDivElement>(null)
@@ -43,6 +45,37 @@ function AudioWave(props: { stream: MediaStream }) {
   return <div ref={refWave}></div>
 }
 
+function Mic(props: { stream: MediaStream }) {
+  const [volumeValue, setVolumeValue] = useState(0)
+  const rest = 100 - volumeValue
+  useEffect(() => {
+    let done = false
+    if (props.stream.getAudioTracks().length) {
+      const extractor = new VolumeExtractor(props.stream)
+      function updateVolume() {
+        const value = extractor.calculateVolume()
+        setVolumeValue(value)
+        if (!done) requestAnimationFrame(updateVolume)
+      }
+      updateVolume()
+    }
+    return(() => {
+      done = true
+    })
+  }, [props.stream])
+  return (
+    <div
+      className="absolute top-0 right-0 rounded-xl p-1 m-2 transition-opacity duration-300"
+      style={{
+        background: `linear-gradient(to bottom, white ${rest}%, red ${volumeValue}%)`,
+        opacity: volumeValue > 3 ? '1' : '0'
+      }}
+    >
+      <SvgMic />
+    </div>
+  )
+}
+
 export default function Player(props: { stream: MediaStream, muted: boolean, audio?: boolean, video?: boolean, width: string }) {
   const refVideo = useRef<HTMLVideoElement>(null)
   const [showAudio, setShowAudio] = useState(false)
@@ -193,6 +226,7 @@ export default function Player(props: { stream: MediaStream, muted: boolean, aud
         ? <AudioWave stream={props.stream} />
         : null
       }
+      <Mic stream={props.stream} />
       <div
         className={`absolute bottom-0 left-0 right-0 rounded-b-xl px-4 py-3 flex justify-between items-center transition-opacity duration-300 ${
           showControls ? 'opacity-100' : 'opacity-0 pointer-events-none'

webapp/components/svg/player.tsx

@@ -44,4 +44,12 @@ export function SvgExitPictureInPicture() {
       <path d="M896 128a42.666667 42.666667 0 0 1 42.666667 42.666667v298.666666h-85.333334V213.333333H170.666667v597.333334h256v85.333333H128a42.666667 42.666667 0 0 1-42.666667-42.666667V170.666667a42.666667 42.666667 0 0 1 42.666667-42.666667h768z m0 426.666667a42.666667 42.666667 0 0 1 42.666667 42.666666v256a42.666667 42.666667 0 0 1-42.666667 42.666667h-341.333333a42.666667 42.666667 0 0 1-42.666667-42.666667v-256a42.666667 42.666667 0 0 1 42.666667-42.666666h341.333333z m-405.333333-256L403.498667 385.834667l96 96-60.330667 60.330666-96-96L256 533.333333V298.666667h234.666667z"></path>
     </svg>
   )
+}
+
+export function SvgMic() {
+  return(
+    <svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="24" height="24">
+      <path d="M512 128a128 128 0 0 0-128 128v170.666667a128 128 0 1 0 256 0V256a128 128 0 0 0-128-128z m0-85.333333a213.333333 213.333333 0 0 1 213.333333 213.333333v170.666667a213.333333 213.333333 0 1 1-426.666666 0V256a213.333333 213.333333 0 0 1 213.333333-213.333333zM130.346667 469.333333H216.32a298.752 298.752 0 0 0 591.274667 0h86.016A384.170667 384.170667 0 0 1 554.666667 808.32V981.333333h-85.333334v-173.013333A384.170667 384.170667 0 0 1 130.346667 469.333333z" p-id="3352"></path>
+    </svg>
+  )
 }

webapp/components/use/volumeExtraction.ts

@@ -0,0 +1,31 @@
+export default class VolumeExtractor {
+  private audioContext: AudioContext
+  private source: MediaStreamAudioSourceNode
+  private analyser: AnalyserNode
+  private dataArray: Uint8Array
+  private bufferLength: number
+
+  constructor(stream: MediaStream) {
+    this.audioContext = new AudioContext()
+    this.source = this.audioContext.createMediaStreamSource(stream)
+    this.analyser = this.audioContext.createAnalyser()
+    this.analyser.fftSize = 512
+    this.bufferLength = this.analyser.frequencyBinCount
+    this.dataArray = new Uint8Array(this.bufferLength)
+    this.source.connect(this.analyser)
+  }
+
+  public calculateVolume = () => {
+    this.analyser.getByteTimeDomainData(this.dataArray)
+    let sum = 0
+    for (let i = 0; i < this.bufferLength; i++) {
+      const val = this.dataArray[i] - 128
+      sum += val * val
+    }
+    const rms = Math.sqrt(sum / this.bufferLength)
+    const normalized = rms / 127
+    const perceptual = Math.log10(1 + 9 * normalized)
+    const volumeValue = Math.round(perceptual * 100)
+    return volumeValue
+  }
+}