デバイス初期化

devtools/src/components/AudioInputDevice.tsx

@@ -0,0 +1,55 @@
+import type React from 'react'
+import { useEffect, useState } from 'react'
+import { useSettingsStore } from '../store/useSettingsStore'
+
+const AudioInputDevice: React.FC = () => {
+  const [devices, setDevices] = useState<MediaDeviceInfo[]>([])
+  const setAudioInputDeviceId = useSettingsStore((state) => state.setAudioInputDeviceId)
+  const audioInputDeviceId = useSettingsStore((state) => state.settings.audio.inputDeviceId)
+
+  useEffect(() => {
+    const getDevices = async () => {
+      const permissionStatus = await navigator.permissions.query({
+        name: 'microphone' as PermissionName,
+      })
+
+      const handlePermissionChange = async () => {
+        if (permissionStatus.state === 'granted') {
+          const devices = await navigator.mediaDevices.enumerateDevices()
+          const audioInputDevices = devices.filter((device) => device.kind === 'audioinput')
+          setDevices(audioInputDevices)
+        } else {
+          setDevices([])
+        }
+      }
+
+      // 初期状態の処理
+      handlePermissionChange()
+
+      // 権限変更の監視
+      permissionStatus.onchange = handlePermissionChange
+
+      return () => {
+        // ククリーンアップ
+        permissionStatus.onchange = null
+      }
+    }
+    getDevices()
+  }, [])
+
+  const handleChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
+    setAudioInputDeviceId(e.target.value)
+  }
+
+  return (
+    <select onChange={handleChange} value={audioInputDeviceId}>
+      {devices.map((device) => (
+        <option key={device.deviceId} value={device.deviceId}>
+          {device.label || `Microphone ${device.deviceId}`}
+        </option>
+      ))}
+    </select>
+  )
+}
+
+export default AudioInputDevice

devtools/src/components/AudioOutputDevice.tsx

@@ -0,0 +1,55 @@
+import type React from 'react'
+import { useEffect, useState } from 'react'
+import { useSettingsStore } from '../store/useSettingsStore'
+
+const AudioOutputDevice: React.FC = () => {
+  const [devices, setDevices] = useState<MediaDeviceInfo[]>([])
+  const setAudioOutputDeviceId = useSettingsStore((state) => state.setAudioOutputDeviceId)
+  const audioOutputDeviceId = useSettingsStore((state) => state.settings.audio.outputDeviceId)
+
+  useEffect(() => {
+    const getDevices = async () => {
+      const permissionStatus = await navigator.permissions.query({
+        name: 'microphone' as PermissionName,
+      })
+
+      const handlePermissionChange = async () => {
+        if (permissionStatus.state === 'granted') {
+          const devices = await navigator.mediaDevices.enumerateDevices()
+          const audioOutputDevices = devices.filter((device) => device.kind === 'audiooutput')
+          setDevices(audioOutputDevices)
+        } else {
+          setDevices([])
+        }
+      }
+
+      // 初期状態の処理
+      handlePermissionChange()
+
+      // 権限変更の監視
+      permissionStatus.onchange = handlePermissionChange
+
+      return () => {
+        // ククリーンアップ
+        permissionStatus.onchange = null
+      }
+    }
+    getDevices()
+  }, [])
+
+  const handleChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
+    setAudioOutputDeviceId(e.target.value)
+  }
+
+  return (
+    <select onChange={handleChange} value={audioOutputDeviceId}>
+      {devices.map((device) => (
+        <option key={device.deviceId} value={device.deviceId}>
+          {device.label || `Speaker ${device.deviceId}`}
+        </option>
+      ))}
+    </select>
+  )
+}
+
+export default AudioOutputDevice

devtools/src/components/MediaSettings.tsx

@@ -1,12 +1,15 @@
 import type React from 'react'
 import { useSettingsStore } from '../store/useSettingsStore'
 import AudioCodecMimeType from './AudioCodecMimeType'
+import AudioInputDevice from './AudioInputDevice'
+import AudioOutputDevice from './AudioOutputDevice'
 import AudioToggle from './AudioToggle'
 import CameraPermissionState from './CameraPermissionState'
 import MicrophonePermissionState from './MicrophonePermissionState'
 import RequestMediaPermissionButton from './RequestMediaPermissionButton'
 import TransceiverDirection from './TransceiverDirection'
 import VideoCodecMimeType from './VideoCodecMimeType'
