fix(web): obtain media device label

.github/CLA.md

@@ -44,4 +44,5 @@ Example:
 -->
 
 - Metal A-wing, @a-wing, 2024/10/23
-- Hongcha Zhang, @hongcha98, 2024/10/24
+- Hongcha Zhang, @hongcha98, 2024/10/24
+- Winter Zhang, @WinterJack002, 2024/10/26

webapp/components/device.tsx

@@ -11,7 +11,40 @@ import SvgAudio from './svg/audio'
 import SvgVideo from './svg/video'
 import { SvgPresentCancel, SvgPresentToAll } from './svg/present'
 
+// 1. Converts each device's deviceId and label into a displayable format. If label is empty, uses the device type and deviceId as the display name.
+function deviceInfoToOption(info: MediaDeviceInfo) {
+  const value = info.deviceId;
+  let text = info.label;
+  if (text.length <= 0) {
+      text = `${info.kind} (${info.deviceId})`;
+  }
+  return { value, text };
+}
+
+// 2. Removes duplicate items based on their value.
+function uniqByValue<T extends { value: unknown }>(items: T[]) {
+  const map = new Map<unknown, T>();
+  for (const item of items) {
+      if (!map.has(item.value)) {
+          map.set(item.value, item);
+      }
+  }
+  return Array.from(map.values());
+}
+
+// 3. Converts items to Device format
+const convertToDevice = (items: { value: string; text: string }[], kind: MediaDeviceKind): MediaDeviceInfo[] => {
+  return items.map(item => ({
+    deviceId: item.value,         // use value as the device ID
+    kind,
+    label: item.text,             // use text as the label
+    groupId: '',
+
+  })as MediaDeviceInfo);
+}
+
 export default function DeviceBar(props: { streamId: string }) {
+
   const [permissionAudio, setPermissionAudio] = useState("")
   const [permissionVideo, setPermissionVideo] = useState("")
 
@@ -48,31 +81,55 @@ export default function DeviceBar(props: { streamId: string }) {
       // NOTE:
       // Chrome: audio_capture, video_capture
       // Safari: microphone, camera
-      if (status.name === "audio_capture" || "microphone") {
+      if (status.name === "audio_capture" || status.name === "microphone") {
         setPermissionAudio(status.state)
       }
-      if (status.name === "video_capture" || "camera") {
+      if (status.name === "video_capture" || status.name === "camera") {
         setPermissionVideo(status.state)
       }
     })
 
   const updateDeviceList = async () => {
     const devices = (await navigator.mediaDevices.enumerateDevices()).filter(i => !!i.deviceId)
-    const audios: Device[] = devices.filter(i => i.kind === 'audioinput')
-    const videos: Device[] = devices.filter(i => i.kind === 'videoinput')
+    const audios = devices.filter(i => i.kind === 'audioinput').map(deviceInfoToOption)
+    const videos = devices.filter(i => i.kind === 'videoinput').map(deviceInfoToOption);
+
+    const uniqueAudios = uniqByValue(audios);
+    const uniqueVideos = uniqByValue(videos);
 
     if (currentDeviceAudio === deviceNone.deviceId) {
-      let device = audios[0]
-      if (device) await setCurrentDeviceAudio(device.deviceId)
+      let device = uniqueAudios[0]
+      if (device)
+        {
+          try {
+            await setCurrentDeviceAudio(device.value)
+          console.log('Audio device set successfully')
+        } catch (error) {
+          console.error('Failed to set audio device:', error)
+        }
+      }
+
     }
 
     if (currentDeviceVideo === deviceNone.deviceId) {
-      let device = videos[0]
-      if (device) await setCurrentDeviceVideo(device.deviceId)
+      let device = uniqueVideos[0]
+      if (device) {
+        try {
+          await setCurrentDeviceVideo(device.value)
+        console.log('Video device set successfully')
+      } catch (error) {
+        console.error('Failed to set video device:', error)
+      }
+    } else {
+      console.log('no video devices:')
+      await setCurrentDeviceVideo(deviceNone.deviceId)
+
+    }
     }
 
-    setDeviceAudio([...audios])
-    setDeviceVideo([...videos, deviceScreen])
+    setDeviceAudio(convertToDevice(uniqueAudios,'audioinput'))
+    setDeviceVideo(convertToDevice(uniqueVideos,'videoinput'))
+
   }
 
   const init = async () => {
@@ -181,7 +238,7 @@ export default function DeviceBar(props: { streamId: string }) {
             onChange={e => onChangedDeviceVideo(e.target.value)}
           >
             {deviceVideo.map(device =>
-              <option key={device.deviceId} value={device.deviceId}>{device.label}</option>
+              <option key={device.label} value={device.label}>{device.label}</option>
             )}
           </select>
         </section>