+import VideoInputDevice from './VideoInputDevice'
 import VideoToggle from './VideoToggle'
 
 const MediaSettings: React.FC = () => {
@@ -28,6 +31,12 @@ const MediaSettings: React.FC = () => {
         Microphone permission state:
         <MicrophonePermissionState />
         <br />
+        Audio input device:
+        <AudioInputDevice />
+        <br />
+        Audio output device:
+        <AudioOutputDevice />
+        <br />
         Direction:
         <TransceiverDirection value={audioDirection} onChange={setAudioDirection} />
         <br />
@@ -41,6 +50,9 @@ const MediaSettings: React.FC = () => {
         Camera permission state:
         <CameraPermissionState />
         <br />
+        Video input device:
+        <VideoInputDevice />
+        <br />
         Direction:
         <TransceiverDirection value={videoDirection} onChange={setVideoDirection} />
         <br />

devtools/src/components/VideoInputDevice.tsx

@@ -0,0 +1,55 @@
+import type React from 'react'
+import { useEffect, useState } from 'react'
+import { useSettingsStore } from '../store/useSettingsStore'
+
+const VideoInputDevice: React.FC = () => {
+  const [devices, setDevices] = useState<MediaDeviceInfo[]>([])
+  const setVideoInputDeviceId = useSettingsStore((state) => state.setVideoInputDeviceId)
+  const videoInputDeviceId = useSettingsStore((state) => state.settings.video.inputDeviceId)
+
+  useEffect(() => {
+    const getDevices = async () => {
+      const permissionStatus = await navigator.permissions.query({
+        name: 'camera' as PermissionName,
+      })
+
+      const handlePermissionChange = async () => {
+        if (permissionStatus.state === 'granted') {
+          const devices = await navigator.mediaDevices.enumerateDevices()
+          const videoInputDevices = devices.filter((device) => device.kind === 'videoinput')
+          setDevices(videoInputDevices)
+        } else {
+          setDevices([])
+        }
+      }
+
+      // 初期状態の処理
+      handlePermissionChange()
+
+      // 権限変更の監視
+      permissionStatus.onchange = handlePermissionChange
+
+      return () => {
+        // ククリーンアップ
+        permissionStatus.onchange = null
+      }
+    }
+    getDevices()
+  }, [])
+
+  const handleChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
+    setVideoInputDeviceId(e.target.value)
+  }
+
+  return (
+    <select onChange={handleChange} value={videoInputDeviceId}>
+      {devices.map((device) => (
+        <option key={device.deviceId} value={device.deviceId}>
+          {device.label || `Camera ${device.deviceId}`}
+        </option>
+      ))}
+    </select>
+  )
+}
+
+export default VideoInputDevice

devtools/src/store/useSettingsStore.ts

@@ -4,14 +4,18 @@ import { create } from 'zustand'
 type Settings = {
   audio: {
     isEnable: boolean
+    inputDeviceId: string
+    outputDeviceId: string
     direction: Direction
     codecMimeType: string
   }
   video: {
     isEnable: boolean
+    inputDeviceId: string
     direction: Direction
     codecMimeType: string
   }
+
   permissionState: {
     microphone: 'granted' | 'denied' | 'prompt' | 'undefined'
     camera: 'granted' | 'denied' | 'prompt' | 'undefined'
@@ -30,10 +34,13 @@ type SettingsStore = {
   settings: Settings
 
   toggleAudio: (enabled: boolean) => void
+  setAudioInputDeviceId: (deviceId: string) => void
+  setAudioOutputDeviceId: (deviceId: string) => void
   setAudioDirection: (direction: Direction) => void
   setAudioCodecMimeType: (mimeType: string) => void
 
   toggleVideo: (enabled: boolean) => void
+  setVideoInputDeviceId: (deviceId: string) => void
   setVideoDirection: (direction: Direction) => void
   setVideoCodecMimeType: (mimeType: string) => void
 
@@ -63,11 +70,14 @@ export const useSettingsStore = create<SettingsStore>()((set, get) => ({
     },
     audio: {
       isEnable: true,
+      inputDeviceId: 'default',
+      outputDeviceId: 'default',
       direction: 'sendrecv',
       codecMimeType: 'undefined',
     },
     video: {
       isEnable: true,
+      inputDeviceId: 'default',
       direction: 'sendrecv',
       codecMimeType: 'undefined',
     },
@@ -145,6 +155,28 @@ export const useSettingsStore = create<SettingsStore>()((set, get) => ({
       },
     })),
 
+  setAudioInputDeviceId: (deviceId: string) =>
+    set((state) => ({
+      settings: {
+        ...state.settings,
+        audio: {
+          ...state.settings.audio,
+          inputDeviceId: deviceId,
+        },
+      },
+    })),
+
+  setAudioOutputDeviceId: (deviceId: string) =>
+    set((state) => ({
+      settings: {
+        ...state.settings,
+        audio: {
+          ...state.settings.audio,
+          outputDeviceId: deviceId,
+        },
+      },
+    })),
+
   setAudioDirection: (direction: Direction) =>
     set((state) => ({
       settings: {
@@ -178,6 +210,18 @@ export const useSettingsStore = create<SettingsStore>()((set, get) => ({
       },
     })),
 
+  setVideoInputDeviceId: (deviceId: string) => {
+    set((state) => ({
+      settings: {
+        ...state.settings,
+        video: {
+          ...state.settings.video,
+          inputDeviceId: deviceId,
+        },
+      },
+    }))
+  },
+
   setVideoDirection: (direction: Direction) =>
     set((state) => ({
       settings: {